open modal from iframe [#954346]

Hi there,
I try to open a modal from within an iframe.

with this:

...
<a href="#" onclick="parent.Drupal.open_upload_modal();" title="Save changes and continue">Open node add form</a>

How could I call the function "Drupal.modalFrame.open(modalOptions);"

I try to use a js file like that :

...
// $Id: automodal_upload.js,v 1.1.2.7 2009/12/28 02:21:20  Exp $

(function ($) {

Drupal.behaviors.automodalupload = function() {
 // $('.modalframe-example-child:not(.modalframe-example-processed)').addClass('modalframe-example-processed').click(function() {
    var element = this;
    // This is our onSubmit callback that will be called from the child window
    // when it is requested by a call to modalframe_close_dialog() performed
    // from server-side submit handlers.
    function onSubmitCallbackExample(args, statusMessages) {
      // Display status messages generated during submit processing.
      if (statusMessages) {
        $('.modalframe-example-messages').hide().html(statusMessages).show('slow');
      }

      if (args && args.message) {
        // Provide a simple feedback alert deferred a little.
        setTimeout(function() { alert(args.message); }, 500);
      }
    }

    // Hide the messages are before opening a new dialog.
    $('.modalframe-example-messages').hide('fast');

  //});
};

Drupal.open_upload_modal = function(){

pathArray = location.pathname.split('/');
var path = location.host + '/node/add/upload?gids[]=' + pathArray[3];

    // Build modal frame options.
    var modalOptions = {
      url: $(path).attr('href'),
      autoFit: true,
      onSubmit: onSubmitCallbackExample
    };

    // Try to obtain the dialog size from the className of the element.
    var regExp = /^.*modalframe-example-size\[\s*([0-9]*\s*,\s*[0-9]*)\s*\].*$/;
    if (typeof element.className == 'string' && regExp.test(element.className)) {
      var size = element.className.replace(regExp, '$1').split(',');
      modalOptions.width = parseInt(size[0].replace(/ /g, ''));
      modalOptions.height = parseInt(size[1].replace(/ /g, ''));
    }

    // Open the modal frame dialog.
    Drupal.modalFrame.open(modalOptions);

    // Prevent default action of the link click event.
    //return false;

};


})(jQuery);

the "Drupal.open_upload_modal()" is called, but the modal isn't opening.. what I have to change?

Thanks Apfl007

Comments

Comment #1

markus_petrux commented 27 October 2010 at 12:12

Category:

task

» support

Try loading the javascript files in the iframe, and then invoke those.

jQuery does not work well crossing frames. It is best to invoke each method from its own DOM namespace.

ie. try making it work as if your page was not on a iframe.

This is bad:

<a href="#" onclick="parent.Drupal.open_upload_modal();" title="Save changes and continue">Open node add form</a>

This is better:

<a href="#" onclick="Drupal.open_upload_modal();" title="Save changes and continue">Open node add form</a>

Comment #2

Apfel007 commented 27 October 2010 at 16:35

hi markus,
thanx for your help. It got a modal, but something is missing - it's not closing.. child.js is loaded, parent.js is loaded.. what could be the cause? It seems that the submit handler isnot loaded..

...
// $Id: modalupload.module,v 1.1.2.3 2009/06/17 12:55:55 Exp $

/**
 * opens node/add/upload in modal
 * @file
 */

function modalupload_init() {  
  if (!empty($_COOKIE['has_js'])) {
    $types = node_get_types();
    if (array_key_exists('upload', $types )){
      if (preg_match("/diary/", $_GET['q'], $match)){
        modalupload_upload_add_js();
        modalframe_parent_js();
      }
    }
  }
}

function modalupload_upload_add_js() {
  global $base_url;
  global $language;
  $lang = $language->language;
  $gid = arg(1);
  drupal_add_js(array('modalupload' => array(
  'url' => $base_url.'/'. $lang,
  'gid' => $gid,
   )), 'setting');
  drupal_add_js(drupal_get_path('module', 'modalupload') .'/modalupload.js');
  drupal_add_js($js_variables, 'setting');
}


/**
 * Implementation of hook_form_alter().
 */
function modalupload_form_alter(&$form, $form_state, $form_id) {
  if ($form_id == 'upload_node_form') { 
    $form['#submit'][] = 'modalupload_form_submit';
    if (!empty($_COOKIE['has_js'])) {
      modalframe_child_js();
    }
  }
}
              
function modalupload_form_submit($form, &$form_state) {
    modalframe_close_dialog();
}

// $Id: modalupload.js,v 1.1.2.7 2009/12/28 02:21:20  Exp $

(function ($) {

Drupal.behaviors.modalupload = function() {
   $('a[href="/node/add/upload"]:not(.modal-upload-processed)').addClass('modal-upload-processed')
 
};

Drupal.open_upload_modal = function(){
   // This is our onSubmit callback that will be called from the child window
    // when it is requested by a call to modalframe_close_dialog() performed
    // from server-side submit handlers.
    function onSubmitCallback(args, statusMessages) {
      // Display status messages generated during submit processing.
      if (statusMessages) {
        $('.modalframe-messages').hide().html(statusMessages).show('slow');
      }

      if (args && args.message) {
        // Provide a simple feedback alert deferred a little.
        setTimeout(function() { alert(args.message); }, 500);
      }
    }

    // Hide the messages are before opening a new dialog.
    $('.modalframe-example-messages').hide('fast');

    var url = Drupal.settings.modalupload.url + '/node/add/upload?gids[]=' + Drupal.settings.modalupload.gid;

    // Build modal frame options.
    var modalOptions = {
      url: url,
      autoFit: true,
      //onSubmit: onSubmitCallback
    };

    // Open the modal frame dialog.
    Drupal.modalFrame.open(modalOptions);

    // Prevent default action of the link click event.
    return false;
};
})(jQuery);

Comment #3

markus_petrux commented 27 October 2010 at 18:48

Attach your submit handler to $form['buttons']['#submit'] rather than $form['#submit']. The node edit form is a bit more complex than other forms. See node_form_submit_build_node() and how it is used in node.pages.inc.

$js_variables seems to be undefined.