How to get AJAX content loaded with jQuery to update

I'm using rwd.images.js (https://github.com/stowball/rwd.images.js) to custom-load images of various resolutions, with markup that looks like this:

<img class="rwdimage" data-rwdimage="(max-width:768px){src:url(imglo/ph_estate-1.jpg);},(min-width:769px){src:url(img/ph_estate-1.jpg);}" />

Open in new window


However, when I load that markup with jQuery.load it doesn't work, presumably because I am adding content to the DOM and the JS isn't seeing it. My JS looks something like this:

$('div#content').load('details-'+$('div#homebg img:nth-child('+curImg+')').attr('data-link'));

Open in new window


What is the right way for me to do this? Somehow I need to tell rwd.images.js that new content has been added? There are instructions at the bottom of the URL above with regards to "lazy load" of images, but that doesn't seem to work, either. The AJAX-loaded content still has to be visible to JS in the first place, correct?

Thank you!
bbdesignAsked:
Who is Participating?
 
GaryConnect With a Mentor Commented:
Don't know without looking into the plugin and I don't debug other peoples plugins
Best to contact the author - because the code appears to be working fine.
That the images are loaded thru ajax shouldn't matter as you are calling the plugin after they have been loaded.
0
 
GaryCommented:
This
$('div#content').load('details-'+$('div#homebg img:nth-child('+curImg+')').attr('data-link'));

should be
$('div#content').load('details-'+$('div#homebg img:nth-child('+curImg+')').data('link'));

Have you a link to the page? Confusing what the issue is without any real code.
0
 
bbdesignAuthor Commented:
The problem is not with the loading of content, that works fine. Here is a URL:
http://secure.bbdesign.com/shoperenowharton/hospitality.htm

The problem is that the images in the content that is loaded, which have class="rwdimage" like the large background images in the above URL, are not loading. I am presuming the reason is because of the AJAX load. I don't know how to get them to load.

If you monitor Firebug, for example, you will see this URL's content being inserted into the page:
GET http://secure.bbdesign.com/shoperenowharton/details-hospitality-1.htm

If I make them regular <img> tags with a src, they work fine. But since rdwimage does some dynamic loading of the src, that is where the problem is (I think).

Thanks.
0
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.

 
GaryCommented:
Seems a bit amiss here - you are using $images then $image - which is never set.

console.log('load now');
var $images=document.getElementsByClassName('rwdimage');
var lazyLoad=function($image){
	$image.className+=' lazy-loaded';
	window.rwdImageChangeSrc($image);
};

Open in new window

0
 
bbdesignAuthor Commented:
Hmm, not sure... I copied that script directly from the bottom of https://github.com/stowball/rwd.images.js

I tried making the variable names the same, but that seems to have no effect.

Anyway, I'm not 100% sure if I need that script or not. The images I am loading in the big background area are coded like this:

<img class="rwdimage" data-rwdimage="(max-width:768px){src:url(imglo/ph_home_hospitality_1.jpg);},(min-width:769px){src:url(img/ph_home_hospitality_1.jpg);}" data-category="Hospitality 1" data-link="hospitality-1.htm" alt="Hospitality 1" />

...and they work fine. But when I load in this via AJAX:

<img class="rwdimage" data-rwdimage="(max-width:768px){src:url(imglo/ph_det_hospitality-1a.jpg);},(min-width:769px){src:url(img/ph_det_hospitality-1a.jpg);}" data-rwdimage-lazy-load="true" />

...the image does not appear. So the only difference is the AJAX.
0
 
GaryCommented:
What should be happening with the other images - they are loading
Should they be appearing as you scroll down?
0
 
bbdesignAuthor Commented:
No, I'm not seeing the images. This is the URL:

http://secure.bbdesign.com/shoperenowharton/hospitality.htm

When I scroll down, that is where the images are supposed to be, but there is a blank space (the large, background images are working fine, but they are not loaded via AJAX).
1.jpg
0
 
GaryCommented:
The only images I can see on the page are the background images.
0
 
GaryCommented:
Ok found them - will look at it
0
 
bbdesignAuthor Commented:
OK, thanks, I will continue to look into it.
0
 
bbdesignAuthor Commented:
I am loading the JS script before the later images, so probably that is why it isn't working?

I found the developer on Twitter today. He says he was already working on fixing the script to work with AJAX-loaded elements and will have a fix in a few days. Perfect!
0
 
GaryCommented:
Good stuff.
0
All Courses

From novice to tech pro — start learning today.