All geek questions in one place

Is there a way to prevent Internet Explorer from waiting for the AJAX request to complete before the link follows?

I have an html page that displays some basic account information and runs a long and poor jQuery AJAX request to get more details. While the Ajax request is running, the user can click the event button onclickto go to a new page with location.assign.

Unfortunately, if the button is pressed before the ajax request completes, nothing will happen until the ajax request completes. This is a problem with the server. I want the user to be able to move right away. FF and Chrome seem to be doing better, but since this is a corporate intranet application, this is actually not an option.

The following code is similar to the page in question:

<html>
    <head>
        <script src="/js/jquery-1.3.2.min.js" type="text/javascript"> </script>

        <script type="text/javascript">
<!--
    $(function () {
        jQuery.ajax({
            type: 'GET',
            url: '/long-running-partial-html-ajax-endpoint',
            success: function (result) {
                $('#detail').html(result); });
            },
            error: function (xmlHttpRequest, textStatus, errorThrown) {
                $('#detail').html('Failed to load additional information:<br />' + textStatus + '<br />' + errorThrown);
            }
        });
    });
//-->
        </script>
    </head>
    <body>
        <h2>Account Information</h2>
        <div>Some basic details here</div>
        <div><button onclick="location.assign(&quot;/somewhere-else&quot;)" type="button">Go somewhere else now</button></div>
        <div id="detail">
            <img src="/ajax-loading-animation.gif" alt="Loading ..." />
            Loading ...
        </div>
    </body>
</html>

Things I've already tried in the debugger (and not live):

  • using simple anchor, not using a button
  • using xhr.abort()beforelocation.assign
  • put alertaround location.assignto make sure code runs when expected

Comment:

  • IE stops the gif animation as soon as the button is clicked.
  • FF / Chrome should automatically abort ajax request when jQuery ajax event fires error

Has anyone encountered this problem before? Do you have permission that will make navigation more responsive?

+3
source share
2 answers

. ajax , , . , ajax .

, , , -.

, html :

<html>
    <head>
        <script src="/js/jquery-1.3.2.min.js" type="text/javascript"> </script>

        <script type="text/javascript">
<!--
    var detailRequest = null;

    function StartDetailRequest() {
        detailRequest = jQuery.ajax({
            type: 'GET',
            url: '<%= Url.Action("EnquiryDetail", "Account", new { requestGuid = ViewData["detailRequestGuid"] }) %>',
            success: function (result) {
                if (result.length == 0) {
                    setTimeout("StartDetailRequest()", 500);
                }
                else {
                    $('#detail').html(result);
                    $("table tbody").each(function () { $("tr:odd", this).addClass("odd"); });
                }
            },
            error: function (xmlHttpRequest, textStatus, errorThrown) {
                $('#detail').html('Failed to load additional information:<br />' + textStatus + '<br />' + errorThrown);
            }
        });
    }

    $(function () {
        setTimeout("StartDetailRequest()", 500);
    });
//-->
        </script>
    </head>
    <body>
        <h2>Account Information</h2>
        <div>Some basic details here</div>
        <div><button onclick="location.assign(&quot;/somewhere-else&quot;)" type="button">Go somewhere else now</button></div>
        <div id="detail">
            <img src="/ajax-loading-animation.gif" alt="Loading ..." />
            Loading ...
        </div>
    </body>
</html>

- (ASP.NET MVC 2 ):

private Dictionary<Guid, DetailRequestObject> detailRequestList = new Dictionary<Guid, DetailRequestObject>();

[AcceptVerbs(HttpVerbs.Get)]
public ActionResult Index(string id)
{
  var model = GetTheBasicDetails(id);
  var request = CreateDetailRequestObject(id);

  CheckForTimedOutDetailRequests();

  detailRequestList.Add(request.Guid, request);

  ViewData["detailRequestGuid"] = request.Guid;

  return View(model);
}

[AcceptVerbs(HttpVerbs.Get)]
public ActionResult EnquiryDetail(Guid requestGuid)
{
  DetailRequestObject detailRequest = detailRequestList[requestGuid];

  if (detailRequest == null)
  {
    throw new TimeoutException("Timed out retrieving details");
  }
  else if (!detailRequest.IsComplete)
  {
    return Content("");
  }
  else
  {
    var details = detailRequest.Response();

    return PartialView(details);
  }
}

DetailRequestObject , .

CheckForTimedOutDetailRequests, , , , "", .

, , Windows, , .., ...

0

ajax

  <body onload="myFunctionThatCallsAjax()">

Javascript HTML . onload , .

0

Source: https://habr.com/ru/post/1769133/

More articles:


All Articles