How to close a modal window on Click (or onSubmit)

For Joomla! 1.5 Coding related discussions, please use: http://groups.google.com/group/joomla-dev-general
Forum rules
Please use the mailing list here: http://groups.google.com/group/joomla-dev-general rather than this forum.
DJHollingworth
Joomla! Apprentice
Joomla! Apprentice
Posts: 29
Joined: Tue Feb 06, 2007 9:16 am
Contact:

How to close a modal window on Click (or onSubmit)

Postby DJHollingworth » Tue Jul 06, 2010 11:54 am

Hi

I've a form that I open in a modal window quite successfully. The form has a Submit button that submits the form OK; but what I'd like to do is to close the modal window as well as submit the form when the user clicks the submit button.

I've tried adding

onClick="this.submit(); window.close();"

to the button. The submit works but the window doesn't close.

I've also tried just onClick="window.close();"

and I've also tried window.hide();

Nothing I've tried will actually close the modal window when I click the Submit button.

Has anyone any idea how to do this?

Thanks

User avatar
nailson_imgn
Joomla! Guru
Joomla! Guru
Posts: 726
Joined: Wed Apr 15, 2009 5:33 pm
Location: Fortaleza, CE - Brasil

Re: How to close a modal window on Click (or onSubmit)

Postby nailson_imgn » Tue Jul 06, 2010 6:32 pm

Use this:

Code: Select all

<input type="button" value="Close Window" onclick="window.parent.document.getElementById( 'sbox-window' ).close();" />
.
Nailson Oliveira
Técnico de Tecnologia da Informação - Desenvolvedor Joomla!
-----------------------------------------------------------------------------------------

DJHollingworth
Joomla! Apprentice
Joomla! Apprentice
Posts: 29
Joined: Tue Feb 06, 2007 9:16 am
Contact:

Re: How to close a modal window on Click (or onSubmit)

Postby DJHollingworth » Wed Jul 07, 2010 9:39 am

Hi,

Many thanks for your solution that works very well.

One further, related, question. Is it possible to get the parent window to refresh when the modal window is closed? I guess the short answer will be 'Yes'; any clues how to do it?

Thanks

David

User avatar
nailson_imgn
Joomla! Guru
Joomla! Guru
Posts: 726
Joined: Wed Apr 15, 2009 5:33 pm
Location: Fortaleza, CE - Brasil

Re: How to close a modal window on Click (or onSubmit)

Postby nailson_imgn » Wed Jul 07, 2010 3:42 pm

Of course. Just access the parent window throught javascript and reload it.

Code: Select all

window.parent.location.reload();

Reloading the parent page will close the modal window as well, but you can still force the modal screen to close before the reloading if you want to.
.
Nailson Oliveira
Técnico de Tecnologia da Informação - Desenvolvedor Joomla!
-----------------------------------------------------------------------------------------

DJHollingworth
Joomla! Apprentice
Joomla! Apprentice
Posts: 29
Joined: Tue Feb 06, 2007 9:16 am
Contact:

Re: How to close a modal window on Click (or onSubmit)

Postby DJHollingworth » Wed Jul 07, 2010 5:56 pm

Hi

Many thanks for your reply. The reload works grand; but there's one problem. The modal window submits a form with data to appear on the main window. Unfortunately it seems the main window refreshes before the changes hit the database because the main page doesn't reflect the changes. Hitting F5 in the main page once the modal has closed refreshes the main page again and displays the changes.

I guess it's because the onSubmit function, which executes the parent window reload, runs _before_ the actual submit executes.

Regards

David

User avatar
nailson_imgn
Joomla! Guru
Joomla! Guru
Posts: 726
Joined: Wed Apr 15, 2009 5:33 pm
Location: Fortaleza, CE - Brasil

Re: How to close a modal window on Click (or onSubmit)

Postby nailson_imgn » Wed Jul 07, 2010 6:32 pm

Set the reload behavior to run after a second or two.

Code: Select all

setTimeout( 'reload_parent_window();', 2000 );

You can also improve the reload function to block the page while the user waits for the page to reload. It's a good improvement to the user experience and very easy to implement.

Another ( better ) sollution wil be to add the reloading js into the body your form action page. This way you'll always be sure that the data will be updated after the page gets reloaded.
Last edited by nailson_imgn on Wed Jul 07, 2010 6:39 pm, edited 1 time in total.
.
Nailson Oliveira
Técnico de Tecnologia da Informação - Desenvolvedor Joomla!
-----------------------------------------------------------------------------------------

