[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 504
  • Last Modified:

Modify the src attribute of images after jQuery load via AJAX

Here is a test page I am working on:
http://secure.bbdesign.com/shoperenowharton/country.htm

The big background images look like this:
<img class="rwdimage" data-rwdimage="ph_home_country_1.jpg" />

Then, this code populates the SRC attribute based on some Javascript Media Query logic:
$('div#homebg').children('img.rwdimage').each(function(){
	$(this).attr('src', 'imglo/'+$(this).attr('data-rwdimage'));
});

Open in new window


That part works great. However, there are also some images loaded via jQuery AJAX towards the bottom of the page (you would have to scroll down a bit to see them) that are not working. They are marked up the same way as the background image. Here is the script that handles them:
$('div#content').children('ul').children('li').children('img.rwdimage').each(function(){
	console.log('imglo/'+$(this).attr('data-rwdimage'));
	$(this).attr('src', 'imglo/'+$(this).attr('data-rwdimage'));
});

Open in new window


Note the console.log, if you view the console log you can see that the browser is picking up the "data-rwdimage" attribute and modifying it correctly. Yet, applying this value to the "src" attribute of the image does not work, as it does work on the non-AJAX loaded images.

I am guessing this has something to do with the AJAX-loaded elements, since that is the only way that they are different (unless I have made an error somewhere). However, since the script is seeing the "data-rwdimage" attribute, obviously it recognizes the page element in the DOM, why can I not update the SRC value?

Would appreciate any input.
Thank you!
0
bbdesign
Asked:
bbdesign
1 Solution
 
Snarf0001Commented:
It's actually setting the source attribute perfectly fine.
The problem is you have the class set as "rwdimage", which has height: 0 property on it.

The images are loading, they just have 0 height so you can't see them.
0
 
bbdesignAuthor Commented:
Ah, I see! Thank you!
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

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