Databases
StackOverflow2013
Postsdbo
POjQuery removeClass(), how it works
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery removeClass(), how it works
    primarykey
    data
    text
    <p>I have images on my page. User can add more images onto the page by clicking a button. New images are added asynchronously. Initially, each image on page use a special class to be used when the image is loaded. After the image is loaded, that class is removed. Each image being loaded has the class <em>imageLoading</em>:</p> <pre><code>&lt;img class="imageLoading" scr="someimage.png"&gt; </code></pre> <p>After those images are loaded, I remove that class (simplified code without details):</p> <pre><code> $('img.imageLoading') .each(function(){ $(this) .load(function(){ $(this) .removeClass('imageLoading'); });}); </code></pre> <p>Visually, I see that style is removed. But when I run the query again:</p> <pre><code>$('img.imageLoading') </code></pre> <p>I see via debugging that all images, not just loading ones, are returned, i.e. it works like I didn't remove the class for the images that were already loaded. I had a look into the page source, and I saw that actually in HTML the class was not removed, though removeClass() was called.</p> <p>Is that behavior by design that all visual changes are applied but the class attribute is not removed in HTML code? If so, how it can be workarounded in this case. Or, probably, I missed something.</p> <p><strong>UPD</strong> Source code</p> <p>I didn't resolved the problem yet, so post some code to show how it works and where the problem is. My code works this way (unimportant details removed):</p> <p><strong>Loading images are processed:</strong></p> <p>after page loading:</p> <pre><code> &lt;script type="text/javascript"&gt; $(function() { processLoadingImages(); }) &lt;/script&gt; </code></pre> <p>after asynchronous call:</p> <pre><code>function onRequestComplete(result) { var div = document.createElement('div'); div.innerHTML = result; document.getElementById('images').appendChild(div); processLoadingImages(); } </code></pre> <p><strong>Processing images by <em>processLoadingImages</em> function:</strong></p> <pre><code>function processLoadingImages() { $('img.loadingImage').each(function() { if (!imageLoaded($(this)[0])) { $(this).hide() .load(function() { removeImageLoadingClasses(this); $(this).fadeIn(); }); } else { removeImageLoadingClasses(this); } }); } function removeImageLoadingClasses(jqueryObj) { jqueryObj.removeClass('loadingImage'); jqueryObj.parents('div').removeClass('loadingImageContainer'); } function imageLoaded(img) { if (!img.complete) return false; if (typeof img.naturalWidth != 'undefined' &amp;&amp; img.naturalWidth == 0) return false; return true; } </code></pre> <p>As you can see, for each image there is a div container with a class that is removed for loaded images. How did I check that the query retuns all images even those for which removeClass was called? I debugged <em>imageLoaded</em> function (see above), and it's always called for all the images.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCentro
    1. USCentro
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    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. POjQuery removeClass(), how it works
      1. This table or related slice is empty.
      1. VTUpMod
    1. COwhat do you mean by ` run the query again` ?
      singulars
      1. POjQuery removeClass(), how it works
      1. USReigel
    2. COIt is run just after the asynchronous call, when user clicks a button, and new images are added to the end of content HTML and retrieved by the query to be processed.
      singulars
      1. POjQuery removeClass(), how it works
      1. USCentro
 

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