DJHollingworth
Joomla! Apprentice
Joomla! Apprentice
Posts: 29
Joined: Tue Feb 06, 2007 9:16 am
Contact:

Re: How to close a modal window on Click (or onSubmit)

Postby DJHollingworth » Wed Jul 07, 2010 6:36 pm

Hi

Thanks for your suggestions, I'll give those a try. Your help is greatly appreciated.

Regards

David

User avatar
betweenbrain
Joomla! Guru
Joomla! Guru
Posts: 800
Joined: Wed Feb 28, 2007 5:40 am
Location: Connecticut, USA
Contact:

Re: How to close a modal window on Click (or onSubmit)

Postby betweenbrain » Sat Jul 17, 2010 4:34 pm

Hi All,

I'm working on something similar and this is what I ended up using:

Code: Select all

<input type="submit" name="Submit" class="button" value="<?php echo JText::_('LOGIN') ?>" onclick="window.setTimeout('window.parent.location.reload();',1000);"  />

Does this seem like a suitable solution?

Thanks for any input that you can offer.

Best,

Matt
betweenbrain™ | http://www.betweenbrain.com
Construct Template Development Framework | http://construct-framework.com/

User avatar
piotr_cz
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 164
Joined: Mon Mar 30, 2009 11:27 am
Location: www
Contact:

Re: How to close a modal window on Click (or onSubmit)

Postby piotr_cz » Wed Sep 22, 2010 7:56 am

if you are loading the modal using iframe and &tmpl=component, you may just redirect the modal form submit to parent:

Code: Select all

window.onload = function(){ // form has to be loadd
  if (parent.length != 0) { // check if parent exists
    var loginForm = document.forms['login'];
    loginForm.setAttribute('target', "_parent");
  };
};
work hard, party harder
http://smartwebstudio.com

User avatar
nailson_imgn
Joomla! Guru
Joomla! Guru
Posts: 726
Joined: Wed Apr 15, 2009 5:33 pm
Location: Fortaleza, CE - Brasil

Re: How to close a modal window on Click (or onSubmit)

Postby nailson_imgn » Wed Sep 22, 2010 4:59 pm

piotr_cz wrote:if you are loading the modal using iframe and &tmpl=component, you may just redirect the modal form submit to parent:

Code: Select all

window.onload = function(){ // form has to be loadd
  if (parent.length != 0) { // check if parent exists
    var loginForm = document.forms['login'];
    loginForm.setAttribute('target', "_parent");
  };
};

That seems nice, but there are a couple of things to be noticed.
First of all, this would eliminate the possibility of displaying a confirmation message inside the modal window before reloading the main window.
Also, if some kind of error happens after submitting the form, the whole window will have to be loaded again, instead of just a simple message and/or the form.
.
Nailson Oliveira
Técnico de Tecnologia da Informação - Desenvolvedor Joomla!
-----------------------------------------------------------------------------------------

User avatar
piotr_cz
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 164
Joined: Mon Mar 30, 2009 11:27 am
Location: www
Contact:

Re: How to close a modal window on Click (or onSubmit)

Postby piotr_cz » Thu Sep 23, 2010 9:00 am

nailson_imgn wrote:
piotr_cz wrote:if you are loading the modal using iframe and &tmpl=component, you may just redirect the modal form submit to parent:

Code: Select all

window.onload = function(){ // form has to be loadd
  if (parent.length != 0) { // check if parent exists
    var loginForm = document.forms['login'];
    loginForm.setAttribute('target', "_parent");
  };
};

That seems nice, but there are a couple of things to be noticed.
First of all, this would eliminate the possibility of displaying a confirmation message inside the modal window before reloading the main window.
Also, if some kind of error happens after submitting the form, the whole window will have to be loaded again, instead of just a simple message and/or the form.


As far as I know, there is no confirmation message for successfully logged in user i Joomla (using JError), only an error message that will show up after iFrame form is submitted. Please correct me if there is one, I searched in user component and language files. Option JS Confirmation message doesn't work for me, in fact I can't find any reference to this option.

For all forms that are not called 'login' action loads in iFrame, so you may add tmpl=component to links href/ form action and target="_self".

I can post a code here; been working on it for a while.
work hard, party harder
http://smartwebstudio.com

User avatar
nailson_imgn
Joomla! Guru
Joomla! Guru
Posts: 726
Joined: Wed Apr 15, 2009 5:33 pm
Location: Fortaleza, CE - Brasil

