How to close a modal window on Click (or onSubmit)
-
- Joomla! Apprentice
- Posts: 29
- Joined: Tue Feb 06, 2007 9:16 am
- Contact:
How to close a modal window on Click (or onSubmit)
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
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
- nailson_imgn
- Joomla! Guru
- Posts: 729
- Joined: Wed Apr 15, 2009 5:33 pm
- Location: Fortaleza, CE - Brasil
Re: How to close a modal window on Click (or onSubmit)
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!
-----------------------------------------------------------------------------------------
Nailson Oliveira
Técnico de Tecnologia da Informação - Desenvolvedor Joomla!
-----------------------------------------------------------------------------------------
-
- Joomla! Apprentice
- Posts: 29
- Joined: Tue Feb 06, 2007 9:16 am
- Contact:
Re: How to close a modal window on Click (or onSubmit)
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
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
- nailson_imgn
- Joomla! Guru
- Posts: 729
- Joined: Wed Apr 15, 2009 5:33 pm
- Location: Fortaleza, CE - Brasil
Re: How to close a modal window on Click (or onSubmit)
Of course. Just access the parent window throught javascript and reload it.
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.
Code: Select all
window.parent.location.reload();
.
Nailson Oliveira
Técnico de Tecnologia da Informação - Desenvolvedor Joomla!
-----------------------------------------------------------------------------------------
Nailson Oliveira
Técnico de Tecnologia da Informação - Desenvolvedor Joomla!
-----------------------------------------------------------------------------------------
-
- Joomla! Apprentice
- Posts: 29
- Joined: Tue Feb 06, 2007 9:16 am
- Contact:
Re: How to close a modal window on Click (or onSubmit)
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
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
- nailson_imgn
- Joomla! Guru
- Posts: 729
- Joined: Wed Apr 15, 2009 5:33 pm
- Location: Fortaleza, CE - Brasil
Re: How to close a modal window on Click (or onSubmit)
Set the reload behavior to run after a second or two.
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.
Code: Select all
setTimeout( 'reload_parent_window();', 2000 );
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!
-----------------------------------------------------------------------------------------
Nailson Oliveira
Técnico de Tecnologia da Informação - Desenvolvedor Joomla!
-----------------------------------------------------------------------------------------
-
- Joomla! Apprentice
- Posts: 29
- Joined: Tue Feb 06, 2007 9:16 am
- Contact:
Re: How to close a modal window on Click (or onSubmit)
Hi
Thanks for your suggestions, I'll give those a try. Your help is greatly appreciated.
Regards
David
Thanks for your suggestions, I'll give those a try. Your help is greatly appreciated.
Regards
David
- betweenbrain
- Joomla! Guru
- Posts: 801
- Joined: Wed Feb 28, 2007 5:40 am
- Location: Connecticut, USA
- Contact:
Re: How to close a modal window on Click (or onSubmit)
Hi All,
I'm working on something similar and this is what I ended up using:
Does this seem like a suitable solution?
Thanks for any input that you can offer.
Best,
Matt
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);" />
Thanks for any input that you can offer.
Best,
Matt
Best,
Matt Thomas
Matt Thomas
- piotr_cz
- Joomla! Enthusiast
- Posts: 164
- Joined: Mon Mar 30, 2009 11:27 am
- Location: Europe
- Contact:
Re: How to close a modal window on Click (or onSubmit)
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");
};
};
- nailson_imgn
- Joomla! Guru
- Posts: 729
- Joined: Wed Apr 15, 2009 5:33 pm
- Location: Fortaleza, CE - Brasil
Re: How to close a modal window on Click (or onSubmit)
That seems nice, but there are a couple of things to be noticed.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"); }; };
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!
-----------------------------------------------------------------------------------------
Nailson Oliveira
Técnico de Tecnologia da Informação - Desenvolvedor Joomla!
-----------------------------------------------------------------------------------------
- piotr_cz
- Joomla! Enthusiast
- Posts: 164
- Joined: Mon Mar 30, 2009 11:27 am
- Location: Europe
- Contact:
Re: How to close a modal window on Click (or onSubmit)
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.nailson_imgn wrote:That seems nice, but there are a couple of things to be noticed.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"); }; };
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.
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.
- nailson_imgn
- Joomla! Guru
- Posts: 729
- Joined: Wed Apr 15, 2009 5:33 pm
- Location: Fortaleza, CE - Brasil
Re: How to close a modal window on Click (or onSubmit)
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.
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!
-----------------------------------------------------------------------------------------
Nailson Oliveira
Técnico de Tecnologia da Informação - Desenvolvedor Joomla!
-----------------------------------------------------------------------------------------
- betweenbrain
- Joomla! Guru
- Posts: 801
- Joined: Wed Feb 28, 2007 5:40 am
- Location: Connecticut, USA
- Contact:
Re: How to close a modal window on Click (or onSubmit)
Such as a pop-up login box. If the password is incorrect, it would be great to let them know.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.
Best,
Matt
Best,
Matt Thomas
Matt Thomas
- piotr_cz
- Joomla! Enthusiast
- Posts: 164
- Joined: Mon Mar 30, 2009 11:27 am
- Location: Europe
- Contact:
Re: How to close a modal window on Click (or onSubmit)
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.
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.
- nailson_imgn
- Joomla! Guru
- Posts: 729
- Joined: Wed Apr 15, 2009 5:33 pm
- Location: Fortaleza, CE - Brasil
Re: How to close a modal window on Click (or onSubmit)
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.piotr_cz wrote:Unfortunately in Joomla there's no 'login successful' message
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!
-----------------------------------------------------------------------------------------
Nailson Oliveira
Técnico de Tecnologia da Informação - Desenvolvedor Joomla!
-----------------------------------------------------------------------------------------
- piotr_cz
- Joomla! Enthusiast
- Posts: 164
- Joined: Mon Mar 30, 2009 11:27 am
- Location: Europe
- Contact:
Re: How to close a modal window on Click (or onSubmit)
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.
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.