0

I'm using PHP/jQuery and have the following scenario:

I have a site (site1.php) with a link, which points to another site (site2.php), also I added to this link an ajax-onclick-event with jQuery which requests another site (ajaxcall.php). This other site has "a lot of work" to do, so it's not a short request.

My goal is: Set the request to ajaxcall.php in the background (asynchron) AND go immediately to site2.php. (I do not need an answer of ajaxcall.php)

My first implementation was like this:

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#link").on("click",function(){
            $.get('./ajaxcall.php');
    </script>
</head>
<body>
    <a href="./file2.php" id="link">link</a>
</body>
</html>

Obviously this won't work. Because the ajax-request (which is async), is aborted as soon as the page is changed.

So as far as I can see I have two possiblities here:

  1. Make the request synchron & show a loading indicator ($.ajax({url: './ajaxcall.php',async:false});)
    --> Disadvantage: file2.php will not open before the ajaxcall.php is done.

  2. Open a popup (window.open('ajaxcall.php')) and make a synchron-ajax-request / or something similar there and auto-close it after that --> Advantage: file2.php should open almost immediately --> (Big)Disadvantage: Popup

  3. ??? A better way ???

I hope you understood what I'm trying to accomplish and that you can help me :)

Blazemonger
  • 90,923
  • 26
  • 142
  • 180
OschtärEi
  • 2,255
  • 3
  • 20
  • 41
  • It's not clear to me WHY you want to open two files at once. How you solve this problem depends in part on what you want to happen. – Blazemonger Feb 14 '13 at 15:00
  • 1
    PHP has [`ignore_user_abort()`](http://www.php.net/manual/en/function.ignore-user-abort.php). Your `ajaxcall.php` script should run unaffected by a client loading a different page. – Tomalak Feb 14 '13 at 15:05
  • well the `ajaxcall.php` will generate a report via a reportserver (tomcat) which is than saved on the linux machine below - and I don't want to wait until this is done – OschtärEi Feb 14 '13 at 15:05
  • @Tomalak will try your answer (tomorrow :P) "together" with http://stackoverflow.com/questions/3833013/continue-php-execution-after-sending-http-response and post if it worked... – OschtärEi Feb 14 '13 at 15:13
  • 1
    The first call is not "aborted". The client can't abort a request that's already been made. – Reinstate Monica Cellio Feb 14 '13 at 15:18

3 Answers3

1

Try this code...

$(document).ready(function() {
    $("#link").on("click",function(e){
        e.preventDefault();
        var href = this.href;
        $.get('./ajaxcall.php', function() {
            window.location.href = href;
        });
    });
});

It stops execution of the link (with e.preventDefault()), gets the target url and then redirects the page to that location when the get request is complete.

Reinstate Monica Cellio
  • 25,975
  • 6
  • 51
  • 67
0

Well couldn't you just start the action within ajaxcall.php by passing a parameter to file2.php? So like:

file2.php?startBackgroundAction=true

file2.php:

if($_GET['startBackgroundAction']) {
   include 'ajaxCall.php' // with ignore_user_abort(true)
}
Simon
  • 7,182
  • 2
  • 26
  • 42
0

Latest chrome browser wont complete the ajax request. Since the browser page got new url request from the user, so browser will kill the thread immediately.

98% of times you can see that the ajax request got cancelled in a network tab.

So the solution is use sendBeacon API. This will perform a POST request asynchronously.
Google analytics uses this code to perform the event trackings (Ex: click).
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon

 navigator.sendBeacon("{{url}}", param);
balaphp
  • 1,306
  • 5
  • 20
  • 40