?
Solved

Modify the src attribute of images after jQuery load via AJAX

Posted on 2014-10-16
2
Medium Priority
?
462 Views
Last Modified: 2014-10-16
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
Comment
Question by:bbdesign
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 23

Accepted Solution

by:
Snarf0001 earned 2000 total points
ID: 40385060
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
 

Author Comment

by:bbdesign
ID: 40385148
Ah, I see! Thank you!
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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)
Suggested Courses

777 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