CODEWITHSUNDEEP
javascriptjqueryhtmlajaxasp.net-mvc
InspectorGadget
InspectorGadget

Reputation: 87

ASP.NET MVC/jQuery/AJAX: link fails to work first time, but works second time (after page reloads)

Preface

For this question, I have a MVC partial view. The view has a section which displays a list of documents. Each document has a hyperlink: when clicked, the hyperlink takes the user to a second page view displaying additional information.

The link is inside an unordered list:

<a style="text-decoration:underline;" onclick="sendToDocketSearch('@currentDocument.DktYear','@currentDocument.DktSequence','@currentDocument.DktSubActionID');">@currentDocument.DktYear.ToString().PadLeft(2, '0') - @currentDocument.DktSequence.ToString().PadLeft(5, '0')</a>

When the user clicks the link, it takes them to a sendToDocketSearch javascript function (to prepare to search for the document):

var sendToDocketSearch = function (yearOfDocket, sequenceOfDocket, dktSubActionIDOfDocket) {
        jQuery.ajax({
            type: "POST",
            url: "@Url.Action("DocketSearchOnDemand")",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({ docketYear: yearOfDocket, 
                               docketSequence: sequenceOfDocket,
                               DktSubActionID: dktSubActionIDOfDocket,
                             userIsAuthorized: '@Model.userIsAuthorized' }),
            success: function (data) {
                alert(data);
            },
            failure: function (errMsg) {
                alert(errMsg);
            }
        });

        submitForm();
    }

Note that the page/view/form is submitted after the following controller method is run:

public ActionResult DocketSearchOnDemand(string docketYear, string docketSequence, decimal DktSubActionID, bool userIsAuthorized, PortalIndexView viewmodel)
    {
        System.Web.HttpContext.Current.Session.Add("userIsAuthorized", userIsAuthorized);

        string docketSearch = docketYear + "-" + docketSequence;
        System.Web.HttpContext.Current.Session["DocketSearchOnDemand"] = docketSearch;
        if (DktSubActionID > 0)
        {
            System.Web.HttpContext.Current.Session["DktSubActionID"] = DktSubActionID.ToString();
            System.Web.HttpContext.Current.Session["searchingCustomID"] = true;
        }
        else
        {
            System.Web.HttpContext.Current.Session["DktSubActionID"] = "1";
            System.Web.HttpContext.Current.Session["searchingCustomID"] = false;
        }

        return View(viewmodel);
    }

The above controller method runs; then, because the form is submitted, the HttpPost action for the page takes place. When running it on my local PC, the link is clicked and the next page is loaded without drama.

Problem

The problems start when I upload the code to the dev/test server. I don't know how to use breakpoints while troubleshooting an active website, so I follow along with the browser developer tool to monitor network traffic.

When clicking the link when running the website on my localserver, the process continues:

When I click the link on the site and it's on the server, the first click is completely ignored - network traffic shows that it tries to navigate to the controller via the javascript function above, but the failure happens so fast I can't even take a screenshot of it. The page reloads a second time at this point.

When I click on the same link a second time, it works without fail.

I believe the view/javascript/controller code works because it works the second time (and on subsequent attempts). It just flagrantly fails the first time on the server; after that, the user is fine. I'd like to prevent that "first-time" failure, however, and I'm wondering what the problem could be...

  1. Bad timing

I may be passing the information too early (or too late for my website/server to process it properly). The page does it correctly the second time, so maybe I'm just "jumping the gun" by not waiting a little longer for page-loading processes to sort themselves out. (Maybe I can fiddle around with the $(document).ready() javascript portion of the first page to "delay" allowing people to click a link.)

  1. Code error

I'll be glad to admit bad code if I'm genuinely messing something up. Maybe it's my javascript function, or maybe it's the code in my controller; at any rate, something is making the first pass of that function call be rejected. Maybe my code is bad because the problem doesn't happen the second time, and I'm getting a false sense of security (i.e. there are problems with my code that the system is willing to forgive after the page has thoroughly loaded).

  1. Server problem/miscellaneous

I'm wondering if I missed something when I uploaded my latest changes, or if I should have contacted my network team in case there are permissions that need to be activated for the site to work smoothly. I'm already in touch with them regarding something else, so I might take advantage of the opportunity today.

There is an alternative in place that could help me prevent this problem from happening, but I want to find out why the "first-time" failure happens. Other similar actions fail the first time on the site, and I'd like to apply the insights from fixing this issue to them.

Thank you for looking at this issue. Have a great day.

Upvotes: 2

Views: 1257

Answers (1)

user5103147
user5103147

Reputation: 221

Are you sure you want to call submitForm(); before your jQuery.ajax has finished? your ajax call is async so it will hit submitForm(); before it has had time to finish. should submitForm(); be in your success event instead?

Upvotes: 1

Related Questions