Couple of things:
1. "this" is automatically cast to which ever context you're using it in, in
your case, since you haven't escaped any quotations, when the inline script
is run, you're operating within the context of the anchor, <a>, element so
the anchor gets passed to the getShow() function, which explains why nothing
shows.
2. Even if you had properly escaped the single quotes and included the
correct "this" when building your anchors, you would have passed an object
reference. This reference would not be properly passed when the html string
is parsed and inserted into the document. Therefore, your method of manually
building anchors and setting their "onclick" events, all in html, will not
work.
The correct way to do this would be something like:
Javascript:
// All of your code and then...
// Notice that I removed the onclick attribute from the anchor tag
var divrow = '<div><h4>'+dayofweek+'</h4><p><a href="#"><img
src="/images/weekly_guide/'+image+'"class="today" width="105"
height="75"/></a></p></div>';
// Create variable xml to prevent "this" from being overwritten in separate
context
var xml = this;
$('.wkguidedays').append(divrow).find('a:last').click(function(xml){
getShow(xml);
// Prevent memory leaks
xml = null;
// Prevent propagation
return false;
});
So, now that we are properly passing the 'xml' to getShow(), we have to
change a couple of things within that function as well. The most glaring
issue is the fact jQuery won't accept an object as a selector, which is
what you're trying to do, so you need to instead submit two arguments, in
the following form:
$("selector string",context);
The following should work:
function getShow(xml) {
$('date',xml).text();
...
}
Now, having said all of this, you may want to rethink how the whole project
is set up. It seems you're delivering a decent amount of information via
ajax, could you do this when the document loads and then hide it? For that
matter, using anchors with href="#" is not good because of event
propagation, you'll have to return false and it's semantically incorrect.
Why not bind click events to spans instead?
Hope this was helpful.
- jake
On 5/14/07, chillstroll <[EMAIL PROTECTED]> wrote:
Greeting all,
I'm sure this is quite simple; however not sure how do it. I want to
be able to get a specific xml node from the xml document using a
function call after I have initially retrieved it with jquery. Hope my
code will explain better:
XML DOC:
<?xml version="1.0" encoding="ISO-8859-1"?>
<schedule>
<show>
<date>Monday, May 14, 2007</date>
<dayofweek>Monday</dayofweek>
<image>051407.jpg</image>
<title>San Antonio Hosts Training for Ministry
Conference</title>
<description>Text Here</description>
<filename>2007-5-14.asx</filename>
<guests/>
<specialoffer>Names of God bracelet</specialoffer>
<specialofferproductid>431</specialofferproductid>
</show>
<show>
<date>Tuesday, May 15, 2007</date>
<dayofweek>Tuesday</dayofweek>
<image>051507.jpg</image>
<title>Training for Ministry Conference Impacts the Alamo
City</
title>
<description>More Text Here</description>
<filename>2007-5-15.asx</filename>
<guests/>
<specialoffer>Names of God bracelet</specialoffer>
<specialofferproductid>431</specialofferproductid>
</show>
</schedule>
JQUERY CODE:
<script type="text/javascript">
$(function() {
$.ajax({url: 'tiydschedule.xml',
type: 'GET',
dataType: 'xml',
timeout: 1000,
error: function(){
alert('Error loading XML document');
},
success: function(xml){
$('show',xml).each(function(id){
var dayofweek =
$(this).find('dayofweek').text();
var image = $(this).find('image').text();
var divrow = '<div><h4>'+dayofweek+'</h4><p><a
href="#"
onclick="getShow(this);"><img src="/images/weekly_guide/'+image+'"
class="today" width="105" height="75"/></a></p></div>';
$('.wkguidedays').append(divrow);
});
}
});
});
function getShow(xmlnode) {
// do something with xmlnode
var date = $(xmlnode).find('date').text();
var dayofweek = $(xmlnode).find('dayofweek').text();
var image = $(xmlnode).find('image').text();
var title = $(xmlnode).find('title').text();
var description = $(xmlnode).find('description').text();
var filename = $(xmlnode).find('filename').text();
var guests = $(xmlnode).find('guests').text();
var specialoffer = $(xmlnode).find('specialoffer').text();
var specialofferproductid = $
(xmlnode).find('specialofferproductid').text();
alert(title);
}
</script>
The first part works fine; however the call to the getShow(xmlnode)
function which I want to receive the passed xml node does not work.
I'm appending <a href="#" onclick="getShow(this);"> to the divrow
variable as I initially loop thru the xmlnodes. Nothing shows up on
the alert.
Is there a simpler way to do this? I am on the right track? Thanks for
the help.
