20998

How to change an image on a site using XML data & jQuery

Question:

I have a site that has a banner at the top of the page. I've started to overhaul my HTML structure and am now getting various pieces of information that populate the site out of an XML file. My HTML that uses the jQuery is:

<script> function myExampleSite() { var myURL = window.location.href; var dashIndex = myURL.lastIndexOf("-"); var dotIndex = myURL.lastIndexOf("."); var result = myURL.substring(dashIndex + 1, dotIndex); return result; } var exampleSite = myExampleSite(); </script> <script> var root = null; $(document).ready(function () { $.get("Status_Pages.xml", function (xml) { root = $(xml).find("site[name='" + exampleSite + "']"); result = $(root).find("headerImage"); $("td#headerImage").html($(result).text()); var imageSrc=$(root).find("headerImage").text(); $(".PageHeader img").attr("src",imageSrc); result = $(root).find("version"); $("td#version").html($(result).text()); result = $(root).find("status"); $("td#status").html($(result).text()); result = $(root).find("networkNotes"); $("td#networkNotes").html($(result).text()); ....etc etc }); }); </script>

My XML file looks like this.

<sites> <site name="Template"> <headerImage>images/template-header.png</headerImage> <productVersion>[Version goes here]</productVersion> <systemStatus color="green">Normal</systemStatus> <networkNotes>System status is normal</networkNotes> </site> </sites>

I have several <site>s that all have their own data that will populate different areas of individual sites. I've ran into some snags though.

The first snag is how it currently obtains its header image: html

<div class="container"> <div class "PageHeader"> <!-- Header image read from XML file --> <img border="0" src=""/> </div>

Right now it's hard-coded to be the template header image, but I need to make that generic and read the XML value for that site. So instead of being hard-coded as images/template-header.png it would read the XML value for the current site, which is still going to be the template header - but it won't for every page.

<strong>How can I read in the image string to populate my HTML so that each site has a different image depending on what's in the XML?</strong>

Edit: Edited code to match current issue. Currently, I just get a broken image, but I can still change it back to the hard-coded image URL (images/template-header.png) and it works.

Answer1:

As you already have the code that can extract the image URL information from the XML, which is

result = $(root).find("headerImage"); $("td#headerImage").html($(result).text());

It's now a matter of attaching that URL, to the image tag. We need to select the object, and then simply change it's src attribute. With jQuery this is actually pretty easy. It'll look something like

var root = $(xml).find("site[name='" + site + "']"); //get the image url from the xml var imageSrc=$(root).find("headerImage").text() //get all the images in class .PageHeader, and change the src $(".PageHeader img").attr("src",imageSrc)

And it should work

<a href="http://jsfiddle.net/mfirdaus/Kc64p/1/" rel="nofollow">Example</a>

In conclusion, if you already have some values you want to put in HTML tags dynamically, it's pretty easy. There's .html("<b>bold</b>") for content, there's .attr("attrName","attrValue") for general attributes. .css("background","red") for changing CSS directly. There's also some class modifying stuff that would be useful in the future.

Recommend

  • PHP Sessions: Issue with back button
  • Special characters (like Ü,Ä,Ö) are not correctly displayed at runtime in case of using Template10
  • Loading image in lower quality in WP7?
  • how to copy the source src to folder using ajax
  • AngularJS Image Preview before Upload showing previous image selected
  • XAML UWP Flyout positioning
  • Firefox Cross Domain images are tainted
  • Adaptive Triggers in Resource Dictionary
  • Is it better to use the “hidden” CSS attribute or fetch each set of new images?
  • jquery code not working without breakpoint
  • Python PIL to extract number from image
  • How to open html table in xls on click of a button
  • how to get username into sql trigger when multiple users signed on from asp membership
  • Outputting SharePoint Hyperlink Column as URL
  • Uncaught TypeError: $(…).select2 is not a function
  • Disable Kendo Autocomplete
  • SAVE attribute needed for Fortran variables when only the C_LOC address is returned to a C program?
  • saving file generated by TCPDF
  • How to view images from protected folder with php?
  • Button click event not firing in jQuery
  • Chart.js Multiple dataset
  • How do I get HTML corresponding to current DOM tree?
  • Display images in Django
  • chrome.tabs.executeScript only fires when the Developer Console is open
  • d3 v4 drag and drop with TypeScript
  • Custom validator control occupying space even though display set to dynamic
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • Resize panoramic image to fixed size
  • MySQL WHERE-condition in procedure ignored
  • Change an a tag attribute in JavaScript based on screen width
  • Importing jscolor library in angular 2
  • Web-crawler for facebook in python
  • How to get icons for entities from eclipse?
  • How to delete a row from a dynamic generate table using jquery?
  • trying to dynamically update Highchart column chart but series undefined
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • JaxB to read class hierarchy
  • java string with new operator and a literal