jquery multiple dialogs to return value to function that called it

Question

Hi,

I have a application with many dialogs and created a function to open a dialog and also load data into it, so other functions could open a dialog and process the users option.

The problem is when I call openDialog it stops the function that called it. I thought by adding a return value so when a button is clicked the calling function can process the users response.

function customer_crud(op)
{
var formData = $("#customer_details_form").serialize();
var debugData = formData.replace(/&/g,'<br />');

var text = "<p>Customer Function: " + op + "</p><p>" + debugData + "</p>";
if(openDialog('DEBUG', text)){
    alert("TRUE");
} else {
    alert("FALSE");
}

}

function openDialog(title, text) {

   var dialogOpts = {
    title: title,
    modal: true,
    autoOpen: false,
    buttons: {
              "Delete all items": function() {
                $( this ).dialog( "close" );
                return true;
            },
            Cancel: function() {
                $( this ).dialog( "close" );
                return false
            }
    }

    };

    $("#dialog").dialog(dialogOpts);

    $("#dialog").html(text).dialog('open');

}

The above code opens the dialog but throws false before anything is selected. If someone could please help me or sugguest a better way I would be greatful.

I plan to pass dialogOpts to the function but placed it in there for testing.

Thanks

Answer 1

There is no return value in your openDialog function. Thats why you will always get False.

Answer 2

You can't really have a dialog like this, since it's not synchronous/blocking, a better approach would be to call the desired method when you click the dialog button, like this:

function customer_crud(op)
{
  var formData = $("#customer_details_form").serialize();
  var debugData = formData.replace(/&/g,'<br />');

  var text = "<p>Customer Function: " + op + "</p><p>" + debugData + "</p>";
  openDialog('DEBUG', text);
}

function delete_items() {
  alert("Deleting!");
}

function openDialog(title, text) {
  var dialogOpts = {
    title: title,
    modal: true,
    autoOpen: false,
    buttons: {
      "Delete all items": function() {
        $(this).dialog("close");
        delete_items();
      },
      Cancel: function() {
        $(this).dialog("close");
      }
    }
  };
  $("#dialog").dialog(dialogOpts)
             .html(text).dialog('open');
}

Answer 3

I have a single dialog that can be called from multiple buttons. Only one step in the process changes depending on which button is pushed. The result of the dialog goes into a different field depending on the button. So, I set a variable in the click function before calling the dialog. Then, in my dialog, I have a switch statement which checks the variable and adds the value to the appropriate field. You could similarly use a switch statement to do the different functionality depending on which dialog you're calling.

function openDialog(title, text) {
  var dialogOpts = {
    title: title,
    modal: true,
    autoOpen: false,
    buttons: {
      "Delete all items": function() {
        switch (item_type) {
                                    case "primary":
                                        ...
                                        break;
                                    case "insurance":
                                        ...
                                        break;
                                    case "safety":
                                        ...
                                        break;
                                    case "sales":
                                        ...
                                        break;
                                }
                                $(this).dialog('close');
      },
      Cancel: function() {
        $(this).dialog("close");
      }
    }
  };
  $("#dialog").dialog(dialogOpts)
             .html(text).dialog('open');
}