[RESOLVED]Jquery code not working on second time through.

Something similar was happening on this thread
http://forums.asp.net/p/2009862/5782103.aspx?Re+Ajax+request+not+being+regarded+as+an+ajax+request+in+Action
+ and it was answered by Starain chen.  However when I implement the same solution on this action it did not work.

I have a JQuery function.  In this function when an error is returned from an AJAX call, an alert pops up and then a label is populated.  Here is the code below.

        $.ajax(options).done(function (data) {
           debugger
            if (data != null) {
                if (data == "Good") {
                    returnedValue = data;
                }
                else {
                    bError = true;
                    alert("An Error has occurred.n" + data.toString());
                    returnedValue = "An Error has occurred.n" + data.toString();
                }
            }
            else {
                bError = true;
                alert("An Error has occurred.nIt was not possible to update the PR SubCLIN.");
                returnedValue = "An Error has occurred.nIt was not possible to update the PR SubCLIN.";
            }
        });
        var test = bError;
        $("#PRSectionB").empty();
       //alert(returnedValue);
        var sURLSectionB = '@Url.Action("Edit", "PR")';
       //alert(sURLSectionB);
        var options = {
            url: sURLSectionB,
            type: "get",
            cache: false,
            async: false
        };
        //alert(options.url);
        $.ajax(options).done(function (data) {
           //debugger
            $("#PRSectionB").replaceWith(data);
        });
        if (bError) {
            $("#LinesEdited").addClass("field-validation-error").text(returnedValue).show();
        }
        else {
            $("#LinesEdited").removeClass("field-validation-error").text("").hide();
        }

The last 4 lines are meant to populate this label so as to display the error message without using an Alert().

  <label id="LinesEdited" style="display:none" class="display-label"></label>

I have stepped through the code using debugger.  Each line runs without an error.  The first time through, the label displays and is properly styled using the field-validation-error class.  However on any subsequent run, then the label does not display at
all, regardless of whether there is an error.

Hi joeller,

As for your problem, I recommend you to check request via developer tools network. Besides, you could also post your relevant code or project, it will be useful for us to test your code and fix the problem.

Best Regards,

sw-ing

sw-ing

I recommend you to check request via developer tools network.

If you had read the thread to which I referred, you would have noted I am working in IE 8 which does not have Developer tools Network.  I did post the relevant code.  If you read the OP, you will note that the relevant code is this part of that function

        if (bError) {
            $("#LinesEdited").addClass("field-validation-error").text(returnedValue).show();
        }
        else {
            $("#LinesEdited").removeClass("field-validation-error").text("").hide();
        }

 

I found what is causing the above stated symptoms.  Turns out that the click event handler function which contains all of the code above is firing once the first time I click the button, but on any subsequent clicks, the function is being run twice, the
second time after the field with the data is no longer present.  Here is the full function.

    $(document).on("click", "a[id*='btnSave']", (function (e) {
        debugger
        var subLineId = e.target.id.toString().substr(7)
        //$("tr[data-pr-sublines ='prSubLine-" + subLineId + "']");
        var sURLSectionB = '@Url.Action("UpdatePRSubLine", "AJAXFunctions")';
        var returnedValue = "";
        var bError = false;
        var options = {
            url: sURLSectionB,
            data: {
                __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val(),
                PRSLID: subLineId,
                PRSLNumber: $("input[id*='PRSubLine_PRSubLineNumber']").val(),
                PRSLQty: $("input[id*='PRSubLine_PRSubLineQty']").val()
            },
            type: "POST",
            cache: false,
            async: false,
        };
         //alert(options.url);
        $.ajax(options).done(function (data) {
            debugger
            if (data != null) {
                if (data == "Good") {
                    returnedValue = data;
                }
                else {
                    bError = true;
                    alert("An Error has occurred.n" + data.toString());
                    returnedValue = "An Error has occurred.n" + data.toString();
                }
            }
            else {
                bError = true;
                alert("An Error has occurred.nIt was not possible to update the PR SubCLIN.");
                returnedValue = "An Error has occurred.nIt was not possible to update the PR SubCLIN.";
            }
        });
        debugger
        var test = bError;
        $("#PRSectionB").empty();
         //alert(returnedValue);
        var sURLSectionB = '@Url.Action("Edit", "PR")';
        alert(sURLSectionB);
        debugger
        var options = {
            url: sURLSectionB,
            type: "get",
            cache: false,
            async: false
        };
         //alert(options.url);
        $.ajax(options).done(function (data) {
            debugger
            $("#PRSectionB").replaceWith(data);
        });
        if (bError) {
            $("#LinesEdited").addClass("field-validation-error").text(returnedValue).show();
        }
        else {
            $("#LinesEdited").removeClass("field-validation-error").text("").hide();
        }
        return false;
     }));

The function runs through and finishes then immediately goes back to the debugger line right under the function declaration statement and runs through again.  The second time the values which I bolded and underlined here are left "undefined".  Which results
in bError being set to false.  Then when it get to the if block at the bottom the second time, it hides the element "LinesEdited" because it reports that bError is false.

This code is the on click event for a link tag.  (That is the reason for the "return false" line.  See thread,

http://forums.asp.net/p2010964/5786997.aspx?Re+Links+not+acting+like+standard+links+in+a+table)

Leave a Reply