Hi,
I am fairly new to jQuery, but found it has cut my dev time
tremendously, and things just work great in my prototypes, developing
on Windows Vista, using DW CS4, with my default browser set to Firefox
3.0.7.
However, on completion of a prototype, I was ready to show a client,
and thought I better run it through Internet Explorer in case I was
asked to demo it on both browsers.
That was when the headaches started!
I managed to work out most of it without too much problem, but the
following issue has got me stumped. I have reduced the code to the
smallest snippet that continues to use the code structure and design I
am trying to implement. I am open to redesign, although there are
good reasons why I am doing things as I am. However...
Basically, I am populating an unordered list via JS & jQ, using an XML
index file to locate filenames of images, which are then placed in a
container. It works like a dream in Firefox! I have posted the code
further below...
In IE7, I am told that on line 25 (photos.js), "dsp.0.filename is null
or not an object". Through debugging, it appears that "px = $
('photograph', xml).each(function()" on line 13 is not offering a list
to be traversed, so the code block of line 14 - 20 is never run, thus
failing to populate dsp wih any objects.
Can someone please explain what I am doing wrong (other than expecting
IE7 to behave like a browser), or how I can workaround this apparent
issue?
(I have posted all the relevant files below, sorry if it makes this
post a little long..)
Thanks in advance,
Charllie
"photos.js"
[code]
// JavaScript Document
var dsp = new Array(); // gallery index
var uls;
var px;
$(function() {
$.get("photos.xml", {}, function(xml)
{
var id = 0;
// populate the arrays containing the photos, for easy
reference,
from the xml index file
px = $('photograph', xml).each(function()
{
var photo = new Object();
photo.filename = $(this).find("filename").text();
photo.id = id++;
dsp.push(photo);
});
// populate the unordered lists with thumbnails
uls = $("ul[class=ulscr]").each(function()
{
var h = "<a href='javascript:selectimage();'><img
src='photos/
thumbs/" + dsp[0].filename + "' /></a>";
$(this).append(h);
});
});
});
[/code]
"photos.xml"
[code]
<photographs>
<photograph><filename>DSC_2574.JPG</
filename><datetaken>20090109211616</datetaken><height>425</
height><width>640</width><format>L</format></photograph>
<photograph><filename>DSC_2575.JPG</
filename><datetaken>20090109211951</datetaken><height>640</
height><width>425</width><format>P</format></photograph>
</photographs>
[/code]
"index.html"
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Snippet</title>
<script src="javascript/jquery-1.3.2.js"> type="text/javascript"</
script>
<script type="text/javascript" src="photos.js"></script>
</head>
<body class="twoColElsLt">
<div id="landleft" class="scroller" style="float: left;">
<ul id="ulll" class="ulscr">
</ul>
</div>
</body>
</html>
[/code]
