Change label inner text that contains link using Ajax

Question

I have a label that contains a link like following:

<label id="textlabel" > <a href="#"  id="testlink">data</a> </label>

I am trying to use Ajax to change label text, but it does not work.

For testing purposes, it works here but it does not work on my web page (the web page is brand new without anything else).

$('#testlink').click(function(){
    $('#testlabel').text("new data");
});

JavaScript:

function myfunc(clicked_id) {

            var label = document.getElementById(clicked_id).parentElement;
            var params = "{'orderid':'" + clicked_id + "'}";
            var fd = new FormData();
            fd.append("orderid", params);
            alert("test");

            $("'#" + clicked_id + "'").click(function () {
                $.ajax
                       ({
                           url: 'Handler.ashx',
                           data: fd,
                           processData: false,
                           contentType: false,
                           type: 'POST',
                           success: function (result) {
                               $("'#"+label.id+"'").text(result);
                               }
                       })
            });
        }

Update:

the following ajax works in general

 <script type="text/javascript">
function myfunc(clicked_id) {
    var params = "{'orderid':'" + clicked_id + "'}";
    var label = document.getElementById(clicked_id).parentElement;

    $("#"+label.id).click(function () {
        $.ajax({
            type: "POST",
            url: "Handler.ashx",
            data: clicked_id,
            success: function (result) {
                $("#" + label.id).text(result);
                      }          
        }); });
}

i spent so much time to pinpoint issue and now i think the issue is found at autogenerated elements. for example

<table>
<tr><td><label id="lbl" style="background-color:yellow">
<a href="#" onclick="myfunc(this.id)" id="00000">Label</a>
</label></td></tr>
@for(int i=0;i<4;i++)
{
 <tr><td>
<label id="lbl+@i" style="background-color:yellow">
<a href="#" onclick="myfunc(this.id)" id="@i">Label</a>
 </label></td></tr>
}
</table>

ajax only changes first label' text but not other auto generated links and labels. the following part does not run when clicking on auto generated links

            $("#"+label.id).click(function () {
            $.ajax({
                type: "POST",
                url: "Handler.ashx",
                data: clicked_id,
                success: function (result) {
                    $("#" + label.id).text(result);
                          }          
            }); });

Update：

Finally I found what went wrong. it is the label ids I used. they all have "+" after changing to "_", my app works fine now.

thanks to all who helped

just add a console.log(label.id); in your success event handler to see if the label object is there. — splattne, May 04 '13 at 06:40
$("'#"+label.id+"'") is not correct: it should be "#" + label.id -- without ' -- you add the ' characters to the string — splattne, May 04 '13 at 06:41
after `success: function (result) {` -- but the string in $(...) is wrong as I stated in my comment above — splattne, May 04 '13 at 06:43
i tried with $("#" + clicked_id) and $("#" + label.id).text(result), still not working — user2324644, May 04 '13 at 06:45
added now it is success: function (result) { console.log(label.id) $("#" + label.id).text(result); } dont see anything in chrome — user2324644, May 04 '13 at 06:50
okay, this line is also wrong (event handler on wrong id): `$("'#" + clicked_id + "'").click(function () {` ---> should be `$("#" + clicked_id).click(function () {` — splattne, May 04 '13 at 06:57
Btw, I think the whole setup is wrong, you don't need a tag around your link. Why? — splattne, May 04 '13 at 07:00
what do u mean ?? all has dynamic generated id and they are numbers with 8 digits. is this a problem? — user2324644, May 04 '13 at 07:40
ids must begin with a letter: http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — splattne, May 04 '13 at 07:40
oh, but i have no problem reference to those ids. but that could be, let me try — user2324644, May 04 '13 at 07:42
i changed ids to id+xxxx (x is int) and still no data sent out to handler, in fact, i tested ur code with int ids, your code works — user2324644, May 04 '13 at 08:06
tested with ajax, it works now in general, but it still does not work with the elements generated for some reason, — user2324644, May 04 '13 at 08:32
ok i tested a few times more, now it seems ajax does not fire with automatically generated links, is that the way supposed to be? — user2324644, May 04 '13 at 08:43
The html page and the JS dom etc. does not know if tag are created programmatically or with static html code. The problem must be somewhere else. Try to go step by step and add some console.log statements to see if the code is executed. Or debug in Chrome. — splattne, May 04 '13 at 11:10

splattne · Accepted Answer · 2013-05-04T06:46:15.050

Update after the question's code was changed

There's a glitch in

success: function (result) {
    $("'#"+label.id+"'").text(result) 
}

should be

success: function (result) {
    $("#"+label.id).text(result) 
}

Also, to test if the label object is there, you could add

success: function (result) {
    console.log(label); // DON'T FORGET TO REMOVE THIS LINE LATER BEFORE DEPLOYING
    $("#"+label.id).text(result) 
}

Maybe because in your test function you've misspelled the label's id textlabel as testlabel

in

$('#testlink').click(function(){
    $('#testlabel').text("new data");
});

?

Then in your real code:

success: function (result) {
    $('#label.id).text(result);
}

#label.id is

not the correct jQuery selector. It should be '#textlabel'
It's missing the closing '

score 1 · Answer 2 · edited Aug 11 '16 at 12:25

1

Hey If you want to update all label text containing links please try this code I also update your demo link please refer

$('[id*="test"]').text("ddaadfa");

See Demo

If you are using ajax then you have to use this code in success block to change text of link

success: function (result) {
    $('[id*="test"]').text("ddaadfa");
}

edited Aug 11 '16 at 12:25

Gilad Green

36,708
7
61
95

answered May 04 '13 at 16:44

Neeraj Dubey

4,401
8
30
49

I will try, but what is that "*" used for? Why do we need to use [ ] in this case? – user2324644 May 04 '13 at 18:03
Just to clarify all label has different ids, not same ids – user2324644 May 04 '13 at 19:37
if i want to use label.id variable in this context, how should i write this? is it $('[id*="+label.id+"]')? – user2324644 May 04 '13 at 21:48
Cool No probs if you have different ids of each label,use this code $('label').text("ddaadfa"); this code will change all label text whether ids are same or not. – Neeraj Dubey May 05 '13 at 10:03

Change label inner text that contains link using Ajax

2 Answers2