close modal on form submit

+100 on this, after submitting a new node, the modal window stays opens, and loads the newly created node.

I'm also stil trying to get my head around the modalframe api, which i agree, is an AWESOME module, finaly a way to REALY get node add forms into modal windows, no matter how complex.

I found out how to go about doing this omjn.

modalframe_close_dialog() is a server-side function, so you have to use it within your module, not in the js file, do read the README on modalframe module, and read the example module provided, tons of documentation there.

Basicaly, in order to close the form upon submit, you have to provide a helper module, and implement hook_form_alter to add your own submit function to it:
$form['#submit'][] = 'mymodule_form_submit';

Then, in that function:

function mymodule_form_submit($form, &$form_state) {
  if ($form_state['values']['op'] == t('Save')) {
    // Tell the parent window to close the modal frame dialog.
    modalframe_close_dialog();
  }
}

Even then, automodal will not handle displaying a message to the user, so I ended up implementing the api myself in a module, to handle the whole deal.

I'm not even sure this module could handle this type of situation, but who knows, Crell is surprisingly good!

+100 more to this!!!

For us who don´t know how to create a module, I´ve solved the issue by simply creating a node with the phrase: "Thank you, your form has been submitted, you can close this window using the upper close button" and themed it to show only the node content without headers, footer and sidebars, called it "page-node-{nid}.tpl" and then created a rule to redirect people there after submitting the form.
I´s not as cool as to close automatically, but it works.

Ok, I´ve discovered that my pseudosolution just sucks. I mean, you have to provide a special tpls and rules, and that just sucks.

I´m no programmer, so I´m really quite lost here.
Is there a way to get it done without creating a new module? I mean, it would be nice that after you save the node, the modal box would close and the page wold display some message to the user.

Hope someone can help me out (and all other non-programmers like myself :).
Thanks in advance!
Rosamunda

I tried this. But I guess it's not working for user register forms?

automodal_close.info:

; $Id$
name = "Automodal Close"
description = "Closes Automodals on Form Submit"
core = 6.x
package = User Interface

automodal_close.module:

<?php

function automodal_close_form_alter(&$form, $form_state, $form_id) {
$form['#submit'][] = 'automodal_close_form_submit';
}

function automodal_close_form_submit($form, &$form_state) {
if ($form_state['values']['op'] == t('Create new account')) {
modalframe_close_dialog();
}
}

After the user clicks "Create new account" they are redirected inside the modal to home. Has anyone tried this for User Registration form?

I think you can just copy and paste my code...and it should work....instead of "Create new account" use whatever the name of your button is....most likely "Save".

Just make a new folder inside your sites/all/modules folder called whatever you like. I called my module automodal_close.

Open your text editor. Create two new files and save them as, nameofyourmodule.info and nameofyourmodule.module, in my case i used automodal_close.info and automodal_close.module.

Use this code inside each file respectively (changing automodal_close to whatever name your module is or leave as is)..

automodal_close.info:

; $Id$
name = "Automodal Close"
description = "Closes Automodals on Form Submit"
core = 6.x
package = User Interface

automodal_close.module:

<?php

function automodal_close_form_alter(&$form, $form_state, $form_id) {
$form['#submit'][] = 'automodal_close_form_submit';
}

function automodal_close_form_submit($form, &$form_state) {
if ($form_state['values']['op'] == t('Save')) {
modalframe_close_dialog();
}
}

about this:
if ($form_state['values']['op'] == t('Save')) <--This is the value name of the button that when you click it should close the modalframe.

now activate on your newly created module.

MANY, MANY THANKS xpo60rj!!
I´ll try that RIGHT NOW! :)
Rosamunda

Hi again!
I´ve tried with "Save" and "Guardar" (because that´s the name of the button under "value").
But nope, it won´t close the modal window.
Am I forgetting something?

Thanks again for your patience and help!!
Rosamunda

Could it be because there´s no .js file in this new module?
Or maybe I have to put that new module´s folder inside automodal?
Could that code be inserted inside automodal´s module?
Thanks again!!!

Nope, I´ve tried adding (inside automodal.module):

function automodal_form_alter(&$form, $form_state, $form_id) {
$form['#submit'][] = 'automodal_form_submit';
}

function automodal_form_submit($form, &$form_state) {
if ($form_state['values']['op'] == t('Guardar')) {
modalframe_close_dialog();
}
}

And nothing happens.

Ya it should just be in its own folder under modules....

im not sure what else is needed to make it work i guess. i'll let you know if i can figure something out...as i need to be able to get this window closed.

Just keeping this alive. :)

If you delete the if statement, it works, don't know, have not tested it on side effects.

 function automodal_close_form_submit($form, &$form_state) {
// if ($form_state['values']['op'] == t('Save')) {
    modalframe_close_dialog();
// }
}

