I have finally started to address some of my behavioral code in an attempt to 
clean it all up and jQuerify it.... I was using the nice accordian plugin but 
since I wanted the effect to wait until my ajax response has returned before 
sliding down, I had to hack it up a bit.

I basically just took the working stuff out of the jqueryaccordian.js file. 
Here is my work in progress:

var idsource;
//this is for the accordion function:
$(document).ready(function() {
                                $("dt").click(function(){
                                        idsource = $(this).attr("id");
                                        var current = 
$(this.parentNode).find('dd:visible');
                            var next = $(this).find('+dd');
                                        $(this).find('dd').hide();
                                        $.ajax({
                                           type: "GET",
                                           url: "getItems.php",
                                           data: {cat_id: idsource},
                                           dataType: "xml",
                                           success: function(xml){
                                              //build a table from xml results.
                                              var output = 
'<table><thead><tr><th>Items Available</th></tr></thead><tbody>';
                                              //create rows for each result.
                                              $("item_id", xml).each(
                                                 function() {
                                                                var linkId = 
$(this).text();
                                                    output += '<tr>';
                                                                output += 
'<td>'+$(this).text()+'</td>';
                                                    output += '<td><a 
href="itemdetail.php?item_id='+linkId+'" 
>'+$(this).siblings().text()+'</a></td>';
                                                    output += '</tr>';
                                                 }
                                              )
                                                output += '</tbody></table>';
                                                
$('#itemtable'+idsource).html(output);
                                                if (current[0] != next[0]) {
                                        current.slideUp();
                                    } 
                                    if (next.is(':visible')) {
                                        next.slideUp();
                                    } else {
                                        next.slideDown();
                                    }
                                           }
                                        })
                                }) 
                                });

You can see it in action here: http://acldev.mine.nu:770/catalog.php

The first time one clicks one of the dt tags, it goes a little haywire. Each 
subsequent click is smooth as glass. I am guessing it has something to do with 
jQuery not seeing a "visible" dd tag at first? I have just started to look into 
it but I thought I might toss it out here.

Thanks, 
Jim


.-*** Message Scanned by Alachua County McAfee Webshield Appliance ***-.
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/

Reply via email to