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

Posted on 2012-08-28
Last Modified: 2012-10-24
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=""></script>
   <script type="text/javascript">

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

  <script type="text/javascript">
    function Loading(){
			var dd = document.getElementById("HAWKLoad");
				if(typeof (dd) == 'object')
				{ = "visible";
 = "325";
 = "250";

Open in new window

    <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">     	    

Open in new window

Question by:Titus57
    LVL 19

    Expert Comment

    by:Albert Van Halen
    Perhaps a cache related issue.

    Include header information in your ASP page to not use caching (have a look here:, 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

    LVL 42

    Expert Comment

    by: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
    	//refresh the info when the #update button is clicked
    function refreshTable(){
    	//Empty the CustomerDetails DIV
    	//Show the Loading graphic
    	//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

    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" />               

    Open in new window


    Accepted Solution

    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.

    Author Closing Comment

    Good feedback, but not the solution I was seeking.

    Featured Post

    Top 6 Sources for Identifying Threat Actor TTPs

    Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

    Join & Write a Comment

    The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API ( has made its way into the popular lexicon of the English language.  A few years ago, …
    Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now