HTH,
Fossie

or maybe a better way:

function automodal_close_form_alter(&$form, $form_state, $form_id) {
$form['#submit'][] = 'automodal_close_form_submit';
}

function automodal_close_form_submit($form, &$form_state) {
  if ($form_state['clicked_button']['#value'] == t('Save')) {
    modalframe_close_dialog();
 }
}

The #values doesn't have the button name in it, I think. No messages are shown on the returning page, these are on the 'child page' before closing.

HTH
Fossie

Thanks Fossie!
I´ll try that out! (erm... what kind of side effects are we talking about? :)
(It´s a testing environment, but) I hope that nothing explodes or something...
Thanks again!
Rosamunda

Hi,

I put the #16-code into a new plugin and it works. Thanks!

Raphael

Hi again!!
I´ve tried #16 and it works! But only on node save button.
I mean, sometimes you have some "Send" or "Submit" buttons too: In the contact form, or form used by the webform module.
Can I assume that the $form['#submit'] part of the code should be different? And maybe add a similar widget for those other forms?
Thanks for your advice!!
Rosamunda

Hi,

 if ($form_state['clicked_button']['#value'] == t('Save')) {
    modalframe_close_dialog();
}

You can for example maken an array with the different values and check if button clicked value is in that array, if so, close the dialog.

or you can add more in the if

  if (($form_state['clicked_button']['#value'] == t('Save')) || ($form_state['clicked_button']['#value'] == t('Submit')) || ($form_state['clicked_button']['#value'] == t('Ok')) || ($form_state['clicked_button']['#value'] == t('Post')) ) {
    modalframe_close_dialog();
  }

the array sould also work, didn't test it

$submitvalues = array(t('Save'), t('Send'), t('Ok'));
if (in_array($form_state['clicked_button']['#value'], $submitvalues)) {
    modalframe_close_dialog();
}

HTH
Fossie

@Fossie -

Any suggestion on how one could toss in a $form_state['redirect'] = TRUE value in there that is fired AFTER modalframe_close_dialog() is called?

That way we can redirect to the submitted node if we wanted to, outside of the modal window.

I have tried all the examples given above for writing a custom module, activating it and then trying to get this to work but I am still not getting the modal window to close on submit. I made sure that my submit button name matched the one given in the module as well.

The examples in the modal frame module work for me so it's hard to imagine what I might be doing wrong. Do I need to add any additional JavaScript file?

No need for any aditional JS highrockmedia. You just use hook_form_alter to add your submit function to the form, and call the function there. Read my comment above, it works fine.

Manuel, thanks here is the code in my module (automodal_close.module)

<?php
function automodal_close_form_alter(&$form, $form_state, $form_id) {
$form['#submit'][] = 'automodal_close_form_submit';
}
function automodal_close_form_submit($form, &$form_state) {
  if ($form_state['values']['op'] == t('Submit')) {
    // Tell the parent window to close the modal frame dialog.
    modalframe_close_dialog();
  }
}

and my .info file:

; $Id$
name = "Automodal Close"
description = "Closes Automodals on Form Submit"
core = 6.x
package = User interface

I activated the module created a form using webform and call the form using <a href="find-team-member" class="automodal">Click here!</a>

The form opens in a modal frame but the only part not working is when I submit the modal window stays open and does not close.

Does this look correct? My submit button name is called "Submit".

The only other thing I can think of is that I have some conflicting modules but hard to believe as the examples that come with modal frame work fine.

id check the $form_id in the alter, unless you want to use that submit on every form on your site.

not sure about the 'op' part, no time to troubleshoot sorry, but if dsm($form_state['values']['op']) looks correct for you there, there is not much else to it realy.

I havent tested on webforms no tu sure it works with that either...

Manuel, thanks for the tips, do you mean to say that I should hard code the form ID?

@highrockmedia

I am not sure what you are doing, but I had the same issue with the automodal, however, it was solved by creating a custom modal to call for child window to be closed. as this:

function MY_modulename_form_alter(&$form, $form_state, $form_id) {
$form['#submit'][] = 'automodal_close_form_submit';
}

function MY_modulename_form_submit($form, &$form_state) {
  if (($form_state['clicked_button']['#value'] == t('Save'))) {
    modalframe_close_dialog();
}
}

Just enter the t('Save') value with the submit button form value. you can also add multiple values like this:

function MY_modulename_form_submit($form, &$form_state) {
  if (($form_state['clicked_button']['#value'] == t('Save')) || ($form_state['clicked_button']['#value'] == t('Submit')) ) {
    modalframe_close_dialog();
}
}

Hope this helps

