Jquery Dialog Pop-Up Message While FOrm Processes

[NooseLadder]

Hi,

I wonder if anyone can point me in the right direction. I have a process for booking a course as follows using html form and method='post'. I would like to have a pop-up message e.g. jQuery Dialog after step 3 below. if no errors, to say 'Please wait whilst your application is processed' as there is a delay here and an impatient user might give up if he perceives that nothing is happening. The problem I have is that the dialog is called before the page has loaded and the redirect initiated in step 5. I've looked around at the usual coding sites, there are similar scenarios but I can't find a solution for my application.

1. Select required course.

2. Submit application form.

3. Form Validation, if errors post to same page i.e. action=',/' display error mssgs.

If no errors

[jQuery Dialog here]

4. Create page in admin with applicant's and course selected details.

5. Redirect using to payment page on the site.

$destination_url = $pages->get(1544)->url; //Contact form success page
        header("Location:$destination_url");
        exit();
 

 Pay via Paypal.

If payment successful 

6. Set field in page created in step 4. as deposit paid.

7. Send emails to admin and applicant.

8. Redirect back to Success page.

If payment is cancelled or browser closed redirect to cancellation page.

[ryan]

Not sure I fully understand the scenario. But it sounds like you've got a dialog box popping up before you want it, or a redirect occurring before you want it. You could delay the dialog by using javascript setTimeout() to load it. As for the redirect, you could always resort to a javascript-based redirect: window.location.href = 'target url'; to occur any time during or after page load (again setTimeout() might come in handy here). 

[NooseLadder]

Thanks Ryan but the solution was easy in the end. I activated the dialog when the submit button was clicked. I set it as a modal with no buttons so the pop-up stays there until either the page reloads with form errors or redirects to the payment page.

[felix]

http://www.malsup.com/jquery/block/#page was propably what you were searching for.

[Marty Walker]

Hey NooseLadder,

I used this on a site (non-PW) a while back. I think what it does is catch the click on a submit button and display a message.

https://github.com/aurels/jquery.alerts

<script type="text/javascript">
$(document).ready( function() {
	$("#alert_button").click( function() {
		jAlert('Your details are being changed.<br/><br/>(If you are uploading new images this may take some time.)', 'Updating...');
	});

});
</script>

[NooseLadder]

I used the JQuery dialog:

<script>
 $(function() {
     $("#gsubmit, #submit").click(function () {
        $( ".popUp" ).dialog({
            dialogClass: "noClose",
            position: { my: "center top", at: "center top", of: window },
            autoOpen: true,
            closeOnEscape: false,
            modal: true,
            draggable: false,
            hide: {
            effect: "explode",
            duration: 1000
              });
     });
});
</script>
 

And the HTML

<div class="popUp" title="Please Wait..." style="display:none;">
    <p>One moment please, the form is processing.</p>
</div>