simple jquery event handler

Question

having some real problems with jquery at the moment. Basically what I have so far is. The form is submitted once the form is submitted a grey box pop's up with the relevant infomation.

What I need to do though is refresh the whole page then allow the grey box to appear.

I have the following code

 $("#ex1Act").submit(function() {
        //$('#example1').load('index.php', function()                                 
        $("#example1").gbxShow();
        return true;
      });

the line which is commented out load's the page again after the form is submitted the other code makes the grey box pop-up.

Is their a way to say once the:

$('#example1').load('index.php', function() 

has been exucted do this:

 $("#example1").gbxShow();

hope this makes sense.

Answer 1

This is not possible.

Once the form is submitted, the Javascript running on the page that submitted the form is completely gone; it cannot affect the page that the form returns.

Instead, you should put server-side code in the form that writes $("#example1").gbxShow(); in a separate <script> block if the form has been submitted.

Answer 2

Why not just submit the form normally (ie, not using JavaScript) and add a variable to the resulting page signalling the need to display the grey box? Like so:

<?php if(isset($_POST['submit'])): ?>
    <script type="text/javascript">
        var showGreyBox = true;
    </script>
<?php endif; ?>

...

<script type="text/javascript">
    $(function(){
        if(showGreyBox !== undefined){
            // execute code to show the grey box
        }
    });
</script>

Something like that, maybe?

Answer 3

The problem you have is that the web page is "stateless". This means that you can't do a bit of JavaScript, refresh the page and continue on with your JavaScript. When you refresh the page, you lose your current state and the page starts from scratch.

You will need to re-engineer your design to bear in mind the page lifecycle (ie all JavaScript stops permanently on navigation).

One solution may be to use the jQuery AJAX forms plugin, which will submit the form to the server and give you back the result of the submission, which would avoid breaking the page lifecycle. You could then display the box as you wish.

Answer 4

The standard way to do this is to have the server return the gray box contents in the response to the form post.

You could probably do this in jquery by putting the page and the grey box into separate iFrames so that it would be safe from the page refresh