Jquery help

Can someone tell me why this doesn’t work.
I need this "Thanks for logging page (within a modal window) to reload the current page after the body loads. Seems fairly simple right?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<link href="/StyleSheets/ModuleStyleSheets.css" type="text/css" rel="StyleSheet" />
<link type="text/css" media="screen,projection" href="/StyleSheets/base.css" rel="stylesheet" />
<link type="text/css" media="screen,projection" href="/StyleSheets/screen.css" rel="stylesheet" />
<link rel="stylesheet" href="/CatalystStyles/Box.css" type="text/css" media="screen" />
<meta content="text/html;charset=utf-8" http-equiv="content-type" />

     <script type="text/javascript" src="/js/jquery.js"></script>

<script language=" JavaScript" ><!--
$(document).ready(function(){
	function MyReload()
		{
		window.location.reload();
		}
});
//--></script> 

</head>
<body onload="MyReload()">

<div class="system-message">
	<h1>Thanks for logging in</h1>
	<p>You will be redirected shortly and are now elidgeable for preferred customer discounts.</p>
</div><!-- END .system-message -->


</body>

user: guest
pass:admin

My web browser tells me “Uncaught ReferenceError: MyReload is not defined”

Why is that? Because the onload event is looking for a globally accessible function, but the function is trapped within the jquery document ready section.

You don’t need to use onload, since the jquery code automatically runs when the DOM is ready.

So you can get rid of the onload event and just use the document ready one.


<script type="text/javascript"]
$(document).ready(function() {
    window.location.reload();
});
</script>
<body>

But that is only going to keep on reloading the web page back to the same page. Your page says “You will be redirected shortly” so where are they being redirected to?

Did you know that you don’t need jquery or window.location to redirect a web page? A much more stable and guaranteed redirection technique is to use a meta refresh on the page instead.

Here is all that you need to redirect a page, after 5 seconds, to a new location.


<meta http-equiv="refresh" content="5;url=/index.php">

Ok this refreshes the page within the iframe. I need it to close the iframe and refresh the current page as the login modal window is on every page.

Check it now. Why doesn’t this work?

I found this article that does what I want but I don’t understand how to write this.
Can someone explain to a total beginner or write up what i need please.

iframes create complications very quickly. I think that you should put up on the web some test pages that use those iframes, and link us through to them.

The page is https://monalisachocolatier.com

username: guest
pass: admin

Try logging in. This is the live example

Not sure what you mean?

Sorry forgot to add the link
the article I found is here:

If you try and refresh the iframe, it will only be the ifram that gets refresed, not its parent.

Do you want to reload the parent instead?

Yes exactly. I assume if I can reload the page from the iframe the window will close and the page will refresh to logged in status as if I clicked the refresh button.

An iframe is not allowed to change its parents’ location.
You could experiment with things like parent.document.location.reload() but there might be trouble there too.

The way around this is for the iframe to call a parent script, which does it for you instead.
Changing parent window’s URL from IFRAME content

Ok I tried that but doesn’t seem to be working. Can you check the page and see waht is going on. I think I implemented it correctly…?

The change_parent_url function is still enclosed within the document.ready function. Remove the document.ready arapper from around that function, and you should be able to make progress from there.

Still nothing. I removed from both areas.

Yes, again, once that document.ready is gone then it should be accessible and usable. :slight_smile:

Ok I got it working thanks.

How could I delay it a few seconds so the thanks for logging page be viewable for like 3 seconds rather than closing immediately.

I was also hoping instead of loading in an absolute url setting it to reload the current page. Is this possible?

Was the document ready causing a problem because it is supposed to be a global function? Should it matter whether or not it is enclosed with document ready?

I am trying to add window.setTimeout to the function but not having any luck. Can someone check it out.

<script type="text/javascript">

var reload = parent.change_parent_url(parent.window.location);

window.setTimeout(reload, 2000);

</script>

The page does reload but the delay doesn’t seem to be working.

When you assign the parent change to the variable called reload, the function is being called straight away.

Instead, assign a function to reload, and in that function call the parent change function.


<script type="text/javascript">
var reload = function () {
    parent.change_parent_url(parent.window.location);
}
window.setTimeout(reload, 2000);
</script>

YES! It works
Thanks you so much!