Databases
StackOverflow2013
Postsdbo
POAjax Loader Not Showing in Google Chrome
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAjax Loader Not Showing in Google Chrome
    primarykey
    data
    text
    <p>Although this has been discussed many times here in Stackoverflow, I couldn't get the loader gif to display in Google Chrome. In Firefox 3.6, the code I have below works just fine for displaying the little gif whenever I make an ajax call but the same code won't display anything if working with Google Chrome. Since our customer uses Chrome I have to make sure it is compatible.</p> <p>Here is the jQuery code which is inside the onLoad event:</p> <pre><code>var loader = $('&lt;div id="ajax-loader" class="ui-corner-all"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;') .appendTo("body") .hide().ajaxStart(function() { var relativeToDocument = false; var parent = loader.parent(); loader .css("top", (relativeToDocument ? $(window).scrollTop() : 0) + (parent.innerHeight() / 2) - (loader.height() / 2)) .css("left", (relativeToDocument ? $(window).scrollLeft() + parent.offset().left : 0) + (parent.innerWidth() / 2) - (loader.width() / 2)) .show(); }) .ajaxStop(function() { loader.hide(); }); </code></pre> <p>Does anyone know why it isn't displayed for chrome?</p> <p>EDIT: Adding some of my markup below;</p> <p>The css for the gif is here:</p> <pre><code>#ajax-loader { position: absolute; padding: 10px; } #ajax-loader span { background-image: url("../images/ajax-loader.gif"); width: 32px; height: 32px; display: block; } </code></pre> <p>The <a href="http://jsfiddle.net/rzXSx/" rel="nofollow">page</a> is here. Of course it looks bad because I haven't added the css files and other things. Plus, this is a MVC application so you won't have any data to load.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USHallaghan
    1. USHallaghan
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POAjax Loader Not Showing in Google Chrome
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POAjax Loader Not Showing in Google Chrome
      1. USHallaghan
      1. VTBountyStart
    1. COAre you certain there's a <body> tag on your page to append to? Is there also a closing </body> tag? Also, the jQuery.ajaxStart and jQuery.ajaxStop methods only work for jQuery ajax calls (I believe) so this will only show up when you use jQuery.ajax (or .get/.post) and not custom ajax code or ajax through another JS library. I tested your code out on a very simple page and it works in Chrome for me.
      singulars
      1. POAjax Loader Not Showing in Google Chrome
      1. USaw crud
    2. COWell, like I mentioned above, it works pretty well for firefox. And yes, there's a body tag to append to in my form. The loader gif won't show up only for google chrome.
      singulars
      1. POAjax Loader Not Showing in Google Chrome
      1. USHallaghan
    3. COCould you add a jsFiddle or jsbin link that contains the broken page and code?
      singulars
      1. POAjax Loader Not Showing in Google Chrome
      1. USBernhard Hofmann
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload