user2324644 user2324644 - 3 months ago 30
ASP.NET (C#) Question

Change label inner text that contains link using Ajax

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

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 '