Re: How to close a modal window on Click (or onSubmit)

Postby nailson_imgn » Thu Sep 23, 2010 1:10 pm

I think you're missing the point here. Although modal windows can open any page, the way to make it really useful is using it to add some new functionality to the site, instead of just showing some that already exist.

You could show some special info, display forms, and so on. If a user submit a form, you could show him a status message telling about the result. If the submission process went fine, show something like "The data was succesfully saved." and then close the modal window after a few seconds. And if the data was not saved by any reason, you could show a message saying the reason so the user can fix it and submit the form again. If an error occurs in a form submitted to the parent window, even thought you could show a message, it would take longer to reload the whole window and if the user want to try again, he would have to find the modal window link again...

Also, if an important action is about to happen, like deleting some important database records or something, you could show a confirmation message telling about the consequences and asking if the user wants to proceed or not... If he then chooses to cancel the action, you can just close the window and the user wouldn't have to reload the main page!

In short, what I'm saying is that there are many reasons why you may want to submit the form in the modal window itself and then close it afterwards.
.
Nailson Oliveira
Técnico de Tecnologia da Informação - Desenvolvedor Joomla!
-----------------------------------------------------------------------------------------

User avatar
betweenbrain
Joomla! Guru
Joomla! Guru
Posts: 800
Joined: Wed Feb 28, 2007 5:40 am
Location: Connecticut, USA
Contact:

Re: How to close a modal window on Click (or onSubmit)

Postby betweenbrain » Thu Sep 23, 2010 1:24 pm

nailson_imgn wrote:In short, what I'm saying is that there are many reasons why you may want to submit the form in the modal window itself and then close it afterwards.

Such as a pop-up login box. If the password is incorrect, it would be great to let them know.

Best,

Matt
betweenbrain™ | http://www.betweenbrain.com
Construct Template Development Framework | http://construct-framework.com/

User avatar
piotr_cz
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 164
Joined: Mon Mar 30, 2009 11:27 am
Location: www
Contact:

Re: How to close a modal window on Click (or onSubmit)

Postby piotr_cz » Thu Sep 23, 2010 1:49 pm

nailson_imgn >
thanks for explanation, I agree with you. At the moment I'm using modal box only for the user component (login, remind, etc.).

Unfortunately in Joomla there's no 'login successful' message so there's no point to not close the modal box for me as it would load a blank page :( If you are aware of any way how to squeeze it out of the system, please let me know.

If the login is unsuccessful, in the main window system message appears. I modded it to jump in the corner of screen frame so it's visible enough.
work hard, party harder
http://smartwebstudio.com

User avatar
nailson_imgn
Joomla! Guru
Joomla! Guru
Posts: 726
Joined: Wed Apr 15, 2009 5:33 pm
Location: Fortaleza, CE - Brasil

Re: How to close a modal window on Click (or onSubmit)

Postby nailson_imgn » Thu Sep 23, 2010 2:19 pm

piotr_cz wrote:Unfortunately in Joomla there's no 'login successful' message
Unfortunately, Joomla still has a lot of things that has to be fixed. The great thing is: Joomla allows you to fix all you need.
Usually I avoid using the Joomla default components. Instead of logging in using com_user, I use the framework to code better user pages/features. When things are wrong only in the layout, I use a layout override... There are always ways to make Joomla even better than it already is.

And just to remind you: your script tip can be useful in some situations. And since it is related with this topic, it is nice to have it here. However, if there are things to be explained that are outside of this topic context the correct thing will be to write a new topic instead of keep posting in this one.

Best regards
.
Nailson Oliveira
Técnico de Tecnologia da Informação - Desenvolvedor Joomla!
-----------------------------------------------------------------------------------------

User avatar
piotr_cz
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 164
Joined: Mon Mar 30, 2009 11:27 am
Location: www
Contact:

Re: How to close a modal window on Click (or onSubmit)

Postby piotr_cz » Sat Sep 25, 2010 5:14 pm

This forum tipics could be kind of relevant here:

hot to open Squeezebox from a form?
Opening a SqueezeBox iframe with javascript?

By the way, which modal box are you using?
I went with mediaboxAdvanced; SqueezeBox 1.0pre shipped with Joomla 1.5 has options caching problem.
work hard, party harder
http://smartwebstudio.com


Return to “Joomla! 1.5 Coding”

Who is online

Users browsing this forum: No registered users and 4 guests