Jquery: Passing a function to a function which isnt required

Question

So I have a function that submits things through AJAX and then displays a dialog if it was successful or not. All works fine, but then I want the option of passing that dialog function an extra function (optional) which will carry out extra functions. Here's what I have:

// the work
if (data._response.success == 'true') {
  $("#suppliers_grid").trigger("reloadGrid");
  $('#manage-suppliers-form').fullFormReset();
  alertDialog('Supplier '+ action +' successfully!','Success',$('#manage-suppliers-form :input:visible:first').focus());
} else {
  alertDialog('Supplier was not '+ action +' successfully!<br />Please try again or report this to the administrator.','Error','ui-state-error');
}

// the alertDialog function
function alertDialog(message,title,cssClass,closeFunction) {
  title = typeof title !== 'undefined' ? title : 'Notice';
  cssClass = typeof cssClass !== 'undefined' ? cssClass : 'ui-state-highlight';
  if (cssClass=='ui-state-error') {
    icon = 'ui-icon-alert';
  }
  else {
    icon = 'ui-icon-info';
  }

  var dialog = $('<div><p><span class="ui-icon '+ icon +'"></span>'+ message +'</p></div>');
  dialog.dialog({
      modal: true,
      title: title,
      buttons: {
        Ok: function() { $(this).dialog("close");   }
      },
      close: closeFunction()
  });   
}

1) The above doesn't work if I pass a closeFunction

2) Haven't even tested it -without- passing it something, but I'm sure it wouldn't work either. closeFunction should be OPTIONAL

3) I cant simply put the 'focus' line of code after the alertDialog call. Even though this works (gets focus in the background). As soon as someone clicks "ok" on the alertDialog, the focus is lost - so needs to be called on the close of the alertDialog.

Answer 1

Try

// the work
if (data._response.success == 'true') {
    $("#suppliers_grid").trigger("reloadGrid");
    $('#manage-suppliers-form').fullFormReset();
    //Pass the function as the fourth parameter and create a annonymous function to set the focus
    alertDialog('Supplier '+ action +' successfully!', 'Success', '', function(){
        $('#manage-suppliers-form :input:visible:first').focus();
    });
} else {
    alertDialog('Supplier was not '+ action +' successfully!<br />Please try again or report this to the administrator.','Error','ui-state-error');
}

// the alertDialog function
function alertDialog(message,title,cssClass,closeFunction) {
    title = typeof title !== 'undefined' ? title : 'Notice';
    cssClass = typeof cssClass !== 'undefined' ? cssClass : 'ui-state-highlight';
    if (cssClass=='ui-state-error') {
        icon = 'ui-icon-alert';
    }
    else {
        icon = 'ui-icon-info';
    }

    var dialog = $('<div><p><span class="ui-icon '+ icon +'"></span>'+ message +'</p></div>');
    dialog.dialog({
        modal: true,
        title: title,
        buttons: {
            Ok: function() { $(this).dialog("close");   }
        },
        close: closeFunction //assign the function reference instead of the return value of the function
    });   
}

Answer 2

First of all, whatever you mentioned in your question (Passing a function to a function) is called as "callback" function in the Javascript programming world.

Btw, to answer your question, I guess you need to bind the close event callback function that gets called when you close the dialog as follows:

    var that = this;
    dialog.dialog({
        close: function( event, ui ) {
            if(closeFunction && typeof closeFunction === 'function') {
                closeFunction.call(that);
            }
    }});

Inside the closeFunction, try to do the focus() for the element required.

Try to read this! to get a better understanding on the close event callback usage.

If you still dont get a proper solution from my answer, please post a fiddle or give a better understanding of the problem your facing!