jquery .load

**ggalan** · 09-03-2010, 01:22 AM

in this example

Code:

$('#result').load('ajax/test.html');

the file "test.html" is loaded into a an element like a div with the id of "result" on your page

what if i wanted to load that same element in a pop up window, is this possible to target a div in an external html container?

**traq** · 09-03-2010, 01:50 AM

you could pass the url (test.html) via the query string used to open the pop-up, but I'm pretty sure the .load() function would have to be on the pop-up page itself.

**ggalan** · 09-03-2010, 02:13 AM

heres what i have so far but doesnt seem to work

page 1

Code:

<script>
/*function loadSomething2() {
$('#cont').load('pages/content1.htm');
}*/
function loadPopUp2() {
	var url2 = "popup2.htm"
	popupWin2 = open("", "popupWin2", "width=500,height=400" );
	popupWin2 = window.open( url2, "popupWin2", "width=500,height=400" );
	popupWin2.moveTo(600,0);
	popupWin2.loadSomething2();//  <<<<  loads here
}
</script>

<li><a href="javascript:loadPopUp2();">click</a></li>

page 2

Code:

<script type="text/javascript">
self.focus();

function loadSomething2() {
$('#cont').load('pages/content1.htm');
}
</script>
<body>
<div id="cont"></div>
</body>

**jscheuer1** · 09-03-2010, 09:16 AM

Behavior is inconsistent across browsers. In Firefox I can get it to work onload of the opened page from the opener page by setting the opened page's onload event from the opener. In IE I have to set the onload event on the opened page. That works in Firefox too, but seems less elegant than having all of the custom code on the opener. Also in IE this should be done live due to IE's restrictions on local javascript in newly opened windows.

Both browsers allowed me to run functions on the opened page from the opener page once the opened page had fully loaded.

From previous experience I'm assuming that jQuery must be on the opened page. This assumption might be false. I'll test that later.

So I came up with (note that I've put everything in the same folder for simplicity's sake) -

index.htm:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
var popupWin2;
function doit(){
	if(!popupWin2.document || !popupWin2.document.getElementById || !popupWin2.document.getElementById('cont') || !popupWin2.$){
		setTimeout(doit, 500);
		return;
	}
	popupWin2.$('#cont').load('content1.htm');
}
function loadPopUp2(url2){
	if(popupWin2 && popupWin2.open){
		popupWin2.close();
	}
	popupWin2 = open(url2, "myWin", "width=500, height=400");
	doit();
	popupWin2.moveTo(600, 0);
}
</script>
</head>
<body>
<a href="popup2.htm" onclick="loadPopUp2(this.href); return false;">create &amp; load</a><br>
<a href="#" onclick="try{popupWin2.$('#cont').load('content2.htm'); popupWin2.focus();}catch(e){} return false;">load</a>
</body>
</html>

popup2.htm:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>
popup2.htm
<div id="cont"></div>
</body>
</html>

content1.htm:

Code:

<div>
content1.htm
</div>

content2.htm:

Code:

<div>
content2.htm
</div>

Edit: Added Later:

We can put all the script code on the index page if we do it like so:

index.htm (new):

Code:

<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script> var popupWin2; function doit(){ var c; if(!popupWin2.document || !popupWin2.document.getElementById || !(c = popupWin2.document.getElementById('cont'))){ setTimeout(doit, 500); return; } $(c).load('content1.htm'); } function loadPopUp2(url2){ if(popupWin2 && popupWin2.open){ popupWin2.close(); } popupWin2 = open(url2, "myWin", "width=500, height=400"); doit(); popupWin2.moveTo(600, 0); } </script> </head> <body> <a href="popup2.htm" onclick="loadPopUp2(this.href); return false;">create & load</a><br> <a href="#" onclick="try{var c = popupWin2.document.getElementById('cont'); $(c).load('content2.htm'); popupWin2.focus();}catch(e){} return false;">load</a> </body> </html>

popup2.htm (new):

Code:

<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> popup2.htm <div id="cont"></div> </body> </html>

**ggalan** · 09-03-2010, 02:11 PM

thank you!
may i ask why my method did not work? i thought it was direct.

**jscheuer1** · 09-03-2010, 03:06 PM

Originally Posted by ggalan

thank you!
may i ask why my method did not work? i thought it was direct.

Sure. There was no:

Code:

popupWin2.loadSomething2()

yet.

I should have mentioned that. It's the reason I tried the onload property of the popupWin2 object from the index (opener) page. As I said, that worked in Firefox, not in IE.

However, even with my methods above, browsers like Opera, Chrome, and Safari do not recognize the focus() method for windows. They don't return an error, they just don't focus. Technically focus() is only for form elements and links.

Things then get a bit unworkable when you try to load content to the window after opening it the first time.

One thing you should consider is that AJAX (what jQuery.load() does) is meant to avoid the need for reloading a page. And that opening a window (which can easily be blocked by the browser) is often best replaced with a popup division. In jQuery this is done rather well by fancybox:

http://fancybox.net/

which can do images or pages, and other stuff too.

**ggalan** · 09-03-2010, 03:23 PM

i see,
but in my original code i do have a "popupWin2.loadSomething2()"
is there a way to close a box from another box?
ex: index file button that closes popup2.htm

**jscheuer1** · 09-03-2010, 04:14 PM

but in my original code i do have a "popupWin2.loadSomething2()"

Yes, but when you call it, it hasn't loaded yet, not on the popup2.htm in the popupWin2 window.

is there a way to close a box from another box?

You can close the window if you've got a reference to it and you haven't refreshed the page. In fact, I was playing with (as my index page, see highlighted, all other pages the same as from my second example before):

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
var popupWin2;
function doit(content){
	var c;
	if(!popupWin2.document || !popupWin2.document.getElementById || !(c = popupWin2.document.getElementById('cont'))){
		setTimeout(function(){doit(content);}, 500);
		return;
	}
	$(c).load(content);
}
function loadPopUp2(url2, content){
	var t = 0, l = 600;
	if(popupWin2 && popupWin2.open){
		try{
			t = typeof popupWin2.screenY === 'number'? popupWin2.screenY : typeof popupWin2.screenTop === 'number'? Math.max(0, popupWin2.screenTop - 25) : t;
			l = typeof popupWin2.screenX === 'number'? popupWin2.screenX : typeof popupWin2.screenLeft === 'number'? Math.max(0, popupWin2.screenLeft - 3) : l;
			popupWin2.close();
		} catch(e){}
	}
	popupWin2 = open(url2, 'myWin', 'top=' + t + ', left=' + l + ', width=500, height=400');
	doit(content);
}
</script>
</head>
<body>
<a href="popup2.htm" onclick="loadPopUp2(this.href, 'content1.htm'); return false;">create &amp; load content1.htm</a><br>
<a href="popup2.htm" onclick="loadPopUp2(this.href, 'content2.htm'); return false;">create &amp; load content2.htm</a>
</body>
</html>

The bit about the top and left isn't really all that important. I just figured if you popped it up, the user moved it, then you closed and reopened it, you would want it where it was, where the user had moved it to. IE was weird, and I'm not confident my solution there will scale exactly to all IE browsers. But there were other things that got tricky too and there's always the browser blocking your pop up window. Hence my earlier advice to consider a pop up division instead of a window.

**ggalan** · 09-03-2010, 06:34 PM

thank you!

Thread: jquery .load

Thread Tools

Search Thread

jquery .load

Bookmarks

Bookmarks

Posting Permissions