Updating div with ajax/json within a modal dialog form fails at random

Question

I'm trying to update a div control (#test) with getJSON in a form displayed inside a modal dialog. The dialog is shown everytime a user clicks a defined link. Here is the function called:

// Displays modal dialog with a form
function job_description(job_id) {
    $('<div id="server-form"></div>').load('/description_form').dialog(
        {
            position: { 
                my: 'top top',
                at: 'top top',
                offset: '0 100',
                of: $('body')
            },
            width: 650,
            modal:true,
            resizable: false,
            title: 'Job description details',
            buttons: { 
                "close": {
                class: "btn btn-primary",
                text: "Close",
                click: 
                    function() {
                        $( this ).remove();
                    }
                }
            },
            close: function(event,ui) {
                $(this).remove();
            }
    });
    var response = $.ajax({
      type: 'GET',
      url: '/descriptions_list/'+job_id,
      cache: false,
      datatype: 'json',
      success: function(response){
               var obj = $.parseJSON(response); 
               //console.log(obj.description.title);
               $('#test').html(obj.description.title);
          },
      error: function(msg) {
                alert('error: '+msg);
      }
    });
}

I know the ajax call always works (I checked the console and I never get the alert), but the #test div does not get updated sometimes. It happens randomly. The load() method at the beginning calls a REST service which actually loads the form, and then ajax is used to pull some data from another url. The #test div is inside a bootstrap carousel also. Here is the div portion I'm trying to update:

<div id="wrapper">
<div id="description-editor" class="carousel slide" style="padding-left: 20%;padding-right: 20%">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <form>
      <div class="item well" style="height: 500px">
        <h3>Title</h3><br/>
        <div id="test" style="width: 300px; height: 200px">I should get updated...</div>
      </div>
      <div class="item well" style="height: 500px">
        <h3>Some other info</h3><br/>
        <p>To be completed</p>
      </div>
    </form>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#description-editor" data-slide="prev" data-interval="">&lsaquo;</a>
  <a class="carousel-control right" href="#description-editor" data-slide="next" data-interval="">&rsaquo;</a>
</div>
</div>

I'm pulling my hair out trying to figure out why the #test div does not ALWAYS get updated when the call is successful (which always is). I tried using async: false, but that didn't help either...I'm using the jquery 1.7.1.

Thanks.

Answer 1

I see 2 issues with your code:

1. As pointed out by Chris, the way you call jQuery load assumes it loads instantly (synchronously), which it doesn't. You need to implement .load() as per the jQuery docs and only proceed with the .dialog() and .ajax(), once the load has finished. I.e. by putting/triggering all that code in the "complete" callback param of load. Note, although .load() does implicitly set the content of your div asynchronously, the subsequent ajax call can still happen before the div has loaded.

2. You should not need to parse the .ajax() response into JSON when specifying the datatype as JSON. The .ajax() JQuery docs say:

success(data, textStatus, jqXHR) - The function gets passed three arguments: The data returned from the server, formatted according to the dataType parameter...

and

dataType - "json": Evaluates the response as JSON and returns a JavaScript object

I'd also implement the other parameters of success so you can see whether there is anything funny coming through in them when you see your error.