0

I have a problem that is causing the dropdown and browser to lock until the ajax request is served. I know that ASYNC should be set to False for JSON Ajax requests, so I appreciate if somebody could help me modify the code to prevent locking the dropdown and the page until the Ajax request is received.

You can check it here:

http://bit.ly/16QN1lA

I've added 5 sec. sleep to data.php file to make the problem more obvious.

S. S.
  • 47
  • 2
  • 6
  • Why does it have to be set to false? In fact, that feature of jQuery has been deprecated: http://stackoverflow.com/questions/11448011/jquery-ajax-methods-async-option-deprecated-what-now – musical_coder Oct 31 '13 at 22:36
  • If I set it to true, I get this message: Uncaught SyntaxError: Unexpected token u Here's the same page with Async set to true http://bit.ly/1aJRYiC – S. S. Oct 31 '13 at 22:39
  • @musical_coder According to the site, `async:false` is only deprecated when using the deferred API of jqXHR. If you're using the old callbacks instead of the promise, you can continue to use synchronous AJAX in jQuery. – Joe Enos Oct 31 '13 at 22:53
  • @JoeEnos: interesting, thanks for pointing that out. But I think it's good to always go asynchronous unless synchronous is absolutely necessary for it to work. As my answer shows below, that's not true in this case. – musical_coder Oct 31 '13 at 22:57
  • @musical_coder I agree 100% - I've never found a scenario that truly requires synchronous. Sometimes synchronous is easier to write, but easier isn't always better of course. – Joe Enos Oct 31 '13 at 22:58

3 Answers3

0

let me just suggest a different method of doing this.

$.get(url, function(res){
 data = JSON.parse(res);
 $(data).each(function(k,v){ 
  $('#makes').append( html )
 }
}
uptownhr
  • 662
  • 6
  • 15
0

The reason you're getting an error with the asynchronous AJAX is that the function immediately returns, which is well before you get a response from the server. So you're calling JSON.parse() on garbage data, which is causing the error you're seeing.

The solution is to make the parsing happen after you get a response from the server:

if(year !=""){
    //Get vehicle json and store into vehicles_json
    getJson(
        js_base_url,
        function(makes_json) {
             //Set makes equal to makes dropdown
            var makes = $("#make");
            //empty dropdown
            makes.empty();

            var makes_array = [];
            //loop through makes_json json
            $.each(makes_json, function() {
                    makes_array.push('<option value="', this.model_make_display, '">', this.model_make_display, '</option>');
            });
            makes.html(makes_array.join(''));
         }
    );
}

function getJson(url, callBack) {
  $.ajax({
     type: 'GET',
     url: url,
     dataType: 'json',
     global: false,
     success: function(json_response) {
         callBack(json_response);
     }
 });
}
musical_coder
  • 3,886
  • 3
  • 15
  • 18
  • This works, but this way I'll have to create a function for each which doesn't looks good. Any way to return back an array instead of looping within the function itself? – S. S. Nov 01 '13 at 10:24
  • No, because like I said above, you can't return from the function before you've gotten a response from the server. Not sure what you mean by "doesn't look good"; do you mean you don't want to duplicate the `ajax()` call? In that case, make it so that you only call `ajax()` from a single function, to which you pass your callback function. Changed my code to show how to do it in this case. – musical_coder Nov 01 '13 at 16:07
0

I decided to use the jQuery $.getJSON and it's working without locking the browser.

$.getJSON( "test.php", function( json ) {
  console.log( "JSON Data: " + json);
 });

http://api.jquery.com/jQuery.getJSON/

S. S.
  • 47
  • 2
  • 6