Changing a link text with jQuery / ASP.NET not working immediately

Question

I've got a Problem with my code in asp.net using jQuery to alter a link text. Weird thing about it: I have to click exactly four times so it works and my link changes after that. Can anyone tell me what could be the reason for this strange bevahiour? Any caching issues?

This is my code in asp.net:

<asp:GridView ID="gvSurveys" runat="server" AutoGenerateColumns="false" CssClass="ChildGrid" RowStyle-CssClass="aspBoundField" Width="100%">
    <Columns>
        <asp:TemplateField HeaderStyle-CssClass="aspBoundField_Header" ItemStyle-CssClass="aspBoundField" HeaderText="Lieferant">
            <ItemTemplate>
                <a href="javascript:void(0)" class="linkfield" id="surveyListSupplierLink_<%# Eval("ID") %>" onclick="document.getElementById('surveyList').style.display='none'"><%# Eval("Lieferant.Name") %></a>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderStyle-CssClass="aspBoundField_Header" ItemStyle-CssClass="aspBoundField" HeaderText="Fragebogenkatalog">
            <ItemTemplate>
                <a href="javascript:void(0)" class="linkfield" id="surveyListCatalogueLink_<%# Eval("ID") %>" onclick="document.getElementById('surveyList').style.display='none'"><%# Eval("Fragebogenkatalog.Name") %></a>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderStyle-CssClass="aspBoundField_Header" ItemStyle-CssClass="aspBoundField" HeaderText="Status">
            <ItemTemplate>
            <!-- This is where the changes should happen: -->
                <a href="javascript:void(0)" class="linkfield" id="surveyListStatusLink_<%# Eval("ID") %>" onclick="document.getElementById('surveyList').style.display='none'"><%# Eval("Status_Text") %></a>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

And here comes my JavaScript / jQuery:

$("#surveyListStatusLink_" + surveyData.Id).html(surveyData.StatusText);

So basically what I want to happen is that when a certain event is fired (in this case it's a click on my link) the link title should be changed. It all works out fine, I bound the click event like this:

<script type="text/javascript">
    $(document).on("click", ".linkfield", function () {
        numberStart = $(this).attr("id").indexOf("_") + 1;
        SelectedId = $(this).attr("id").substring(numberStart, $(this).attr("id").length);

        LoadData(SelectedId);

        $("#fade").fadeIn(300, "swing", function () { $("#surveyForm").fadeIn(200); });

    })
</script>

the LoadData function that contains the jQuery statement:

function LoadData(id) {
    $.ajax({
        type: "POST",
        url: "SurveyList.aspx/GetData",
        data: '{surveyId: "' + id + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnLoadDataSuccess,
        failure: function (response) {
            alert(response.d);
        }
    });
}
function OnLoadDataSuccess(response) {
    if (response.d.substring(0,5) == "Error")
        alert(response.d);
    else {
        surveyData = jQuery.parseJSON(response.d);

        $("#surveyFormTitle").html(surveyData.Supplier.Name); // Note: this shows up properly!

        $("#surveyListStatusLink_" + surveyData.Id).html(surveyData.StatusText);  // This doesn't...
    }
}

When I debug it I can see the html value is altered properly, but here comes the problem: It won't show up in the Browser. It's not showing any changes and I'm not quite sure what I'm doing wrong.

Things that I already tried:

Using the .attrib()-function on the title
Using the .fadeOut()-function on the link
Using the .text()-function on the link-element

...but still: No visible changes.

So can anyone tell what's the problem and how i could possibly solve it?

Thanks in advance!

Is the event firing correctly when you click on the link? If so, I think you can just replace $("#surveyListStatusLink_" + surveyData.Id) with $(this). I would try $(this).text("blah") just to see if that works. I know you already tried .text, but maybe the wrong item is being selected. — bsayegh, Apr 01 '14 at 14:45
hi bsayegh, thanks for your reply! the event is firing correctly. strange thing is that it works after clicking the link 4 times. anyway i'll try what you suggested. — SilvanU, Apr 02 '14 at 07:04

score 0 · Answer 1 · answered Apr 02 '14 at 14:07

I know this isn't a great answer, but looking at the code I cant think of a great reason for it to be an issue. The only thing I can think of is to dumb it down a lot. First, change the onclick event handler for each anchor tag to this

onclick="HandleClick(this, '<%#Eval("id")%>');">

Then replace your javascript with this function HandleClick (link, selectedId) {

    document.getElementById('surveyList').style.display='none' //Just moved this in to the method
    LoadData(link, selectedId); //Load the data with the id and link you provided

    $("#fade").fadeIn(300, "swing", function () { $("#surveyForm").fadeIn(200); });

})

Then pass the link to your Load method and success methods so you can use it directly rather than querying for it

function LoadData(link, id) {
$.ajax({
    type: "POST",
    url: "SurveyList.aspx/GetData",
    data: '{surveyId: "' + id + '" }',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(response){ 
          OnLoadDataSuccess(response, link); //Still calling OnLoadDataSuccess, but changed it so we can easily provide input parameters
    },
    failure: function (response) {
        alert(response.d);
    }
  });
}

function OnLoadDataSuccess(response, link) {
    if (response.d.substring(0,5) == "Error")
         alert(response.d);
    else {
        surveyData = jQuery.parseJSON(response.d);

       $("#surveyFormTitle").html(surveyData.Supplier.Name); // Note: this shows up properly!

       link.innerHTML = surveyData.StatusText; //Use simple javascript to change the information.
    } 
}

It may not work correctly when you copy and paste because I haven't really tested it, but the idea is that you pass in the link and the ID instead of having to parse them out with javascript. Then you pass them to each method so that you can refer to them directly. This should remove issues with jquery and just get down to straight javascript.

Mind you, I am by no means claiming to know what the problem is, but think it will at least be easier to debug if it is less complex.

Good luck!

thanks for the answer! trying your solution i found out that when i use the class (.linkfield) as a selector, it works fine. the problem is that this way i change all the links... — SilvanU, Apr 04 '14 at 13:09
i just solved it - the underscores in the id were the problem. thanks for helping me find the problem. i'll post an answers for anyone who may have the same problem. — SilvanU, Apr 04 '14 at 13:26

score 0 · Accepted Answer · edited May 23 '17 at 12:11

0

I just found out what the problem was reading this post: How do I get jQuery to select elements with a . (period) in their ID?

Long story short: jQuery needs a backslash as an escape sequence for ANY special character. An underscore also counts as a special char.

So, this is the solution:

$("#surveyListStatusLink\\_" + surveyData.Id).text(surveyData.StatusText);

edited May 23 '17 at 12:11

Community

1
1

answered Apr 04 '14 at 13:29

SilvanU

21
5

Changing a link text with jQuery / ASP.NET not working immediately

2 Answers2