So I'm creating a TV Guide with many listings spanning over a week. The information for these listings is stored in an XML file. When I click on a listing in the guide. e.g. Home Alone or The Big Lebowski a drop-down appears with information on that particular listing. I use the one dropdown for each Channel but the content that is generated in the dropdown needs to be appended from the xml file.
Here is my code so far:
HTML
<li class="listings-channel-row"> <a href="#" class="listings-program bbcone toggle-bbcone borderBottom">Home Alone</a> <li class="listings-details-row collapse-bbcone"> <div class="listings-details-container clearfix "> <div class="listings-load"><p>loading...</p></div> <div class="listings-error"><p>There was an error</p></div> <div class="listings-details-content"> <!-- CONTENT GETS APPENDED HERE --> </div> </div> </li>
JQUERY:
$(document).ready(function() {
$.ajax({ type: "GET", url: "listings.xml", dataType: "xml", success: xmlParser, error: function() { $('.listings-error').fadeIn(); } }); });
function xmlParser(xml) { $('.listings-load').fadeOut(); $(xml).find("listing").each(function(){ $(".listings-details-content").append('<div class="listings-details-image"><img src="images/' + $(this).find("image").text() + '" alt="' + $(this).find("title").text() + '" ></div><div class="listings-details-text"><h3 class="listings-details-title">' + $(this).find("title").text() + '<span class="year">(' + $(this).find("release-year").text() + ')</span><span class="title-details">' + $(this).find("runtime").text() + ' minutes on <span class="bbcone-colour">' + $(this).find("channel").text() + '</span></h3><p>'+ $(this).find("description").text() + '</p></div>');
}); }
So all its doing currently is finding every listing and appending this. My question is: How do I only find and append the xml data that is only relevant to the listing that I clicked on? Something like, if <listing id="home-alone"> is equal to <a id ="home-alone"></a> then append this data??
No comments:
Post a Comment