CODEWITHSUNDEEP
javascriptajax
Sergio Pisoni
Sergio Pisoni

Reputation: 107

Load specific element from another page with vanilla js

I've this function to make an ajax request: I want to replace content in

var dialog_body = document.querySelector('#dialog .body')

in page1.php with the content of

page2.php#load

that is located in

var href = 'page2.php'

.......

function load(div_where_change, url) {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        div_where_change.innerHTML=xmlhttp.responseText;
    }
}
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
}

load(dialog_body, ref+'#load');

And It doesn't work.. My final process is similar to jquery load, but I wanna use only vanilla js and I've not found any documentation or article for load only one element of another page, but only full page load......

Please help me..

Upvotes: 3

Views: 4756

Answers (1)

dandavis
dandavis

Reputation: 16726

function getPage(url, from, to) {
    var cached=sessionStorage[url];
    if(!from){from="body";} // default to grabbing body tag
    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
    if(cached){return to.innerHTML=cached;} // cache responses for instant re-use re-use

    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:

getPage(
  URL :    Location of remote resource , 
  FROM : CSS selector of source tag on remote page , 
  TO:      CSS selector of destination tag
)

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/forumdisplay.php?f=2&order=desc&page=2

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:

  getPage("/forumdisplay.php?f=2&order=desc&page=2",
   "#inlinemodform" );

EX 2. (defaults) replace this whole page with another post :

  getPage("http://www.codingforums.com/showthread.php?t=281163")

EX 3. (external content) inject event listings from UIUC into the current page:

getPage("//www.it.illinois.edu/news/", ".list.events.vcard.clearfix", ".tcat" )

one difference from $.load() is that script tags on the remote page are not executed, which i rather like. Prototype.js has a good script-tag-finding regexp that you can use to eval inline scripts, and you can re-add the urls of any .src-based scripts if you need all that functionality. I also cache the fetch in sessionStorage, so if your external content rotates or updates, use a random query param or remove the sessionStorage check by changing the 2nd line to var cached="";

EDIT: fixed a really dumb bug i created when renaming the variables for public readability; forgetting one.

Upvotes: 5

Related Questions