Drupal CCK Fields and JQuery Dialog

Question

Right now I have a Drupal site where I'm integrating a custom front-end interface for creating a certain type of node. This custom 'interface' area is being embedded at the top of the node-creation page.

The CCK fields for the node are grouped together using the Fieldgroup module which is wrapping them into a . I am using the following code to pull the Fieldgroup into a JQuery dialog when the user presses a button:

var options = {
    dialogClass: 'customDialog',
    autoOpen: false,
    draggable: false,
    modal: true,
    resizable: false,
    height: 'auto',
    width: 'auto',
    title: 'Configure Options',
    show: 'fade',
    hide: 'fade',
    buttons: {
            'Update': function(){               
                $(this).dialog('close');
        }
    }
 };

// open windows
$("#inputButton").click(function() {
    var dlg = $('.group_input').dialog(options);
    dlg.css('min-width', '500px').css('max-height', '300px');
    dlg.dialog('open'); 
});

Everything works a-OK and loads up in the dialog; however, when the user presses the 'Update' button to close the dialog, the CCK fields are not being updated with the new values.

The same thing happens if I load a single field into the dialog, so I know it's not a Fieldgroup module issue. I have searched for days trying to resolve this issue, and it seems no one else has come across this problem. Any input would be much appreciated.

EDIT: I have a solution and will post it once the 8 hour restriction passes :(

Garrett Garrett · Accepted Answer · 2012-04-05T02:47:36

OK, so I finally figured it out. For anyone interested in loading a node's CCK fields into a JQuery dialog, it will only update the form values if you append the dialog's elements back to the form. This appears to happen because the JQuery dialog actually destroys the loaded content when it is closed.

The correct implementation is as follows:

var options = {
    dialogClass: 'customDialog',
    autoOpen: false,
    draggable: false,
    modal: true,
    resizable: false,
    height: 'auto',
    width: 'auto',
    title: 'Configure Options',
    show: 'fade',
    hide: 'fade',
    buttons: {
      'Update': function(){               
         $(this).dialog('close');
      }
    },
    **close: function(event, ui){
       $('#the-form-name').append($(this));
    }**
 };

// open windows
$("#inputButton").click(function() {
    var dlg = $('.group_input').dialog(options);
    dlg.css('min-width', '500px').css('max-height', '300px');
    dlg.dialog('open'); 
});

I hope this helps someone stuck with the same issue!

Drupal CCK Fields and JQuery Dialog

1 Answers