javascript - Finding an object in an XML database, feeding it's info to relevant DOM elements -
apologies if title not make sense; i'm little new , not sure smartest way phrase is.
i have page has row of movie posters @ top. clicking 1 of them should:
- open xml file ajax
- find object in xml file same name movie poster clicked
- populate "template" in page, using movie info found within xml object
here example snippet of xml:
<movies> <movie name="se7en"> <title>se7en</title> <quote>ernest hemingway once wrote;<br>“the world fine place , worth fighting for.”<br>i agree second part.</quote> <showing>aug 28, 3:45pm</showing> <rating>r</rating> <year>1995</year> <length>127 minutes</length> <genre>thirller</genre> <staring1>brad pitt</staring1> <staring2>morgan freeman</staring2> <staring3>gwyneth paltrow</staring3> <staring4></staring4> <slogan>7 deadly sins. 7 ways die.</slogan> <synopsis><p>set in hellish vision of new york-like city, raining , air crackles impending death, film concerns detective william somerset (morgan freeman), homicide specialist 1 week well-deserved retirement.</p><p>but somerset’s retirement must wait 1 last case, teamed young hotshot david mills (brad pitt), fiery detective set replace him @ end of week. mills has talked reluctant wife, tracy (gwyneth paltrow), moving big city can tackle important cases, first , somerset’s last more either man has bargained for. diabolical serial killer staging grisly murders, choosing victims representing 7 deadly sins. somerset refuses take case, realizing there 5 more murders, ghastly sermons lust, sloth, pride, wrath, , envy presented madman sinful world. within him cannot let case go, forcing weary detective team mills , see case unspeakably horrible conclusion.</p></synopsis> </movie> <movie name="thegame"> <title>the game</title> <quote>foobar</quote> <showing>foobar</showing> <rating>foobar</rating> <year>foobar</year> <length>foobar</length> <genre>foobar</genre> <staring1>foobar</staring1> <staring2>foobar</staring2> <staring3>foobar</staring3> <staring4>foobar</staring4> <slogan>foobar</slogan> <synopsis>foobar</synopsis> </movie> </movies>
so, when clicking on movie poster "se7en", need find movie object name of "se7en" in xml document. take content of <title>
tags under "se7en" object, , put relevant dom element. then, take content of <quote>
tags under "se7en" object, , put relevant dom element, etc, etc.
so, setup ajax request via
var nospace = $(this).attr('data-title').replace(/\w/g,'').tolowercase(); var moviereq = new xmlhttprequest(); moviereq.open("get","movies.xml?m="+nospace,true); moviereq.send(); moviexml = moviereq.responsexml;
(nospace
movie poster's name searching xml relevant <movie>
object for)
but then, how search moviexml <movie name=nospace>
, pull it's information?
as mentioned, i've never done xmlhttprequest before, , having trouble understanding how works. there better way accomplish overall task i'm trying do? should using json instead of xml? have no idea how best done.
i have experience loading divs html document using
$('#xyz').load('foo.html #bar');
, i'm not sure if applies in anyway i'm doing here.
Comments
Post a Comment