Forums

Hi Max, and Grey🙂

Its been a little while since ive been on, and to be fair I have been a little bit busy.

I have a unique one for you and I don't know if it can be done.

Basically I have a form opening up inside of (what is technically a lightbox) shadowbox. Now when the form is submitted I would prefer it if the shadowbox were to close automatically.
There is a control key attached to closing the shadow box and this is the letter c on your keyboard. So I wonder, is there anyway in which to have the form submit and then run a small script to emulate the pressing of the "c" key on a keyboard ?

Strange one I know.

Regards,

Tom.

Hi,
Have you tried the solution from this thread?
http://www.chronoengine.com/forums.html?cont=posts&p=32542#p32542

/Fredrik

Hi Fredrick,

Ive had a quick read and from the outset it looks like a heck of a mod for something small ?

Problem is (if I got the beginning of the thread right) I dont use JCE and neither do the people who will be using the site from an admin point of view. They prefer the default one, which kinda knackers things up a little.

I was hoping there may be a very simple snippet of code that could be placed within the form controls for on(AFTER) submit that it emulates the pressing of the C key on the keyboard as opposed to going and making modifications to the core files😟

Ultimately the modifications to core files would only make it harder in the long run to update and upgrade components and Joomla, which is something that needs to remain simple with as little backing up or modifications after the upgrade as possible.

Kind regards,

Tom.

Hi,
There should be no need for advanced file editing, as most should be placed within the form code. As you've already got your form displayed within shadowbox/lightbox, the JHTML::_('behaviour.modal'); function call shouldn't be needed.

What's left is basically to add the onsubmit JScript event:

onsubmit="window.parent.document.getElementById('sbox-window').close();"

This would easily be added to the Form tag field in CC.

On a second thought, visited the shadowbox forum, and they suggested using window.parent.Shadowbox.close(); instead. Should be within the same event though..

/Fredrik

Hi there,

The shadow box in question is from YooTools (Ironic I know lol).

The way it is called is as follows;

><a href="book-an-appointment.html" title="Book an Appointment" rel="shadowbox">BOOK NOW....</a>

So im assuming that I can still use the javascript function you outlined above to have the save effect ?

I also forgot to ask,

You say the Form Tag Field ?
Im assuming the tab called Form Code? Then there are 4 fields, of which I can only imagine 2 would be valid. The on submit before sending mail and the on submit after sending email.

YOOlightbox then I assume?

You should use your link as usual on your pages; when clicked, YOOlightbox creates a new iframe and loads the new url within this. Looking closely, we see that in the parent document, there's a close link, with a javascript link calling Shadowbox.close(). This is what we wish to tap into from within our iframe...

So.. within our form, we first need to access the parent window "window.parent", and from within that, access the Shadowbox object and it's close() method. Thus, within our form, we need to make a js-call such as "window.parent.Shadowbox.close();". This could be attached to pretty much anything, but as we'd like this to fire as the form submits, either add it as an onsubmit event for the form, or let the "on submit (after email)" box generate the appropriate script.

Hope that wasn't too much to digest😉

Ohh, and the "Form tag" field is on the first tab in CC...

/Fredrik

Hi Fredrick,

Ok I think I am now seriously baffled🙂

Due to it being the Yoolightbox/shadowbox im assuming your earlier string wont work (well not on the form tag anyway).

So how do I edit this to get it to work, and where exactly would I put it.

Its been a long day really, and if I can get this to work before letting the site go live (although needing further info from other people) then i would be a happy bunny.

Many thanks,

Tom.

'k,
Option 1: add an onsubmit event to the <form> tag:
Within CC, open/edit your form. On the General tab (first one) you'll find a field named "Form tag attachment". This is where you write the event-code:

onsubmit="window.parent.Shadowbox.close();"

Option 2: add some javascript to the form submit "thank you" page. Move to the "Form Code" tab instead. Within the "on Submit code - after sending email", add a piece of code such as this:

<?php
$shadowboxclose = "window.addEvent('domReady', function() {
  window.parent.Shadowbox.close();
});
";

$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($shadowboxclose);
?>

Both do the same function call, first one does it as the form submits, the other when the form has completed submitting.

/Fredrik

Hi Fredrik,

Ok,

I have tried both alternatives to see what the difference is and how they would work for me.

1st Option closes shadow box as planned upon clicking the submit button. But the email never arrived...

2nd Option Email arrived, but shadow box did not close, instead it redirected me to a page on my site with no main content in.

So both didn't work in their own unique way, and yet again both were successful.

Kind regards,

Tom.

'k,
Option 1 apparently fails as the script event triggers before the form has time enough to submit itself.
Option 2 does depend on MooTools, seems I forgot to add "JHTML::_('behavior.mootools');" to the code.
Give this a shot:

