使用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:

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

Answer 1

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 '

Answer 2

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