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:

1. 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);
                         }          
           }); });
   }
   

2. 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

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:

1. 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);
                         }          
           }); });
   }
   

2. 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

• c#
• javascript
• asp
• asp-mvc
• jquery

Share Follow edited May 6, 2013 at 2:34 user2324644 asked May 4, 2013 at 6:03 user2324644user2324644 4322 silver badges1111 bronze badges 22

• just add a console.log(label.id); in your success event handler to see if the label object is there. – splattne Commented May 4, 2013 at 6:40
• $("'#"+label.id+"'") is not correct: it should be "#" + label.id -- without ' -- you add the ' characters to the string – splattne Commented May 4, 2013 at 6:41
• where should console.log(label.id) go into ? – user2324644 Commented May 4, 2013 at 6:42
• after success: function (result) { -- but the string in $(...) is wrong as I stated in my ment above – splattne Commented May 4, 2013 at 6:43
• i tried with $("#" + clicked_id) and $("#" + label.id).text(result), still not working – user2324644 Commented May 4, 2013 at 6:45

 |  Show 17 more ments

2 Answers 2

Sorted by: Reset to default 5

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

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

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");
}