<?php
JHTML::_('behavior.mootools');
$shadowboxclose = "window.addEvent('domReady', function() {
  window.parent.Shadowbox.close();
});
";

$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($shadowboxclose);
?>

/Fredrik

Hi Fredrik,

I have tried the new modified version for the after submit event, but again it did not close the shadowbox and simply redirected to an empty page on the site.

I also forgot to mention earlier, thank you so much for your help already. It is greatly appreciated.

With the regards to the onsubmit version (as it is submitting) is there anyway to add a time delay before it is triggered? I have searched a little and come up with the following

onsubmit="setTimeout ('window.parent.Shadowbox.close()', 2000);"

But this too does not seem to work for the onsubmit method (in the form tag attachment field).

Many thanks again,

Tom.

I found the magic number and trick🙂 Fredrik.

Thank you so much for your help. At first it started to look as if the delay would not work at all, but then I noticed that after the redirect the c key on the keyboard no longer closed the shadow box, which got me wondering.

Perhaps the onsubmit etc, was not working after it had been redirected to another page.

I tweaked my timeout above to 500 so I ended up with

onsubmit="setTimeout ('window.parent.Shadowbox.close()', 500);"

and it now both sends the email AND shuts the box down😀

I think the only bit thats missing now is to put a slight warning on the form that after submitting the form the box will close rather swiftly...

Many thanks again,

Regards,

Tom.

Hi,

That sounds odd.. the mere loading of a new page within the iframe shouldn't affect the close() mechanism.

Having a too great value of setTimeout would indeed cause problems, as the DOM for the iframe gets destroyed as the new page loads, even so, that should not affect the parent window.
I'll try playing with this for a few days, and see what I come up with.

/Fredrik

Im not going to pretend im some javascript or php mastermind😉 as im not🙂

But from my view I can live with it shutting quickly provided it emails. Ive also been told by the powers that it is fine.

Then came the bombshell (just as I thought I was out of the woods), can we make sure that...
1. there are 2 email fields and if 1 doesn't match the other then it flags this up straight away
2. Phone numbers are checked to make sure they are a certain length
3. post codes match the standard UK format (hard to do I would imagine as the format changes depending on where you live)

Any ideas on any of these Fredrik ? Before I do a runner lol.

I think there was a topic regarding advanced validation the other day on the forum. How well this will play with lightbox/shadowbox is beyond my knowledge, I'm afraid.

This could, of course, be done using server-side validation. You would, however, have to drop the onsubmit="setTimeout" approach for this to be useful.

You could alter your onsubmit event, to run a custom (javascript) function. This should then do all the tests, posting notices whenever some test fails. Finally, it should either return true (to submit the form) and start the timer, or return false to stop the form from submitting.

Right now, I'm trying to convince the YOOeffects plugin to work with me - unfortunately with limited results. Might be that I'm using a non-YooTheme template... although I've followed their directions as to use with non-yoo template (loading mootools and such). I'll let you know once I've got around to test a few rough ideas..

/Fredrik

Hi Fredrik,

Ahh yes, good old Y00🙂
Most of the work is fantastic and invaluable in terms of the amount of time and effort it can save let alone the effects. But I find that support is a little slack. To say a person pays a subscription one would have thought that they would be willing to help as opposed to make it as hard as possible to get any kind of help. And when you finally give in and do everything you are asked (in terms of publishing all the details on a forum (albeit closed) they all disapear lol.

Still, as I say, the work is outstanding, just wished they would learn the support side and bug fix side of things from Max, Bob and everyone here🙂

Hi,
I finally had some success figuring out why shadowbox wouldn't work for me.. (turns out I hadn't ticked the "add extensions" in the SEF config).

My initial tests suggest that the domReady event never kicks in within the iframe, so I simply removed it alltogether. What I ended up using, which actually works like a charm, is this (on submit - after email):

<?php
$shadowboxclose = "window.parent.Shadowbox.close();";

$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($shadowboxclose);
?>

Guess my initial code was a victim of overworked, fancy code😛
This could, of course be extended with a lot of other fancy code to achieve validation (using the serverside validation box) and such😉

/Fredrik

Hi Fredrik,

The 'domready' event is MooTools specific so you'd need to have MooTools loaded in the shadow box to use it.

Bob

Hi Bob,
That I am aware of. Unfortunately, loading the mootools jslib did not help either, as you will find a few posts back. Thanks for your input though.

My best guess would be that the iframe DOM is considered part of the parent window DOM, and hence the domReady event has already fired. Nevertheless, the parent property would be available as soon as the window is created, so there's no real need to wait for the rest of the DOM to become available (as long as we don't do any advanced operations after the "on Submit - after email" code).

/Fredrik