XML : Updating html div with xml content through jquery

Please Help!!! I have banging my head against a cheese grater for awhile now on this. I have a component for my website to add a news ticker that is working with the divs hardcoded in the html

working news ticker without xml http://jsfiddle.net/17h0wa28/4/

I am looking to update this so that the content can be updated by a user without the need or fear of changing the html by having an xml file the div's requires one to have a class of active to show on the ticker

  <div class="newsTicker active">Latest News updates/ticker 1</div>  <div class="newsTicker">Latest News updates/ticker 2</div>  ect....    

I have tried several different methods and attacks but non seem to be working correctly giving errors all over the place and/or no output on the html page

XML file

  <?xml version="1.0" encoding="UTF-8"?>  <NEWSFEED>        <STATUS>          <UPDATE>Latest News updates/ticker 1</UPDATE>      </STATUS>        <STATUS>          <UPDATE>Latest News updates/ticker 2</UPDATE>      </STATUS>        <STATUS>          <UPDATE>Latest News updates/ticker 3</UPDATE>      </STATUS>        <STATUS>          <UPDATE>Latest News updates/ticker 4</UPDATE>      </STATUS>    </NEWSFEED>    

code for html/xml update(newsFeed.xml)

  $(document).ready(function () {    var xmlhttp = new XMLHttpRequest();    xmlhttp.onreadystatechange = function() {      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {          myFunction(xmlhttp);      };    xmlhttp.open("GET", "newsFeed.xml", true);  xmlhttp.send();    };    function myFunction(xmlhttp, test) {        var x, i, xmlDoc, feed;        xmlDoc = xml.responseXML;      feed = "";      x = xmlDoc.getElementsByTagName("UPDATE");        for (i = 0; i< x.length; i++) {          feed += x[i].childNodes[0].nodeValue;      }        document.getElementByClassName("newsContent").innerHTML = '<div class="newsTicker">' + feed + '</div>';  }    });    

No comments:

Post a Comment