Approaching jQuery popup callback hell

Posted on by

I wrote this post on the jQuery mailing list and nobody replied, so I’m pasting it here. I could really use some advice.

I’m using a modal dialogs and I love them, but I haven’t found a really elegant way to handle actions in the dialog window that require changes to the parent page.

Here’s an example. I have a monthly calendar page that lists employee names on the days they are supposed to work. Clicking on an employee name opens a “shift detail” page in a modal dialog.

That shift detail page has more information like the specific tasks planned for the day, the start time and stop time of the shift, etc. From this shift detail screen, I can remove this particular employee from the schedule by submitting an AJAX POST from this popup.

After I remove the employee, I need to update both the popup window and the original page that hosted the link to the popup window. Right now I do this by adding a callback that fires when the AJAX POST succeeds. That callback then updates both pages. The callback is named “after_remove_employee”.

This system gets really nasty when I use the “shift detail” popup on different screens. For example, in addition to the monthly view, I also have a weekly view with more information. So after an employee is removed from the schedule on the weekly view, I need to do some different things in the callback.

Right now, the way I handle this is that I define the same callback twice. I define “var after_remove_employee = function (data) {…} on the weekly view to do what it needs there, and then I define it differently on the monthly view.

I’ve simplified the problem to help explain it. In reality, I have lots of different popups on lots of different pages, and in each popup, there are many different possible actions.

I’m sure I’m not the only one that’s been in this scenario. What is an elegant solution?

I’m thinking about using custom events. So, the callback after a successful AJAX POST would just fire an “employee removed” event, and everybody subscribed would get a reference to the event object and do whatever they want.

However, I’ve never used JS events before, and I don’t know if this is even possible.

Please, any feedback is welcome.

14 thoughts on “Approaching jQuery popup callback hell”

  1. I'm not very familiar with jQuery, but this feels like someplace that I would use something like Dojo's publish/subscribe setup, which is pretty much as you describe (party A publishes a signal, and all subscribed listeners are triggered). It can make debugging more challenging as there's no direct link from the publisher to the subscriber, and can be easy to screw up the timing if you've got multiple listeners that might affect each other, but if you keep your head about you, it's a really convenient and elegant way to solve this kind of problem.

  2. Hi Mike,

    Thanks for the feedback. All my instincts say I should use a pubsub
    system. I was just hoping to hear from some other people that have
    done this in JS that it does in fact work pretty well.

  7. Hi!

    Congratulations! Your readers have submitted and voted for your blog at The Daily Reviewer. We compiled an exclusive list of the Top 100 python Blogs, and we are glad to let you know that your blog was included! You can see it at http://thedailyreviewer.com/top/python

    You can claim your Top 100 Blogs Award here : http://thedailyreviewer.com/pages/badges/python

    P.S. This is a one-time notice to let you know your blog was included in one of our Top 100 Blog categories. You might get notices if you are listed in two or more categories.

    P.P.S. If for some reason you want your blog removed from our list, just send an email to [email protected] with the subject line “REMOVE” and the link to your blog in the body of the message.

    Cheers!

    Angelina Mizaki
    Selection Committee President
    The Daily Reviewer
    http://thedailyreviewer.com

  12. I was experiencing the same problem. I solved those problems by putting all anonymous functions used as callbacks in a namespace and now I'm only using the jQuery's bind function to work with events. Code like this:

    $('#myButton').click(function(){ alert('I was clicked') })

    was refactored to something like this:

    $('#myButton').bind('click',{'self':this},myButtonClickHandler);

    myButtonClickHandler = function(event)
    {
    var self = event.data.self; //very useful if you work with namespaces
    alert('I was clicked')
    }

    You may think it is a little verbose than the first approach, but the second one is much more reusable and maintainable than the first one,

    cheers!

Comments are closed.