jquery append behaving strangely in jquery dialog

Question

I have a jquery dialog in which I display a form. The form has a "picture_fields" div in it that I append new fields to if the user clicks on "Add More Pictures", i.e. the form displays with one "Picture" file-field, but the users can add more be clicking the "Add More Pictures" link.

This all works great the first time the dialog with the form in it is displayed, but if you close the dialog, and then re-open it, the append doesn't work anymore. You can click on the link, but no file field is being added. I debugged it and it is calling the correct function, including the append, but it just doesn't append it as I was expecting.

This is my (dumbed down) function that handles the "Add More Pictures" click:

/**
* Add Picture Field Fuctionality
*/
    $('form a.add_child').live('click', function() {
        $("#picture_fields").append('<p> File Field Here </p>');
        return false;
    });

This is my dialog handler:

/**
* New Object Button opening modal Dialog
*/
    $('.dialog_form_link').live('click', function() {
        var $dialog = $('<div></div>')
            .appendTo('body')
            .load($(this).attr('href') + ' .entry_form')
            .dialog({
                title: $(this).text(),
                modal: true,
                autoOpen: false,
            show: {effect: 'blind'},
            hide: {effect: 'blind'},
        });

    $dialog.dialog('open');

    // prevent the default action, e.g., following a link
    return false;
    });
});

The user clicks on the "New Object" button (with class "dialog_form_link") which opens the New Object Form into the jquery dialog. In this dialog he then clicks "Add Pictures" link (with class "add_child"). Works great the first time you open the dialog, never works after that. It only starts working again AFTER I reload the whole webpage, but again only once.

Cheers, Mark.

==UPDATE== I tried to add a close option like suggested:

$('.dialog_form_link').live('click', function() {
    var $dialog = $('<div></div>')
        .appendTo('body')
        .load($(this).attr('href') + ' .entry_form')
        .dialog({
            title: $(this).text(),
            modal: true,
        autoOpen: false,
            width: 900,
            height: '900',
            position: 'center',
            show: {effect: 'fade', duration: 300},
            hide: {effect: 'blind', duration: 500},
            close: function(ev, ui) { $(this).destroy(); alert("Closed"); }
        });

I also tried with close: function(ev, ui) { $(this).close(); }. Both of these get called on close of the dialog (I hit the X and see the alert) BUT after this I cannot open the dialog anymore. I get the grey overlay but no dialog. I believe this is a common beginners mistake (and boy am I!) with jquery dialogs not being initialized properly so maybe I am doing something completely wrong here? I believe the autoOpen option has something to do with this too, so I enabled and disabled that, with close and destroy, but again, no dice. I'm gonna have a look at this answer, but in the mean time, if anybody has any other suggestions, I will greatly appreciate it.

Answer 1

A rough guess - I know other people have had problems with jQuery UI dialogs not being withing the Form tag. I think when you call the dialog() fn it can lead to the whole DIV being moved outside of the form tag. That would then mean that your selector form a.add_child would not work because a.add_child might not be within the form anymore.

See this answer for code to put the dialog div back in the right place.

Answer 2

Could you make the Add Picture link a dialog button instead? I have a dialog where I do some stuff and then append options to a select list. It works for me.

                buttons:
                {
                    'Add': function () {
                        ... 
                        $("#picture_fields").append('<p> File Field Here </p>');

                    },
                    'Cancel': function () {
                        $(this).dialog('close');
                        }
                }

Answer 3

Alright, I figured it out ...

I added a function to the close option that actually removes the DIV that the dialog is attached to, like so:

close: function(ev, ui) { $('div.dialog').remove(); }

I actually think I am not really doing this 100% right (do I have to attach the dialog to a DIV?), but this works, so I am sticking with it till I get more proficient :-)

Final code:

    $('.dialog_form_link').live('click', function() {
        var $dialog = $('<div class="dialog"></div>')
            .appendTo('body')
            .load($(this).attr('href') + ' .entry_form')
            .dialog({
                title: $(this).text(),
                modal: true,
//              autoOpen: false,
                width: 900,
                height: '900',
                position: 'center',
                show: {effect: 'fade', duration: 300},
                hide: {effect: 'blind', duration: 500},
                close: function(ev, ui) { $('div.dialog').remove(); }
            });

//      $dialog.dialog('open');

        // prevent the default action, e.g., following a link
        return false;
    });

Note that I also opted for the autoOpen feature instead cause that is really what I want in this case.