Go Back   CodingForums.com > :: Client side development > JavaScript programming > Post a JavaScript

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 01-29-2013, 01:02 AM   PM User | #1
rnd me
Senior Coder

 
rnd me's Avatar
 
Join Date: Jun 2007
Location: Urbana
Posts: 3,452
Thanks: 9
Thanked 466 Times in 450 Posts
rnd me is a jewel in the roughrnd me is a jewel in the roughrnd me is a jewel in the rough
Getting info from another page using ajax

One question i see on here a lot is "how do i pull a div on a different page into the current page?"

The responses are often complex or they pass the buck: try using jQuery, use PHP, use a CMS, double-code both divs, etc...

I didn't like any of those answers, and knew it couldn't be that difficult to do with a tiny bit of javascript. There really is no short answer, until now.


Code:
function getPage(url, from, to) {
	var cached=sessionStorage[url];
   	if(!from){from="body";} // default to grabbing body tag
	if(cached){return elm.innerHTML=cached;} // cache responses for instant re-use re-use
	if(to && to.split){to=document.querySelector(to);} // a string TO turns into an element
	if(!to){to=document.querySelector(from);} // default re-using the source elm as the target elm

	var XHRt = new XMLHttpRequest; // new ajax
	XHRt.responseType='document';  // ajax2 context and onload() event
	XHRt.onload= function() { sessionStorage[url]=to.innerHTML= XHRt.response.querySelector(from).innerHTML;};
	XHRt.open("GET", url, true);
	XHRt.send();
	return XHRt;
}

ARGUMENTS:
Code:
getPage(
  URL :    Location of remote resource , 
  FROM : CSS selector of source tag on remote page , 
  TO:      CSS selector of destination tag
)
the source defaults to "body" if the from CSS selector is not specified, and the to CSS selector defaults to the from value if not specified.

Example uses:

EX 1. (typical use) virtually grab the next page:
when on http://www.codingforums.com/forumdisplay.php?f=2
show table from http://www.codingforums.com/forumdis...er=desc&page=2

Code:
getPage("/forumdisplay.php?f=2&order=desc&page=2",
  "#inlinemodform", 
  "#inlinemodform" );
notice how "#inlinemodform" is repeated? It's moving the same block to the same block on another page.
You can omit the 2nd CSS selector when it's a duplicate, so the following is 100% equivalent to the above:
Code:
getPage("/forumdisplay.php?f=2&order=desc&page=2",
  "#inlinemodform" );


EX 2. (defaults) replace this whole page with another post i wrote a while back:
Code:
getPage("http://www.codingforums.com/showthread.php?t=281163")

EX 3. (external content) inject event listings from UIUC into the current page:
Code:
getPage("//www.it.illinois.edu/news/", ".list.events.vcard.clearfix", ".tcat" )
__________________
my site (updated 5/13)
STATS (2013/5) HTML5:90.2% MOB:14% IE7:0.5% IE8:8.8% IE9:11.4% IE10:6.5%
rnd me is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 02:04 AM.


Advertisement
Log in to turn off these ads.