We help IT Professionals succeed at work.

JQuery Caching Code?

denewey
denewey asked
on
This problem is somewhat difficult to explain, but I'll give it my best shot.

I'm working on a fairly sizable reporting application. The overall operation of the application depends upon loading the HTML of a report into the page using a JQuery $.ajax() function, when the name of that report is clicked on. The HTML is generated by PHP scripts.

For the most part everything functions very well, but I have one set of reports that is giving me trouble. It is a set of three different reports based on the same PHP class, but with different paths to retrieve the data. Each report comes with a set of drop down menus that are used to drill into more and more precise reporting areas, and this is where I am running into the problem.

The menus are a set of drop-downs that are chained so that selecting an area in one drop-down triggers a jQuery AJAX call to a PHP script to get the divisions of that area from the database to populate the next drop-down etc.
There are anywhere from 2 - 4 drop-downs in a chain and the user can click the submit button anywhere is the sequence of drop-downs to get that level of report displayed.

The problem is this: the paths for retrieving the data to populate the drop-downs appear to get cached. Each report has a different path, yet if I go from one report to another, the first time I try to make a selection on the second report, I get an error which gives me the path from the first report:

"Notice: Undefined variable: query in var/www/capacity/cmts/reports/augment_plan/ajax_augment_levels.php on line 137  Warning: mysql_fetch_row() expects parameter 1 to be resource..."

So, when I go to one report, make menu selections and click submit, everything it retrieved correctly. Then, when I close out of that report, go to a new menu area and click on a different report of this same type and try to make the selections I get the error, as if the path from the first report were cached. Hope this clearly communicates the problem.

The basic HTML of the menu looks like this:
<div align="center" id="container">
<div id="draggable2" class="ui-widget-content">
  	<div id="dd_menu"><img src="../../capacity/images/dd_pt_count.jpg" width="40" id="dd_img" />&nbsp;&nbsp;<a href="#" id="add"> Options</a>&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" id="submit" value="Go" />
     <p><ul class="dd_nav">
        <li class="dd_navli" id="dd_region2"><?php echo $plan->get_augment_level('region', $plan->div_id) ?></li>
        <li class="dd_navli" id="dd_area"> </li>
        <li class="dd_navli" id="dd_site"></li>
        </ul>
        <input type="hidden" id="saveReg" value="" />
        <input type="hidden" id="saveArea" value="" />
        <input type="hidden" id="saveSite" value="" />
        </p>
    </div>
  </div> 

Open in new window


The jQuery script that populates each drop-down looks like this:
$( "#draggable2" ).draggable();
		
		$("#add").mouseover(function() {
			$('#dd_region2').slideDown(500);
		});
		$("#add").click(function() {
			$('.dd_navli').slideUp(500);			
		});
		
		// CODE FOR AJAX RETRIEVING OF VARIOUS DRILL DOWN VERSIONS		
		$('select').live('change', function() {
		//$('select').change( function() {
			var prename = $(this).val();							
			var name = $(this).attr("id");			
			if (name == "area"){
				$('#saveReg').val(prename);
			}
			if (name == "site"){
				$('#saveArea').val(prename);
			}
			if (name == "element"){
				$('#saveSite').val(prename);
			}						
			$.ajax({
				"type": 'get',
				url:'../../capacity/cmts/reports/augment_plan/ajax_augment_levels.php',
				"data": 'n=' + name + "&p=" + prename,				
				"success": function(r) {
					var idName = "dd_" + name;
					$('#' + idName).html(r);
					$('#' + idName).slideDown(500);			
				}			
			});
			//return false;
			event.stopPropagation();
		});

Open in new window


Here's the jQuery script for the same function in a different report of the same type: note the difference in the path of the $.ajax() function:
// CODE FOR AJAX RETRIEVING OF VARIOUS DRILL DOWN VERSIONS		
		$('select').live('change', function() {
			var prename = $(this).val();							
			var name = $(this).attr("id");			
			if (name == "cran"){
				$('#saveReg').val(prename);
			}
			if (name == "uring"){
				$('#saveCran').val(prename);
			}
			if (name == "element"){
				$('#saveUring').val(prename);
			}
						
			$.ajax({
				"type": 'get',
				url:'../../capacity/cran/reports/augment_plan/ajax_augment_levels.php',
				"data": 'n=' + name + "&p=" + prename,				
				"success": function(r) {
					var idName = "dd_" + name;
					$('#' + idName).html(r);
					$('#' + idName).slideDown(500);			
				}			
			});
			return false;
		});

Open in new window


And the jQuery that actually retrieves the report looks like this:
$('#submit').click(function() {
		var regName = $('#saveReg').val();
		var areaName = $('#saveArea').val();
		var siteName = $('#saveSite').val();
		
		$('<div id="load"><img src="images/ajax-loader3a.gif" /></div>').appendTo('#container').fadeIn('400');
						
		$.ajax({
			"type": 'get',
			url:'../../capacity/cmts/reports/augment_plan/augment_plan_container.php',
			"data": 'reg=' + regName + '&area=' + areaName + '&site=' + siteName,
			"success": function(r) {
				$('#prod_page').html(r);
				$('<div id="load"><img src="images/ajax-loader3a.gif" /></div>').fadeOut(400, function() {
					$(this).remove();
				});		
			}			
		});
		return false;		
	});

Open in new window

If you need more data to understand what I'm dealing with, let me know.

Thanks.

Comment
Watch Question

Commented:
I solved it by hard-coding the path for each report into an HTML hidden form field in each file and accessing that path with a jQuery variable. That way, whether the JQuery code is caching or not it will still pick up the correct path for that report.