Link to home
Start Free TrialLog in
Avatar of denewey
denewey

asked on

JQuery Caching Code?

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.

ASKER CERTIFIED SOLUTION
Avatar of denewey
denewey

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial