I need to click on a list item to replace text in a div with text from a node in an xml file.
I click on a list item and store the result in a variable. I then load the xml, find the title of the node I need, and make a variable of the result. I then run an if statement that if the two variables are equal, to put the xml in a div.
The first time I click on a list item, this works. The correct item in the list is matched with the correct node in the xml and the correct text is placed in the div.
But when I then click on a different list item, the text is not replaced. An alert shows that the second click got the right information, but in the end, the div content is not replaced.
Demo here: http://mwebphoto.com/mwebphoto/html/3rdJqueryPage.html
Code here:
<body>
<div class="slideshowContainer">
<div id="slideshow"></div>
</div>
<ul id="gallery_id">
<li id="newYork">New York</li>
<li id="disconnection">Disconnexion</li>
<li id="jackAtSea">Jack at Sea</li>
</ul>
<script>
$(document).ready(function(){
$("#gallery_id li").on('click', function(e) {
var htmlTitle = (this.id);
$.ajax({
type: "GET",
url: "/mwebphoto/xml/albums.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('photoAlbum').each(function(){
var xmlAlbum= $(this);
var xmlTitle = $(this).find('title').text();
var xmlEmbedCode = $(this).find('embedCode').text();
alert ('this is html titled ' + htmlTitle);
alert ('this is xml titled ' + xmlTitle);
if(xmlTitle=htmlTitle)
alert ('this is matched xml title' + xmlTitle);
$("#slideshow").replaceWith(xmlTitle);
});
}
});
});
});
</script>
</body>
Help is appreciated. I don't ask lightly. I've spent many hours at this and researched it every way I can think of. figure I'm missing something very simple, but just can't find it.