• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 714
  • Last Modified:

AJAX/JS div load not functioning in IE/Chrome, works fine in FF

I have an application that uses AJAX to load a frame from a separate file when the document is first loaded or when a refresh is requested.  I have a "loading" animated gif that I show while the database waits for an updated timestamp to be posted.  The whole setup works beautifully on iPhone/iPad (Safari) and Android (stock browser and Firefox Beta).  It works flawlessly on Firefox as well.  However... in Chrome and IE the sub-frame fails to load.  This is a pure frame loading issue as everything else still seems to be working properly.  I am aware of IE's reputation for being obstinate with these things but I was surprised by Chrome not loading properly.  I have the javascript and raw html below.  Your help is sincerely appreciated.

Javascript (AJAX) code:
------------------------------------------------------------------------
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
   <script type="text/javascript">
    $(document).ready(function(){
      refreshTable();
    });

    function refreshTable(){
     $('#CustomerDetails').load('includes/PS_Mobile.asp?PlantID=' + $('#PlantID').val());
			}
    </script>

  <script type="text/javascript">
    function Loading(){
		 $('#CustomerDetails').empty().html('');                        
			var dd = document.getElementById("HAWKLoad");
				if(typeof (dd) == 'object')
				{
				dd.style.visibility = "visible";
       			dd.style.width = "325";
       			dd.style.height = "250";
				};
			}
    </script>

Open in new window


HTML
--------------------------------------------------------------------
    <table width="363">
 <input type="submit" id="update" onclick="Loading()" value="refresh" name="ACTION">
     <img style="visibility:hidden;" width="0" height="0" id="HAWKLoad" src="images/loading_frame.gif" border="0">
   		    <div id="CustomerDetails"></div> 
   <input type="hidden"  name="PlantID" id="PlantID" value="1002">     	    
</table>

Open in new window

0
Titus57
Asked:
Titus57
  • 2
1 Solution
 
Albert Van HalenCommented:
Perhaps a cache related issue.

Include header information in your ASP page to not use caching (have a look here: http://classicasp.aspfaq.com/general/how-do-i-prevent-my-asp-pages-from-caching.html), or make your url unqiue by appending the timestamp.
function refreshTable(){
    $('#CustomerDetails').load('includes/PS_Mobile.asp?PlantID=' + $('#PlantID').val() + '&t=' + new Date().getTime());
}

Open in new window

0
 
Chris StanyonCommented:
The logic in your code seems a little off. The refresh button is only coded to show the Loading image - it doesn't actually go and fetch anything from the server! Have a look at this and see if it solves your problem.

<script type="text/javascript">
$(document).ready(function() {
	//refresh the info on load
	refreshTable();
	
	//refresh the info when the #update button is clicked
	$('#update').click(refreshTable);
});

function refreshTable(){
	//Empty the CustomerDetails DIV
	$('#CustomerDetails').html('');

	//Show the Loading graphic
	$('#HAWKLoad').show();
	
	//Disable the cache
	$.ajaxSetup ({ cache: false });

	//Load the new data from the server into CustomerDetails DIV
	$('#CustomerDetails').load('includes/PS_Mobile.asp?PlantID=' + $('#PlantID').val(), function() {
		//once done, hide the loading graphic
		$('#HAWKLoad').hide();
	});
}
</script>

Open in new window

<div style="width:363px;">
	<input type="submit" id="update" value="refresh" name="ACTION"/>
	<img style="display:none;" id="HAWKLoad" src="images/loading_frame.gif" alt="Loading..." />

	<div id="CustomerDetails"></div>

	<input type="hidden" name="PlantID" id="PlantID" value="1002" />               
</div>

Open in new window

0
 
Titus57Author Commented:
I think I'm going to have to punt on this one.  Something is off with my code, because the syntax works fine across all browsers when I break it down to the basics.  I'll be back on here at some point before the end of year to come up with a platform independent solution.
0
 
Titus57Author Commented:
Good feedback, but not the solution I was seeking.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now