Question

I’ve probably overcomplicated things, but being relatively new to the whole process, I didn’t know what else to do. I have an order form inside an iframe, which is inside a jQuery UI dialog lightbox. It all works, except for one problem: when the form is submitted and it redirects to either the thank-you or error page, it’s scrolled at the bottom.

I’ve tried using onload="window.parent.scroll(0,0);" in the tags of the thank-you and error pages, but that didn’t do anything.

Also tried:

<script type="text/javascript">
    $("#orderform").onsubmit(function() {
     $("#dialog").window.scrollTo(0,0);
     alert('triggered');
    });
</script>

I’ve placed the script everywhere I could think of, the index page, inside the for the dialog, inside the iframe, in the form’s page, never even got an alert.

The test server currently hosting the site is http://kinnill.com/dev/bluehydrangea/

Answer 1

Not sure which page you want to scroll to the top. The dialog box, the page the dialog box is on, or the page that is in the iframe?

After looking at your code I believe this is the one you are after:

If the dialog has a scrollable element that is already scrolled down after the iframe changes, then you will want to target whatever element has “overflow: auto”. If that element is #dialog then do this on the iframe page the form is in (which in your case looks to be form.php):

<script type="text/javascript">
  $(function(){
    $("#orderform").submit(function() {//note: in jquery the onsubmit event is called "submit"
       $('#dialog', window.parent.document).scrollTop(0);//target #dialog from the parent window
       alert('triggered');
    });
  });
</script>

Other possible solutions for reference for others:

If its the page the dialog is on then do the following:

If the form is in the iframe then the code needs to be in the iframe. You will then need to modify the code to target the parent window.

This should be what you are looking for:

<script type="text/javascript">
    $("#orderform").submit(function() {
     $(window.parent).scrollTop(0);
     alert('triggered');
    });
</script>

If the page you want to scroll is the thank you page or the error page then put the following on the thank you and error pages: (you will need jquery on the thank you and error pages)

<script type="text/javascript">
    $(function(){
       $(window).scrollTop(0);
    });
</script>