Hey,

My basic usage of this module is something like:

1) You're on a view which outputs lists of node type X
2) There's a button to add a new X
3) Clicking the button opens up the node form in a modal
4) You fill out the form and submit it

After submitting the form sucessfully and having the modal close, it would be great if the body content automatically updated based on the changes (like displaying my new node without having to refresh the page).

Popups API did this automatically. You just had to specify the div ID that wrapped the $content.

Is there any easy way to do this?

Thanks

CommentFileSizeAuthor
#6 ajax-loader.gif8.04 KBmstef

Comments

mstef’s picture

mstef commented

I figured out how to do this, although it's quite complicated.

If anyone is interested..let me know

markus_petrux’s picture

markus_petrux commented
Status: Active » Fixed

The Modal Frame Contrib Package contains a few modules that could be used as an example to refresh content on the parent page after the child form has been submitted and processed.

Anyway, it would also be nice if you could describe what you did in your case, which is related to Views, and nothing in the above mentioned package does it.

mstef’s picture

mstef commented

Which modules - because I didn't see one of them doing so. Most of them submit forms that only change things behind the scenes - unless I was missing something.

It's not exactly related to views - it will just reload the entire body via ajax after a submission. I'll paste it in here in a few..

markus_petrux’s picture

markus_petrux commented

See for example the updateElement() in the modalframe_cck_manage_fields module. The same technique is used by the modalframe_input_formats module. Both modules modify the DOM dynamically as a result of the operation performed with the child form.

Maybe this kind of tricks can help others than may find this issue from the search pages.

mstef’s picture

mstef commented

Oh I see.. I don't think I have a choice but to update the entire page because most these forms can change any number of elements on the page. Will post the solution once I fine-tune it.

mstef’s picture

mstef commented
StatusFileSize
new ajax-loader.gif8.04 KB

.js

Drupal.automodal = Drupal.automodal || {};

Drupal.automodal.onSubmitCallback = {
  myModule: function(args, statusMessages) {
    // Modal was just x'ed
    if (!args) {
      return;
    }
  
    // Cancel button was pressed
    // This was added custom for our module
    if (args.cancel) {
      return; 
    }
  
    // Overlay the page
    $('body').prepend('<div id="ajax-overlay"></div>');
    $('#ajax-overlay').css('width', $(document).width());
    $('#ajax-overlay').css('height', $(document).height());
    $('#ajax-overlay').css('background-position', '50% ' + (($(document).height() + $(document).scrollTop()) / 2) + 'px');
    
    // Reload the page inline
    $.ajax( {
      type: 'GET',
      url : Drupal.settings.basePath + Drupal.settings.myModule.refreshPath + '?modalupdate=1',
      cache : 'false',
      dataType : 'json',
        success : function(data) {
          $('body').html(data['content']);
          Drupal.attachBehaviors();
        },
      error : function() {
        location.reload();
      }
    });
  }
}

.module

/**
 * Implementation of hook_init()
 */
function mymodule_init() {
  // Determine if this is being requested by a modal for auto-update
  if ($_GET['modalupdate']) {
    // Generate the page content
    $page = theme('page', menu_execute_active_handler());
    
    // Extract just the <body>
    $body = array();
    preg_match('/(<body).*(<\/body>)/ism', $page, $body);
    $body = $body[0];
    
    // Take only what's inside the <body>
    $body = preg_replace('/(<body).*(">)/i', '', $body);
    $body = str_replace('</body>', '', $body);
    
    // Return the page in JSON
    drupal_json(array(
      'title' => drupal_get_title(),
      'messages' => theme('status_messages'),
      'content' => $body,
    ));
    
    exit;
  }
  
  jquery_ui_add(array('ui.resizable'));
  drupal_add_js(array('myModule' => array('refreshPath' => $_GET['q'])), 'setting');
  drupal_add_js(drupal_get_path('module', 'mymodule') . '/mymodule.js');
  drupal_add_css(drupal_get_path('module', 'jquery_ui') . '/jquery.ui/themes/base/ui.resizable.css');
}

.css

/* Ajax overlay */
#ajax-overlay {
  background: url("../images/ajax-loader.gif") no-repeat center center transparent;
  position: absolute;
  z-index: 2000; 
}

Attached is the overlay image (taken from popups.module)

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

broncomania’s picture

broncomania commented

Thx mikesteff for posting your .js file. This helps me a lot !!!