Saturday, 15 January 2011

javascript - using JQuery to fetch an html document and parse it into a DOM tree -



javascript - using JQuery to fetch an html document and parse it into a DOM tree -

so i'm trying build own version of github's tree slider. relevant javascript/jquery code is:

// handles clicking link move through tree $('#slider a').click(function() { history.pushstate({ path: this.path }, '', this.href) // alter url in browser using html5 history module $.get(this.href, function(data) { $('#slider').slideto(data) // handle page transition, preventing total page reloads }) homecoming false }) // binds hitting button in browser prevent total page reloads $(window).bind('popstate', function() { $('#slider').slideto(location.pathname) }

ok, that's understandable. here's interpretation of what's going on here, followed problem/issue:

the callback function request when navigating through tree slideto method, , html string passed in argument function. i'm assuming slideto function defined elsewhere in script or in custom library, can't find in jquery documentation. so, purposes, i'm trying build own version of function. argument passed function, "data", string of html returned request. however, isn't snippet of html can append div in document, because if perform same request (e.g. typing url web browser) expect see whole webpage , not piece of one.

so, within callback function defining, need parse "data" argument dom can extract relevant nodes , perform animated transition. however, doesn't create sense me. seems bad idea. doesn't create sense client have parse whole string of html access part of dom. github claims method faster total page reload. if interpretation correct, client still has parse total string of html whether navigating through tree clicking (and running callback function) or doing total page loads such typing new url in browser. i'm stuck either parsing returned html string dom, or ideally fetching part of html document.

is there way load fetched document javascript or jquery dom object can manipulate it? or better, there way fetch element arbitrary id without doing crazy server-side stuff (which tried ended beingness spaghetti code , hard maintain)?

i've tried parsing info argument jquery object, involved roundabout solution seems work half time, using javascript methods strip html of unwanted things, doctype declarations , head tags:

var d = document.createelement('html'); d.innerhtml = data; body = div.getelementsbytagname("body")[0].innerhtml; var newdom = $(body); // have jquery dom context can use, // reason doesn't seem work quite right

how approach problem? when write code myself , seek create work on own, sense no matter do, i'm doing horribly inefficient , hacky.

is there way homecoming jquery dom object request? or better, homecoming part of document fetched request?

just wrap it; jquery parse it.

$(data) // in callback

javascript jquery dom

No comments:

Post a Comment