troyl - I tried that method as well and it did not work. I am sure there is some conflict with my install of Drupal but finding it I fear will be like a needle in a haystack. Thanks anyway.

@highrockmedia

What version ModalFrame are you using, and have you added the patch from this comment http://drupal.org/node/767128#comment-2833562

let me know, also what actually are you trying to open in automodal...I mean what's the form id and which button are you trying to trigger the form?

troyl thannks for the suggestions, I have not applied the patch so hopefully that is a possibility. I'm headed out on vacation for 9 days but I will get back here with some more info and try the patch when I get back. Thanks again, perhaps the patch will fix my issue.

I have added the patch in #29 and my modal form still does not close on form submit. here is my .module:

function automodal_close_form_alter(&$form, $form_state, $form_id) {
$form['#submit'][] = 'automodal_close_form_submit';
}

function automodal_close_form_submit($form, &$form_state) {
  if (($form_state['clicked_button']['#value'] == t('Save')) || ($form_state['clicked_button']['#value'] == t('Submit')) || ($form_state['clicked_button']['#value'] == t('Save block')) ) {
    modalframe_close_dialog();
}
}

@ LuckySMack - Did the patch actually work for you or did you get an error like I did? http://drupal.org/node/767128#comment-2943328

1. i think first we need to modify to automodal js, because we have no onSubmit option/function for the ModalFrames

this is the .js modified:

(function ($) {
  Drupal.behaviors.automodal = function () {
    var selector = Drupal.settings.automodal.selector || '.automodal';

   function onSubmitCallback(args, statusMessages) {
     // Display status messages generated during submit processing.
     if (statusMessages) {
        $('.modal-messages').hide().html(statusMessages).show('slow');
      }
    }
    
    var settings = {
      autoResize: true,
      autoFit: true,
      width: 650,
      height: 400,
      onSubmit: onSubmitCallback 
    }
    
    $(selector).click(function () {
      settings.url = $(this).attr('href') || '#';
      
      if (settings.url.indexOf('?') >= 0) {
        settings.url += '&'
      }
      else {
        settings.url += '?'
      }
      settings.url += 'automodal=true';
      
      Drupal.modalFrame.open(settings);
      
      return false;
    });
  }
  
})(jQuery);

!!!!! we need also to have a html tag for messages with the class modal-messages, like

<div class="modal-messages"></div>

2. second : on automodal.module we add these lines

function automodal_form_alter(&$form, $form_state, $form_id) {
  if ($_GET['automodal']=='true') {
    $form['#submit'][] = 'automodal_close_form_submit';
  }
}

function automodal_close_form_submit($form, &$form_state) {
    modalframe_close_dialog();
    return;
}

... and that's it

good luck

Thanks for digging in vasike... could you provide a proper patch so that others can test what you are talking about efficiently?

@highrockmedia when applying the patch in #29 i did not get any errors.

@LuckySMack - Ok good to know but this person had the same error I did when applying the patch: http://drupal.org/node/767128#comment-2987374

I've been working on porting some code over from Popups UI, and this is one of a handful of things I put together to make my life easier...

Anyhow, I've turned this into a patch, with a few minor adjustments that should help it be more usable.

This patch depends on the patch (#4, automodal_multiple_selectors.patch) by jcmarco found at http://drupal.org/node/767128#comment-2833562

This has a patch now, but should be expanded upon to support other themes besides Garland...

Maybe hijack some more Popups UI code, ala 'popups_theme_content_selector' ?

Also might be helpful to have the default submit handler be able to handle a refresh page option?
Related issue is #711624: Refresh page after form submit

There is a bit of a dupe on #838454: Code to auto close on submit breaks admin.

I don't know that this should be on submit of every form. With automodal you could not do something like the overlay in D7 if this goes in. Maybe a setting on the settings form.

I'll look into this soon.

Similar concerns prompted me to place this in #settings['automodal'] - but this is not a complete solution.

Making the loading of the default onSubmit handler an optional setting based on #767128: New features would probably be a good thing.
(because the places where I've needed it, I re-wrote the close handler to purpose anyhow?)

Also, the code posted in #838454: Code to auto close on submit breaks admin seems like it might break things that the recent work here would not?
ie $_GET['automodal'] == 'true' should prevent the admin problems and such?

Proposal: based on #767128: New features set the default, set settings.onSubmit = 'default' or null based on settings checkbox, and in JavaScript, load default function only on settings.onSubmit string 'default'

I just tried vasike's method and it DOES work!

BUT, is there a way to also make the parent page refresh on submit?

I'm trying to use it to edit nodes in a popup and on submit the popup closes now, but I can't see any change in the parent page until I refresh it...

http://drupal.org/cvs?commit=417394

this by the way works ONLY with the drupal core contact form, NOT with WEBFORM