Question

I have some html to popup a jQuery UI modal:

<a href="my/url" class="popup">Click me</a>

With this javascript code:

$('.popup').click(function() {
    var a = this;

    var dialog = $('<div>').load($(a).attr('href'), function() {
        var form = dialog.find('form');

        dialog.dialog({
            modal: true,
            title: $(a).attr('title'),
            buttons: {
                Add : function () {
                    $.post($(form).attr('action'), $(form).serialize());
                    dialog.dialog('close');
                },
                Cancel: function () {
                    dialog.dialog('close');
                }
            }
        });

        if ($(a).attr('data-third')) {
            // Add here a button
        }
    });
    return false;
});

The idea is the resource in the modal contains a form, on submit of the modal the form is submitted. Now when <a href="my/url" class="popup" data-third="Add & new">Click me</a> exists, it means a third button is placed in the modal in this order: Cancel | Add | Add & new.

I tried this code:

if($(a).attr('data-third')) {
    var buttons = dialog.dialog('option', 'buttons');
    buttons[$(a).attr('data-third')] = function(){
        // Callback here
    }
    dialog.dialog('option', 'buttons', buttons);
}

I got a new button, but the order is Add & new | Cancel | Add. How can I make sure the order is Cancel | Add | Add & new?

Answer 1

With this code you should always get Cancel | Add | Add & new? (from left to right.

$('.popup').click(function() {
    var a = this;

    var dialog = $('<div>').load($(a).attr('href'), function() {
        var form = dialog.find('form');

        dialog.dialog({
            modal: true,
            title: $(a).attr('title'),
            buttons: {
                Cancel: function() {
                    dialog.dialog('close');
                },
                Add: function() {
                    $.post($(form).attr('action'), $(form).serialize());
                    dialog.dialog('close');
                }
            }
        });

        if ($(a).data('third')) {
            var buttons = dialog.dialog('option', 'buttons');
            console.log(buttons);
            buttons[$(a).data('third')] = function() {
                // Callback here
            }
            dialog.dialog('option', 'buttons', buttons);
        }
    });
    return false;
});

Fiddle here: http://jsfiddle.net/rqq2p/1/

Remember to use data() and not attrib() to get the attribute from the link!

EDIT – basically “buttons” is an object, and each property is one of the buttons. I think that the order in which the buttons appear is the order in which the properties are added. In my example Cancel is the leftmost button because it was the first added property and add & new it’s the rightmost because it was the latest. If you need to fiddle with the order you could create a new object and add the properties in the order you want:

    if ($(a).data('third')) {
        var buttons = dialog.dialog('option', 'buttons');
        var newButtons = {};
        newButtons[$(a).data('third')] = function() {
            // Callback here
        }
        newButtons['Cancel'] = buttons['Cancel'];
        newButtons['Add'] = buttons['Add'];
        dialog.dialog('option', 'buttons', newButtons);//now add & new should be the leftmost
    }