troubleshooting Question

JQuery Caching Code?

Avatar of denewey
denewey asked on
JavaScriptPHPHTML
1 Comment1 Solution244 ViewsLast Modified:
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> 

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();
		});

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;
		});

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;		
	});
If you need more data to understand what I'm dealing with, let me know.

Thanks.

ASKER CERTIFIED SOLUTION
denewey

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 1 Comment.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 1 Comment.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros