Solved

jQuery to Add Image from XML File

Posted on 2014-02-26
5
338 Views
Last Modified: 2014-03-29
I've just about got this working (with the help of others here).  I'm new at using jQuery so please be patient.  Here's what I'm trying to do.

I have the URL for three images within <image> tags in my XML file (attached).  I now want to use jQuery to insert these images into my HTML page.  I know I need to set both the 'class' and the 'src' attributes in here somewhere but I can't quite manage to make it work.  I know the jQuery in my .js file (attached) is wrong however it works fine until it gets to inserting the images. Any help?  Thanks!
pbkpluscom-jquerytest.html
pbkpluscom-jquerytest.xml
pbkpluscom-jquerytest.css
pbkpluscom-jquerytest.js
0
Comment
Question by:penlandt
  • 3
5 Comments
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 39891277
you're Ajax call needs to be inside the $(function() ...) otherwise the elements may not exist yet.

$(function() {
	$('h1').addClass('standout');


$.ajax({
	type: "GET",
	url: "http://www.pbkplus.com/home/pbkpluscom_jquerytest.xml",
	dataType: "xml",
	success: function(xml) {
		$(xml).find('story').each(function(){
			$('<h2>').html( $('headline', this).html() ).appendTo('content');
			$('<p>').html( $('content', this).html() ).appendTo('content');
			$('<img class='imgfloatr'>').html( $('image', this).html() ).appendTo('content');
			});
	}
});
});

Open in new window

0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39891291
more specifically this line, which has another issue you should be aware of. You should use double quotes to encapsulate the entire string and single quotes for strings within a string. if you only use the one type you'll run into problems as the system won't knew where a string starts and ends.

$('<img class='imgfloatr'>').html( $('image', this).html() ).appendTo('content');

needs to be

$("<img class='imgfloatr' src='+$('image', this).html() +'>").appendTo('content');
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39891297
the .appendTo should reference an element but you've specified "content", which I can only find in the xml. this should be an element in your html, not the xml, such as "body"out another element such as a div with an ID. e.g. .appendTo("div#idhere")
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Many times as a report developer I've been asked to display normalized data such as three rows with values Jack, Joe, and Bob as a single comma-separated string such as 'Jack, Joe, Bob', and vice versa.  Here's how to do it. 
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question