JQuery $.ajax "async: false" bug?

Question

Hi, I would appreciate your opinion/advice on the following

Scenario

HTML has PDF file nick name, back end has URL for each nick.

The link URL is always download.php?what=%PDF_Nick% to ensure download for JS disabled clients.

For JS enabled clients I do JQuery AJAX call and rewrite link URL from download.php?what=%PDF_Nick% to http://mysite.com/requestedPFF.pdf to activate download from the client. I set "async: false" to allow AJAX get new url.

Problem

AJAX returns valid script rewriting JS url variable, but location.href runs again to the initial url, creating extra back end call

Do you think it's related to the bug ignoring "async: false," definition or it's mistake I've made and missed to catch?

Thank you in advance

HTML code

    <a href="/download.php?what=PDF_A" onclick="javascript:download
    ('PDF_A')">Download</a>

JS code

function download ( what )  {

   var url = "download.php?what="+what;

   $.ajax({
      type: "GET",
      url: "download.php?ajax=true",
      data: "what=" + what
      async: false,
      dataType: "script"
  });

  // if AJAX got the download URL I expect actual download to start:
  location.href = url;
}

Back end (download.php) code

$myPDF = array();
$myPDF["PDF_A"] = "PDF_A.pdf";
....
$url = "http://mysite.com/" . $myPDF["PDF_A"];
...
if ( $_GET["ajax"] === "true" ) {
    // overwrite JS url variable
    print('url = "'.$url.'";');
} else {
    header("Location: ". $url );
    header("Connection: close");
}

Answer 1

Is there a reason you disable the asynchronous nature of the AJAX request? it will lock the browser until the request is completed. You are better off using a callback instead:

$.ajax({
  type: "GET",
  url: "download.php?ajax=true",
  data: "what=" + what,
  dataType: "script",
  success: function(msg) {
      location.href = url;
  }
});

Answer 2

Thanks for the prompt reply Eran. If I allow async run JS runs faster then round back and url does not manage to get the new value - that's the only reason I freeze the browser. I'm not 100% happy but didn't find better solution

Answer 3

Or you can use a synchron ajax call with .responseText like in this example:

var html = $.ajax({
  url: "some.php",
  async: false
}).responseText;

For your code this means:

function download ( what )  {
  var url = "download.php?what="+what;

  location.href = $.ajax({
       type: "GET",
       url: "download.php?ajax=true",
       data: "what=" + what
       async: false,
       dataType: "script"
  }).responseText;
}

Answer 4

You're encountering a scoping problem here. The URL variable in your JS code is declared as via the var keyword inside the scope of the download function. This means that only code inside the download function can modify that particular url value.

The script returned from the download.php is modifying the URL value in the global scope (on the browser, this is the "window" object), which is not the same value as the url inside the scope of the download function.

If you don't use the 'var' keyword on the declaration of the url variable, it will be created automatically in the global scope and your code will function as you expect.

I agree with the others, that your design is inherently flawed and should be revisited, however.

Answer 5

i try this

function IconTypes_load(id){

$.ajax({ async: "false", type: "GET", contentType: "application/json; charset=utf-8", dataType: "json", url: "/ajax/miejsce/iconTypesLoad.html?id=", success: function(jsonData) {

         $.each(jsonData, function(i,item){

          dIcons[item.id]= new Array(); 
       dIcons[item.id]['iconImage']= item.img; 

         });

         alert('ok');
         return 'ok';
     }
 });

return 'nie ok';

}

alert(IconTypes_load())

and result is alert 'nie ok' alert 'ok'

how its possible ? is realy big jquery bug ?