Almost got it only one problem now. How do I get the specific div
details that was hidden on document load to show again?
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 date = $('date',this).text();
var dayofweek = $('dayofweek',this).text();
var image = $('image',this).text();
var title = $('title',this).text();
var description = $('description',this).text();
var filename = $('filename',this).text();
var guests = $('guests',this).text();
var specialoffer =
$('specialoffer',this).text();
var specialofferproductid = $
('specialofferproductid',this).text();
var divthumbnails = '<div><h4>'+dayofweek+'</h4><p><img
src="/images/weekly_guide/'+image+'" class="today" width="105"
height="75"/></p></div>';
var divdetails = '<div
id="'+dayofweek+'"><div><h4>'+date
+'</h4></div><div><a href="/media/'+filename+'"><img src="/images/
weekly_guide/'+image+'" /></a></div><h2>'+title+'<br/><a href="/
media/'+filename+'">watch now»</a></h2><p>'+description+'</
p><h3>Todays Offers:</h3><p><ul><li><a href="/shopping/
product_detail.cfm/itemid/'+specialofferproductid+'">'+specialoffer+'</
a></li></ul></p></div>';
$('.wkguidedays').append(divthumbnails);
$('.wkguidetoday').append(divdetails).hide();
});
}
});
$('.wkguidetoday').find("[EMAIL PROTECTED]").show();
});
</script>
I am loading all the data when the document loads and appending to div
classes(".wkguidedays and .wkguidetoday"). I am then hiding the
".wkguidetoday" class after appending the divdetails variable to it.
However, I want the first of the divdetails (div id="monday"...)
within the ".weguidetoday" class to show up first;
This code is not working for me:
$('.wkguidetoday').find("[EMAIL PROTECTED]").show();
How do I get the first one to show up after initially hiding entire
".wkguidetoday" class?
Thanks!
On May 14, 6:58 pm, chillstroll <[EMAIL PROTECTED]> wrote:
> Jake,
> I will try your suggestions out tomorrow and let you know.
>
> Thanks for the detailed response..Very helpful.
>
> On May 14, 4:59 pm, "Jake McGraw" <[EMAIL PROTECTED]> wrote:
>
> > 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.- Hide quoted text -
>
> > - Show quoted text -- Hide quoted text -
>
> > - Show quoted text -
