JQuery UI before dialog opens

Question

I have a very simple dialog box

<script>
$(function() {
   $( "#openDialog").on("click", function(){ 
       $( "#dialog-modal" ).dialog({
          height: 300,
          width: 600,
          modal: true,
          buttons: {
              Cancel: function() {
              $( this ).dialog( "close" );
              }
              }
        });
       $( "#dialog-modal" ).show();
    });
 });
</script>

I am populating this dialog with a HTML table that has information passed into it from a Java method. I can get this working when the page is loaded but i want the information to load with the user opens the dialog box.

I have checked the API of jquery ui and the dialog has a beforeClose function but no beforeOpen function. What would be the best way of doing this? I have tried callbacks when the user opens the dialog box ( on the .show ) but i cannot get this working

<script>
$(function() {
   $( "#openDialog").on("click", function(){ 
       $( "#dialog-modal" ).dialog({
          height: 300,
          width: 600,
          modal: true,
          buttons: {
              Cancel: function() {
              $( this ).dialog( "close" );
              }
              }
        });
       $( "#dialog-modal" ).show(function(
            JavaClass.javaMethod();
          ));
    });
 });
</script>

Try the open event: http://api.jqueryui.com/dialog/#event-open — Mark Rijsmus, May 12 '14 at 10:22
this triggers it when the dialog is opened do, i need the Java call before the dialog is opened and i do not want the dialog to open until the Java call is finished — Hip Hip Array, May 12 '14 at 10:35
check if this helps. http://stackoverflow.com/questions/3837166/jquery-load-modal-dialog-contents-via-ajax — Arun Unnikrishnan, May 12 '14 at 12:02

score 0 · Answer 1 · answered May 12 '14 at 15:39

Why not just

<script>
$(function() {
   $( "#openDialog").on("click", function(){ 
       if (shouldOpenDialog()){ // Do what you must do here 
         $( "#dialog-modal" ).dialog({
            height: 300,
            width: 600,
            modal: true,
            buttons: {
                Cancel: function() {
                $( this ).dialog( "close" );
                }
                }
          });
         $( "#dialog-modal" ).show();
       }
    });
 });
</script>

EDIT: Or, if your verification is asynchronous,

<script>
$(function() {
   $( "#openDialog").on("click", function(){ 
       if (shouldOpenDialog(function() { // Do what you must do here 
         $( "#dialog-modal" ).dialog({
            height: 300,
            width: 600,
            modal: true,
            buttons: {
                Cancel: function() {
                $( this ).dialog( "close" );
                }
                }
          });
         $( "#dialog-modal" ).show();
       });
    });
 });
</script>

having

function shouldOpenDialog(callback) {
   asyncCall(onComplete: function(o){
       if (o.ok) 
          callback();
   });
}

JQuery UI before dialog opens

1 Answers1