asked on

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

Albert Van Halen

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

Chris Stanyon

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

ASKER CERTIFIED SOLUTION

Titus57

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Titus57

ASKER

Good feedback, but not the solution I was seeking.