jquery - problem with synchronize ajax and dialogbox in function

Question

Hello, I have problem with synchronizing results of function I get with AJAX with that function. The idea is that I send AJAX request, then after reciving answer I open dialogbox, and after user confirmation function returns proper value. Problem is that my function (even if I set ajax request not to be async) doesn't wait for response and returns value before catching user action. Here is a code:

checkColisions = function(event) {
        var parsedStart = Date.parse(event.start);
        var parsedEnd = Date.parse(event.end);
        var returnValue = true;

        returnValue = $.ajax({
          async: false,
          url: '<?php echo url_for('lecture/ajaxCheckColisions')?>',
          data: ({id: event.eid, name:event.title, start: parsedStart, end: parsedEnd}),
          success: function(data) {
              if(data == 'no-colisions')
              {
                  returnValue = false; //do nothing
              }
              else
              {
                  $("#dialog-colisions").dialog({
                        resizable: false,
                        open: function() {
                            $('#dialog-colisions').text()
                            $('#dialog-colisions').append('<p>Found colisions:</p>');
                            $('#dialog-colisions').append(data);
                        },
                        height:300,
                        modal: true,
                        buttons: {
                            'Continue': function(){                                    
                                $(this).dialog('close');
                                returnValue = false;
                            },
                            'Cancel': function() {
                                $(this).dialog('close');
                                returnValue = true;
                            }
                        }

                  });
              }
          },
          error: function(data) {
          alert('error' +data);
          }
        });
        return returnValue;
    };

enter code here

returnValue should be set by dialogbox, but it's not. Do you have any idea?

Answer 1

You shouldn't try to "block" a thread within your browser. A better solution is to open the dialog and trigger the adequate action from the callbacks that jquery is providing to you.

You are now having something like

var returnValue= checkColisions(e);//go to server and open a popup
if(returnValue==true){
 doCollistionStuff(); 
}else{
 noCollitionDetected();
}

My suggestion is to change the dialog to something like:

$("#dialog-colisions").dialog({
                        resizable: false,
                        open: function() {
                            $('#dialog-colisions').text()
                            $('#dialog-colisions').append('<p>Found colisions:</p>');
                            $('#dialog-colisions').append(data);
                        },
                        height:300,
                        modal: true,
                        buttons: {
                            'Continue': function(){                                    
                               doCollistionStuff();
                            },
                            'Cancel': function() {
                               noCollitionDetected();
                            }
                        }

                  });