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" )