[Solved] Small AJAX issue. Please help me out guys

[noahgelman]

What I have is that when you hover over one of the thumbnails in a list, a "quick view" button fades in on top of the thumbnail. You can click it and a lightbox comes up. I have all that coded out well and dandy, but there is also also an "albums" list, and when you click on one of the other albums, it changes the thumbnail list via AJAX. Unfortunately, the jquery I have doesn’t rekick in. Any ideas?

Code:

$(function() {

$(‘#artwork li a.quick-view’).css({‘display’ : ‘block’, ‘opacity’ : 0});

$(‘#artwork li’).hover(
function() {
$(this).children(‘.quick-view’).stop().animate({
opacity: 1,
},200);
},
function() {
$(this).children(‘.quick-view’).animate({
opacity: 0,
},400);
}
);
});

Sorry for no link to the site, but it’s on a private server till it’s ready to go live.

[Capt Otis]

jQuery only applies itself on the page load. You need to tell it to reapply when you add something.
So after you load the ajax, you want something like

Code:

$(“#idOfWhereYouLoadAjax”).live(‘load’, function(){
//whatever you want to do
});

Look up .live() for jquery if that doesnt make sense.

[noahgelman]

I tried

Code:

$(function() {
$(“#artwork ul”).live(‘load’, function(){
//whatever you want to do

$(‘#artwork li a.quick-view’).css({‘display’ : ‘block’, ‘opacity’ : 0});

$(‘#artwork li’).hover(
function() {
$(this).children(‘.quick-view’).stop().animate({
opacity: 1,
},200);
},
function() {
$(this).children(‘.quick-view’).animate({
opacity: 0,
},400);
}
);
});
});

And also without the ul in the function with .live() attached to it. Did I do it right?

Another note in case it’s important (sorry, I forgot to mention it), the AJAX isn’t being controlled by my jquery, it’s being controlled by php. The site is being built on the Zend Frame work and I’m a front end guy so I don’t have much of any experience in it. Is there anything you could suggest?

[Capt Otis]

Do you mean you are using just javascript for your ajax…?

Ajax stands for Asynchronous JavaScript and XML, meaning you must have used some javascript to submit data to a php page.

I do know there is a plugin that will add jquery to newly added items… let me see if i can find it.

[noahgelman]

The AJAX is being handled by some javascript but the javascript I’m writing is separate which makes things a bit difficult.

[noahgelman]

Well I figured since there was no other way to do it, I had to go and track down the other javascript file that was running it and work off of that. This is a huge site and we have several people working on it so it was a little tough to spot, but I found it and edited it. Thank you for the help.

[Author]

Posts