jQuery Forum

Ok, I have a flowplayer (version 3.2.9) that works correctly between anchor links and the player div when a dialog is not involved. When I stick a dialog and attach the opening of it to a click of the anchor link from the Flowplayer, the correct video plays. But the 'rub' comes when the dialog is closed or hidden and then I try and a video again, I get the video that is hard-coded in the html page to play not the one from the click (that just worked).

Ok.  Someone set me straight.

I have a index.html page at (serco-hrc.com/crseCatalog/index.html) that contains my site header, footer and horizontal/vertical navigation stuff.  Upon client side rendering, jQuery (script link in the html to a file called script/operations.js) goes out and gets indexContent.html and puts it in a div (#content).  On this 'imported' page or html fragment, I have a simple RSS reader.

Why do I need to put the jQuery 'call' inside the html fragment file??  Why can I not do the ALL site scripting  in operations.js file, which is my 'master' jQuery call file.

I know, for anything that is a user can click in the imported pages, I can use something like ".on" --

1. $('#fullDescript').on('click', '#registerLink', function() {
2.         $('#registerLink').attr('target', '_blank');
3.     });

This works like a charm.  But for things that I wish to happen automatically when I pull in different html fragments, I seem to have a disconnect.  Like hiding a button based on length of a div within that imported html fragment.

Visual rep:  Click on the Course Catalog.  Click on Ammo-04.  If there was a stated class schedule, the fragment would have a div named #offerings.  But since it does not, I need to hide the #registerLink button at the top of the page automatically.  When I insert the following script at the bottom of the imported html fragment, the button hides like one would expect.

1. if ($('#offerings').length) {
2.         alert ('I have a class schedule table');
3.         /*$('#registerLink').hide();*/
4.     };

But I would like to put this script within my operations.js file.



I have other issues stemming from this unhooked/unbinded type of problem.  So if I solve this, I can apply the same idea or thinking to my other problems.

Tony

It is not the job you get handed, but what you have done with it in the end that people remember.

Ok, fix 2 things uncover 2 more that don't work.

I have a row of big buttons (with images) on the main page.  Clicking on any of these buttons, works correctly.  Then click home button (from either horizontal or vertical menus).  After clicking on the home button, the big buttons no longer respond to the mouse click.  Why is jquery disconnecting from these big buttons on supplemental clicks??

online sample of whole site is here.

Big Button code:

1. <div id='bigButtons'>
2.       <div class='image' id='classroom'>
3.             <a href='#'><img src='media/Classroom.png' title='Classroom Training' alt='Classroom Training' /></a>
4.             <p class='caption'>Classroom Training</p>
5.       </div>
6.       <div class='image' id='dlTrng'>
7.             <a href='#'><img src='media/Virtual.png' title='Online Training' alt='Online Training' /></a>
8.             <p class='caption'>Online Training</p>
9.       </div>
10.       <div class='image' id='crseCat'>
11.             <a href='#'><img src='media/Catalog.png' title='Course Catalog' alt='Course Catalog' /></a>
12.             <p class='caption'>Course Catalog</p>
13.       </div>
14.       .......
15. </div>

And here is the code that is controlling the those big buttons:

1. $('#bigButtons div').on("click", function(event) {
2.         var itemVar = $(this).attr('id');
3.         event.preventDefault();
4.         /*$('#content').empty();*/
5.         switch(itemVar) {
6.             /*case 'classroom' : alert('you clicked' + $(this).attr('id')); break;*/
7.             case 'classroom' : $('#content').load('classroom.html'); break;
8.             case 'dlTrng' : $('#content').load('online.html'); break;
9.             case 'crseCat' : $('#content').load('crseCat.html'); break;
10.             case 'internTrng' : $('#content').load('onboard.html'); break;
11.             case 'navyTrng' : $('#content').load('navyTraining.html'); break;
12.             case 'siteFAQ' : $('#content').load('siteFAQ.html'); break;
13.         };
14.     });

So where am I loosing my jquery script??

Tony

It is not the job you get handed, but what you have done with it in the end that people remember.

I have a vertical menu (100% css) where the click events are driven by jquery.  On the items that have no submenus, the menu works good.  But on items that have submenus and when the user clicks on one of the submenu items, the content loads into the specified div but then the old content comes back into view.

Here is the code:

1. $('#vmenu li').on("click", function(event) {
2.         var itemVar = $(this).attr('class');
3.         event.preventDefault();
4.        
5.         switch(itemVar) {
6.             case 'mainHome' : $('#content').empty().load('indexContent.html'); break;
7.             case 'classroom' : $('#content').empty().load('classroom.html'); break;
8.             case 'dlTrng' : $('#content').empty().load('online.html'); break;
9.             case 'mobileApp' : $('#content').empty().load('mobileApp.html'); break;
10.             case 'crseCat' : $('#content').empty().load('crseCat.html'); break;
11.             case 'internTrng' : $('#content').empty().load('onboard.html'); break;
12.             case 'dacOrg' : $('#content').empty().load('DACorg.html'); break;
13.             case 'baseAct' : $('#content').empty().load('BASEactivity.html'); break;
14.             ....
15.             };
16. });

For example, a user uses the left navigation menu to nav: "Intern On-boarding -> Program Requirements -> Who Joins?" firebug shows that the file "onboard.html" is being pulled in and put in the content div.  But according to my operations.js, "whoJoins.html" should be pulled in and displayed in the content div. "onboard.html" is the correct file if someone would be clicking on the Intern Onboarding menu item and not any submenu item.


Any insight would be helpful.  I am using jQuery 1.7.1, xhtml1.0 (strict) and targeting IE8 and IE9. But I am trying to keep it so that it works in Chrome and FF11.
Here is the testing location to see what it is doing. 

Tony
It is not the job you get handed, but what you have done with it in the end that people remember.

I thought I had this problem licked.  My script only runs when the DL class has more than 0 objects.  Then when a dt is clicked, it shows the sibling DD.  But I can not get it to reverse its action.  Somewhere my script is confused.  Can someone point out my newbie mistake??  It has to be something really simple that I am overlooking.  Page where I am using it is at http://www.serco-hrc.com/crseCatalog/AmmoManPoS.html.

1. if ($('.accordion').length > 0) {
           $('.accordion dd').hide();
          
           $('.accordion dt').click(function () {
   
               var sel = $(this);
               sel.addClass("act current");
               sel.parent().children('dd').each(function() {
   
                   if($(this).is(":visible") && !$(this).prev("dt").hasClass("current")) {
                           if ($(this).prev("dt").hasClass("act")) {
                               $(this).prev("dt").removeClass("act");
                           }
                           $(this).slideUp(300);
                       }
                   });
   
                   sel.next().slideToggle(300, function() {
                       if (!$(this).is(":visibile")) {
                           $(this).prev("dt").removeClass("act");
                       }
                       sel.removeClass("current");
                   });
                   return false;           
           });
       };
   

It is not the job you get handed, but what you have done with it in the end that people remember.

Ok.  I have been searching for a couple of days for previous development of a script that will compare two xml files against each other.  But have come up short handed.  I take it that full file comparison is not done normally within the web world.  I have seen craterfulls of applications for the 'desktop', but none for the web world.

Is there a way to let prettyPhoto display something to a website user that prettyPhoto is still waiting on the complete file to download??? I have several .swf and .mov files that are over 2Mb big. Wouldn't normally be a problem, but my users could be accessing the website from a very small 'pipe' (ie. less than 56k modem speeds). I would like to give users some indication that website is not froze, only waiting on resource to finish downloading. (jQuery 1.4.4/UI 1.8.6/pp 3.0.1)

I posted this on no-margin-for-errors.com forum (prettyPhoto owner), but I would like to see what a larger audience might have to say or offer.

Tony

It is not the job you get handed, but what you have done with it in the end that people remember.

OK, I finally have a working web application of a static xml (data resource), jqGrid and prettyPhoto and one w3c validated html file.

but I have been asked to make a 'proof of concept' for mobile devices (when no internet connectivity is present).  my application works just fine when I use any browser other than IE.  When I run my application in IE, I get no data coming into the jqGrid plug-in.  Is there something that I am missing when working with IE??  Or am I dealing with a IE only problem???

Tony

online application is at: http://www.serco-hrc.com/testMe/index.html.  This works fine whether the browser goes out to the internet to get everything or store it all on the local hard-drive and run it in anything but IE.  IE works fine as long as it can access the internet but not from local hard-drive.

It is not the job you get handed, but what you have done with it in the end that people remember.

I am working with a webapp that contains jqGrid and prettyPhoto plugins.

First round with selecting a row from the grid which fills specified divs with information works correctly.  Pics and animations play as intended.

But if my user would select another size of munitions (clicking on another menu drop-down) which would create a new jqGrid with new data.  This is where I am having problems.  In my onSelectRow sequences of jqGrid, I check for the presence of children on a certain div.  If children are found, I am trying to kill the old 'data' and reinsert the new data.  But my operation is killing my link to the prettyPhoto.

I have tried remove() and then appending new sequence to the div, replaceWith() and selecting all the 'li' from the div, and the replace().  But something is interrupting the prettyPhoto interaction upon a second row selection from jqGrid.

What am I doing wrong??  Willing to learn new tricks.

  This is line #998 from my attachment:

1. if (jQuery('#slideshow').children().length > 0) {  // previous build of prettyPhoto sequence has happened.
                           $('#slideshow').children().remove();
                           $('<ul class="clearfix"></ul>').append(data.picsequence).appendTo('#slideshow');
                       } else {
                           $('<ul class="clearfix tabArea"></ul>').append(data.picsequence).appendTo('#slideshow');  // this would be the first time around -- which always works.
                       }
   

My online testing area is here.  Here is the user sequence --  Click on 22 cal menu option under Small Arms.  Click a row (ie. A085).  Verify that prettyPhoto is working by clicking on Multimedia and then Slideshow.  Click the 'thumbnail'.  Should result in a nice smooth animation.  Now click on the same 22 cal menu option again from Small Arms.  Select a different row (ie A086).  This time when the user would click on the thumbnail in the Multimedia > Slideshow area, the resulting action just brings up the picture in a new browser window.

jQuery 1.4.4/jQuery-UI 1.8.6

Tony
Sorry to be long winded, but it gets my exact problem across.
It is not the job you get handed, but what you have done with it in the end that people remember.

Ok, I have a jqGrid plug-in that goes out and gets a static xml file from web and then pushes data within certain nodes to specific divs/html elements.  I also am running a prettyPhoto plug-in that dynamically develops a slideshow.  Within jqGrid onSelectRow option, I have

1. $(data.picsequence).wrap("<ul class='clearfix tabArea'></ul>").appendTo('#slideshow');

   This wrap is what does not work.  What am I doing wrong???  Firebug shows the div slideshow and then directly under it the li element.  NO ul element inbetween. 

    The column model of my jqGrid is:

1. {name:"picsequence",index:"picsequence", xmlmap:"itemMedia>itemPhoto>sequence", width:0, hidden: true},
   

    And a sample of the specific xml file node in question would be something like:

1. <itemMedia>
               <itemPhoto>
                   <sequence>
                       <![CDATA[<li><a href="weaponLib/stillMedia/images/a085.jpg" rel="prettyPhoto" title="A085 Dummy Round"><img src="weaponLib/stillMedia/thumbnails/a085.png" width="160" height="120" alt="" /></a></li>]]>
                   </sequence>
               </itemPhoto>
           </itemMedia>
   

My script works if I do it the long way and hard code the 'ul' tag into the html.  But I was trying to use jquery to tweek my 'li' and give it a 'ul' wrap dynamically and get rid of the hard coded 'ul' element in the html.

Any help would be greatly appreciated.  I don't have much more hair to pull out.

And before you ask, I have also tried a wrapAll() function as from examples in the jQuery documentation.  I have several nodes in other xml files that have multiple li sequences to develop several pics to site visitor.


Tony
It is not the job you get handed, but what you have done with it in the end that people remember.

Ok, I am lost.  Well... confused.

I have been trying to upgrade from 1.8.2 to 1.8.4 for jquery ui.  But I have been having problems trying to get the jquery-ui-1.8.4.custom.css that is within the theme folder to validate.  I don't know if it is Dreamweaver or something new that I am seeing.  UI 1.8.2 never had this problem.  I have my validator set so that it will look for errors against xhtml version 1.0 transitional rules.  This should encompass all the old html 4.0 rules.  When run, it finds the quote error dealing with line 16:

1. .ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
   

I believe this is a IE fix.

It also keys on line 53 with the & in the themeroller section.  It suggests that I change all the & to &amp;

any suggestions?

Tony
It is not the job you get handed, but what you have done with it in the end that people remember.

I am running into what seems to be javascript conflicts. I have a web application that uses jqGrid to recover static xml file data and then upon an user's row select, put specific data found in the xml nodes into specified divs or ids within the DOM.  When the user clicks on of the thumbnails (generated by 'a' and 'img' tags put into the DOM), prettyPhoto is supposed to go out and get the larger image and display it in a modal dialogue box.  But my application is just displaying that larger image in a brand new browser window.  I have narrowed down the two offending plugins to the ones named in the subject line.  I have already tried moving the placement of both javascript and accompaning CSS files around.  I have even tried moving the jQuery line that calls either application around.  But I get no good results.  How do I find out where in either application am I getting my conflict????

saw somewhere on the net that prettyPhoto sometimes has issues with other plugins where a (".") is used. I modified where I found it and still no change. Help!!

I am testing with IE 7/8 and FF 3.6.8, all on a windows XP machines. jQuery 1.4.2 with UI version 1.8.  jqGrid version 3.7.2 and prettyPhoto version 2.5.6

I have put both examples up on a website:

- A prettyPhoto example that works is here. This is an example that has the image data hard coded into the html. But it also has all the jquery plug-ins installed into the head section of html.

- My application is here.  This one is broke. I thought I might be having a conflict between my security notice (dialog/modal box) and your plugin. But I have my modal dialog box commented out of my javascript, so that the text appears at the bottom of the screen. To see what I am seeing, do the following:
– Click on the Small Arms menu item.
– Click on the A085 data row that will appear. This will feed static xml data into a tabbed type of display.
– Click on the Multimedia/Photos tab. This is where my photos and photo groups/galleries will appear. Currently this selected row only contains one photo. I tried to keep it simple until I work the main bugs out.
– If you click on the 'thumbnail', the application (and prettyPhoto plugin) acts wrong and opens the main image into a new IE window.

What am I doing wrong???
r/
Tony

It is not the job you get handed, but what you have done with it in the end that people remember.

I have a grid that is being displayed with data that comes from a static xml file.  I need to conditionally display a div in response to whether data is present at a particular xml node.  Is there a way to do this via jQuery??  I have tried doing it via straight js, but all I end up doing is permanently hiding the div I am messing with.

if data within the xml node is present - display the div.  If no data is present in the xml node - hide the div.

But my code below permanently hides the div.  Help.

1. onSelectRow: function() {
                   var gsr = $('#searchResults').jqGrid('getGridParam', 'selrow');
                   if (gsr) {
                       var data = $('#searchResults').jqGrid('getRowData', gsr);
                       $('#basicMun #dodic').append('DODIC:  ' + data.dodic);
                       $('#basicMun #title').append('Nomenclature:  ' + data.nomenclature);
                       $('#basicMun #purpose').append('Use:  ' + data.purpose);
                       $('#basicMun #description').append('Description:  ' + data.description);
                      
                       if ($(data.olValue.length < 1)) {
                           $('#basicMun #objLength').hide();}
                           else {$('#basicMun #objLength').append('Length:  ' + data.olValue + ' ' + data.olUnit);
                           };
                        $('#basicMun #objWidth').append('Width:  ' + data.objWidthvalue + ' ' + data.objWidthunit);
   
   

        .... script continues on with placing data from xml nodes into specified divs for display to user.

I have tried my if/else statement both ways with less than 1 and then greater than 0 for the conditional.  I have verified that there is data within the node and is being reported in firebug.


It is not the job you get handed, but what you have done with it in the end that people remember.

It is not the job you get handed, but what you have done with it in the end that people remember.

1. <sequence>       <a class="vlightbox" href="weaponLib/stillMedia/images/a106.jpg" title="A106"><img src="weaponLib/stillMedia/thumbnails/a106.jpg" alt="A106"/>A106</a>       <a class="vlightbox" href="weaponLib/stillMedia/images/a106_2d_a.jpg" title="A106_2D_A"><img src="weaponLib/stillMedia/thumbnails/a106_2d_a.jpg" alt="A106_2D_A"/>A106_2D_A</a>       <a class="vlightbox" href="weaponLib/stillMedia/images/a106_2d_b.jpg" title="A106_2D_B"><img src="weaponLib/stillMedia/thumbnails/a106_2d_b.jpg" alt="A106_2D_B"/>A106_2D_B</a>       <a class="vlightbox" href="weaponLib/stillMedia/images/a106_2d_c.jpg" title="A106_2D_C"><img src="weaponLib/stillMedia/thumbnails/a106_2d_c.jpg" alt="A106_2D_C"/>A106_2D_C</a>       <a class="vlightbox" href="weaponLib/stillMedia/images/a106_2d_d.jpg" title="A106_2D_D"><img src="weaponLib/stillMedia/thumbnails/a106_2d_d.jpg" alt="A106_2D_D"/>A106_2D_D</a>
   </sequence> 

1. onSelectRow: function() {
       var gsr = $('#searchResults').jqGrid('getGridParam', 'selrow');
       if (gsr) {
        var data = $('#searchResults').jqGrid('getRowData', gsr);
        $('#ss').html(document.getElementsByTagName('sequence'));
        };
        $('#theGrid').hide();
        $('#itemAnalysis').show('fast');
        },

I have a application where I am receiving a xml file, selecting a row of data then appropriately putting the data in other specific divs to be used/displayed.

I have almost every thing working with exception of where I have more than one node in the xml file that repeats. Example:

1. <photo>
         <pic>
                       <asset>weaponLib/stillMedia/slides/A106.jpg</asset>
                       <thumb>weaponLib/stillMedia/thumbs/A106.jpg</thumb>
                       <caption>Side view of DODIC A106</caption>
                       <title>Side view of 22 caliber long rifle ball cartridge</title>
                   </pic>
                   <pic>
                       <asset>weaponLib/stillMedia/slides/A106_A.jpg</asset>
                       <thumb>weaponLib/stillMedia/thumbs/A106_A.jpg</thumb>
                       <caption>Side view of DODIC A106</caption>
                       <title>Side view of 22 caliber long rifle ball cartridge</title>
                   </pic>
                   <pic>
                       <asset>weaponLib/stillMedia/slides/A106_B.jpg</asset>
                       <thumb>weaponLib/stillMedia/thumbs/A106_B.jpg</thumb>
                       <caption>Side view of DODIC A106</caption>
                       <title>Side view of 22 caliber long rifle ball cartridge</title>
                   </pic>
                   <pic>
                       <asset>weaponLib/stillMedia/slides/A106_C.jpg</asset>
                       <thumb>weaponLib/stillMedia/thumbs/A106_C.jpg</thumb>
                       <caption>Side view of DODIC A106</caption>
                       <title>Side view of 22 caliber long rifle ball cartridge</title>
                   </pic>
                   <pic>
                       <asset>weaponLib/stillMedia/slides/A106_D.jpg</asset>
                       <thumb>weaponLib/stillMedia/thumbs/A106_D.jpg</thumb>
                       <caption>Side view of DODIC A106</caption>
                       <title>Side view of 22 caliber long rifle ball cartridge</title>
                   </pic>
               </photo>
   

I am using a jQuery plug-in called jqGrid as my grid application which feeds the row data through a onSelectedRow operation.  I have a 'testing' alert box that says that I am the 4 pics and their data correctly.  But when I push this data to a application called Galleriffic, my code breaks.  I don't know enough about firebug to tell if I am forming the result correctly.  I am pulling my hair out on how to implement either a $.each() function or $('#selector').each function so that I get an itteration effect.

in my ame-ui file, I am adding to the DOM through appends to form my <li> and <div> sequence.  Then Galleriffic is supposed to take a look at this and produce a slideshow from it.  My application works wonders as long as I only have one graphic that needs to be displayed.  It breaks when I try  wrapping #picListItems into a each() function.

Suggestions??   jqGrid is forming the listItems at line 193.  The start of my galleriffic is at line 217.
I believe that I don't have my head wrapped around on how to use either .each function.  Educate me please.

tony
It is not the job you get handed, but what you have done with it in the end that people remember.

Ok, maybe I am blind.  I have a jqGrid onSelectRow operation that is taking specific data within a xml file and putting in a specific div within the DOM.  IE and FF are reporting same problem.  If I comment out this code, application runs like it should.  Where is that missing ")" supposed to go??

1. $('#slideshow #thumbs').append("<ul class='thumbs noscript'><li><a class='thumb' href='"data.piclocation" title='"data.piccaption"'><img src='"data.picthumb"' alt='"data.pictitle"' /></a><div class='caption'></div></li></ul>");

This code, when ran is supposed to append my <ul> to </ul> string above with data pulled from the static xml file (by way of a jqGrid) and put it in the thumbs <div> to end up looking something like this:

1. <div id="thumbs">
       <ul class="thumbs noscript">
           <li>
               <a class="thumb" name="optionalCustomIdentifier" href="path/to/slide" title="your image title"><img src="path/to/thumbnail" alt="your image title again for graceful degradation" />             </a>
               <div class="caption">                 (Any html can go here)             </div>
           </li>         ... (repeat for every image in the gallery)
       </ul>
   </div>

What gives??

tony

jQuery plugin: Galleriffic version 2.0
jQuery: version 1.4.2
My whole js is attached.
It is not the job you get handed, but what you have done with it in the end that people remember.

It is not the job you get handed, but what you have done with it in the end that people remember.

Somewhere along last week, my two accordions broke.  I wished my company operated a cvs.  but oh well.

I have my accordions set up as such:

1. $('#left').accordion({         header: 'h3',         fillSpace: true         });         $('#right').accordion({         header: 'h3',         fillSpace: true         });

Here is the css for both accordions:
div#weapon div#left {
    display: none;
    clear: both;
    float: left;
    width: 47%;
    height: 250px;
    margin-bottom: 5px;
    border: 2px solid red;
   
}
div#weapon div#right {
    display: none;
    clear: both;
    float: right;
    width: 47%;
    border: 2px dashed purple;
}

So why is my accordions overflowing (like off the visual page - web site scrolls) the parent divs in vertical direction (div#right and div#left).  Did I miss  a "switch setting"???

here is the HTML:
<div id='right'>
        <h3><a href="#" title="#">Performance</a></h3>
        <div id='perfs'>
            <p>In this container is where we will present to the user weapon performances such as operating temperatures, velocities, etc.</p>
        </div>
        <h3><a href="#" title="#">Containers</a></h3>
        <div id='containers'>
            <p>In this container, we will present to the user some of the particulars of how the item is packaged to include inner and outer packaging.</p>
        </div>
        <h3><a href="#" title="#">Transportation Data</a></h3>
        <div id='transData'>
            <p>This is where we will display transportation data to the user of such things as Hazard Class/Division, NSN, DODAC, DOTlabel, etc.</p>
        </div>
        <h3><a href="#" title="#">References</a></h3>
        <div id='References'>
            <p>This is where we will display item references such as publications or websites of specific interest</p>
        </div>

Tony

It is not the job you get handed, but what you have done with it in the end that people remember.

Tony
It is not the job you get handed, but what you have done with it in the end that people remember.

ok, I have no more hair to pull out.  My scalp is sore.  So I thought I would ask the experts....

I have a menu (structured in the old fashion UL/LI fashion) that is being controlled by jquery.  Initial item selection operates as advertised.  But when a "user" selects another menu item, the screen (div) does not reinitalize and react to the click of the new item.

Here is my online site that I am working on.

In my menu, only the Chemical and Small Arms items are programmed.  Here is the code that is controlling say "Bullet" (under Small Arms).

1. $('#bullet').click(function() {
           $('#searchResults').jqGrid({
               url: 'weaponLib/AME_sa-bullet.xml',
               datatype: 'xml',
               colNames:["DODIC","NSN", "Size/Caliber", "Nomenclature"],
               colModel:[
                   {name:"dodic",index:"dodic", xmlmap:"DODIC", width:30, align:"center", sorttype:"float"},
                   {name:"NSN",index:"NSN", xmlmap:"transData>NSN", width:40, align:"center"},
                   {name:"size", index:"size", xmlmap:"size",width:30, align:"center"},
                   {name:"nomenclature",index:"nomenclature", xmlmap:"nomenclature", width:120, align:"left"}
                   ],
               height:250,
               width: 900,
               viewrecords: true,
               xmlReader: {
                   root : "smallArms",
                   row: "bullet",
                   repeatitems: false,
                   id: "[saId]"
                   },
               rowNum: -1,
               scroll: true,
               altRows: true,
               pager: 'gridNavBar',
               caption: "Bullet Results"
           });
           $('#welcome').css('display', 'none');
           $('#theGrid').css('display', 'block');
       });
   

How do I make the div (searchResults) clear itself after the user clicks on another menu item (chemical for this example) before re-rendering the results grid??

Tony


It is not the job you get handed, but what you have done with it in the end that people remember.

Ok.  Extreme newbie here.

I have a menu system that is structured in <ul>/<li> fashion. Code below.  How do I attach JS functions to any single item?  My functions will be going out and grabbing the static xml and applying some filtering/selections on it, then passing the result to a datagrid.  Writing the function is not hard (standard JS), but how do I attach it to a <li> type of menu item??  Each high-level menu item (such as Small Arms, Bombs) will be performing selections on completely separate xml library files.

Tony

1. <ul id="nav">
           <li><a href="#" title="#"><span>Home</span></a></li>
           <li><a href="#" title="#"><span>Small Arms</span></a>
               <ul>
                   <li><a href="#" title="#"><span>Shot Gun</span></a></li>
                   <li><a href="#" title="#"><span>Bullet</span></a>
                       <ul>
                           <li><a href="#" title="#"><span>22 cal</span></a></li>
                           <li><a href="#" title="#"><span>38 cal</span></a></li>
                           <li><a href="#" title="#"><span>45 cal</span></a></li>
                           <li><a href="#" title="#"><span>50 cal</span></a></li>
                           <li><a href="#" title="#"><span>5.56 mm</span></a></li>
                           <li><a href="#" title="#"><span>7.62 mm</span></a></li>
                           <li><a href="#" title="#"><span>9 mm</span></a></li>
                           <li><a href="#" title="#"><span>20 mm</span></a></li>
                           <li><a href="#" title="#"><span>25 mm</span></a></li>
                           <li><a href="#" title="#"><span>30 mm</span></a></li>
                       </ul>
                   </li>
               </ul>
           </li>
           <li><a href="#" title="#"><span>Bombs</span></a>
               <ul>
                   <li><a href="#" title="#"><span>Practice</span></a></li>
                   <li><a href="#" title="#"><span>500 lb</span></a></li>
                   <li><a href="#" title="#"><span>1000 lb</span></a></li>
                   <li><a href="#" title="#"><span>2000 lb</span></a></li>
               </ul>
           </li>