I want to call a jQuery function after the ajax response

Hi,

I am new to this forum.. I want to call a jquery function after all the images loaded from Ajax call.. because, I have a jquery plugin for Image reflection.. In that, there is a function called addReflections. The addReflection function has called on window.onload in that plugin. So, Image reflection will not work for the images loaded from Ajax call.. So I have called the addReflections function after getting result from Ajax call as below. But When the images getting slow to load, the images reflection is not appearing. How can we get an acknowledgment like "All Images loaded from Ajax call"? After that I have to call that addReflection function. I am using the below mentioned code and I want to call a function addReflections() after all the images loaded from ajax call.. Please reply..

Thanks in advance,
Mohamed

Please be sure to use code tags when posting code to the forums. Unformatted or unindented code is extremely hard to read and many people that might be able to help you will just move along to posts that are easier to read. Please click this link ⇒ UseCodeTags ⇐ for more information.

Properly indented and formatted code greatly increases the probability that your question will get quicker, better answers.

Also, please see the JavaRanch naming policy and change your display name to conform with this policy. Thanks!

I've added the code tags for you, this time...A few things:

1. Why is async false? This kind of defeats the purpose of using Ajax, except for special cases.

2. You should look into using jQuery's $.load() function.

3. What is being returned? IMG elements with src attributes? If this is the case then what you are dealing with is even after the Ajax call completes, you have to wait for the images to load. There is a hook into this. It is something like:

You should double check my syntax.

Thank you Mr.Bibeault.. Here onwards I will follow that..

Thank you Mr.Bolinger,

As you mentioned, I have used your code as below. But the addReflections function called number of times. I mean based on the Image count. If the Ajax call loading 10 images means. 10 times that function has called. But the issue is, If repeatedly I call that function, I am unable to get the Image reflection.. If I called one time after all the images loaded from Ajax, it is working fine. That is why I need to call the function after all the images loaded from Ajax. Expecting your help.

$(document).ready(function() {
$('.reflect').bind('load', function() {
addReflections(); //Image reflection call..
});
});

Thanks in advance,
Mohamed

Thanks for your reply Mr. Newton,

I have change my name as per coderanch rules..

Change your addReflections code so that it only adds the reflection to the image that has finished loading. Don't try and do them all at once.

Hi Bolinger,

I have used the below code, it is working fine in all browsers except Internet Explorer.

//Coding

var rimages = document.getElementsByClassName("reflect");//Taking the length of the reflect class. I mean no of images.
var i=0;
$(document).ready(function(){
$(".reflect").load(function(){//This function is calling based on the image count. If 10 images means function will be called 10 times.

i++;
if(i==rimages.length)
{
addReflections();//reflection call
}
});
});
------------------------

document.getElementsByClassName("reflect");//This is not supported by Internet Explorer.

If I use document.getElementsByTagName("img");//This is not supporting by load function.

If you have any suggestion.. please reply.

Thanks in advance,
Mohamed

I suggest if you are going to use jQuery, then use jQuery.

document.getElementsByClassName("reflect") == $('.reflect')

jQuery will handle the cross browser issues for you.

Please UseCodeTags when posting code or configuration. Unformatted code and configuration is unnecessarily difficult to read. You can edit your post by using the

button.