Advanced Search

Results 1 to 9 of 9

Thread: jquery .load

  1. #1
    Join Date
    Jan 2008
    Posts
    441
    Thanks
    67
    Thanked 4 Times in 4 Posts

    Default jquery .load

    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?

  2. #2
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,623
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    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.
    We Only Torture the Folks We Don't Like (You're Probably Gonna Be Okay)
    It's a Party in the CIA

  3. #3
    Join Date
    Jan 2008
    Posts
    441
    Thanks
    67
    Thanked 4 Times in 4 Posts

    Default

    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>

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,127 Times in 3,093 Posts
    Blog Entries
    12

    Default

    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 &amp; 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>
    Last edited by jscheuer1; 09-03-2010 at 12:03 PM. Reason: found method to remove jQuery from popup2.htm
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jan 2008
    Posts
    441
    Thanks
    67
    Thanked 4 Times in 4 Posts

    Default

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

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,127 Times in 3,093 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by ggalan View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jan 2008
    Posts
    441
    Thanks
    67
    Thanked 4 Times in 4 Posts

    Default

    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

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,127 Times in 3,093 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Jan 2008
    Posts
    441
    Thanks
    67
    Thanked 4 Times in 4 Posts

    Default

    thank you!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •