How to — callback functions

Question

Hi guys.

I have a big problem writing a small piece of code using JS/jQuery (don't know which of these is causing the problem). Anyhow, here we go:

$('#themePicker').unbind().click(function() {
    var t = $(this); 
    modalwindow2(t, function() {
     console.log(1);
    }, function(w) {
     console.log(w);
    });

    return false;
});

and the function itself:

function modalwindow2(w, callbackOnSHow, callbackOnHide) {
    if (typeof(callbackOnSHow) == 'function') {
        callbackOnSHow.call();
    }

    // do some stuff //
    $('form').submit(function() {
        ajaxSubmit(function(data) {
            if (typeof(callbackOnHide) == 'function') {
                console.log('---------------');
                console.log(data);
                console.log('---------------');
                callbackOnHide.call(data);
            }
        });

        return false
    });
}

The function is called modalwindow2 and I want to call a function when the modal is shown and another function when the modal will be hidden.

The first is not a problem.

The second… Well… Let's just say it's a problem. Why?

I want a parameter sent to the second function. The paramenter is an ajax response, similar to other jQuery stuff (ajax action, sortable, etc).

I hope I made myself clear enough.

Thanks!

Edit:

I'm using jQuery 1.1.2 (or 1.1.3) and upgrading or using jQuery UI is NOT a solution. I have some dependencies (interface is one of them) and i don't have enough time (nor motivation) to upgrade to 1.3 & UI 1.7.

Answer 1

I understand what you are trying to do, but you will need to store the newly created window so that you can access it on the close callback function.

You might want to look at jQuery UI Dialog. It provides some really basic functionality for dialog windows (modal and otherwise) and handles some of the callback implementation.

Answer 2

I noticed that you have a typo on .submit: $('form').submti(function(){

Was that just an entry error to SO?

EDIT: Ok, so after looking at your code and doing a short test, I've come up with this (pardon the pun):

function modalwindow2(w, callbackOnShow, callbackOnHide) {
 if(typeof callbackOnShow == 'function') {
  callbackOnShow.call();
 }
 $('form').submit(function() {
  if(typeof callbackOnHide == 'function') {
   callbackOnHide.call(this, "second");
  }
 });
}

$(document).ready(function (){
 $('#themePicker').click(function(){
  var t=$(this);
  modalwindow2(t, function() { alert("first"); }, function(x) { alert(x); });
  return false;
 });
});

It looks like you may have just been missing the "this" in your call() statement. Try using callbackOnHide.call(this, data);

Let me know if that works any better!