• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Rob Spoor
  • Tim Cooke
  • Junilu Lacar
Sheriffs:
  • Henry Wong
  • Liutauras Vilda
  • Jeanne Boyarsky
Saloon Keepers:
  • Jesse Silverman
  • Tim Holloway
  • Stephan van Hulst
  • Tim Moores
  • Carey Brown
Bartenders:
  • Al Hobbs
  • Mikalai Zaikin
  • Piet Souris

I want to call a jQuery function after the ajax response

 
Greenhorn
Posts: 6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
 
Sheriff
Posts: 67590
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Author
Posts: 12617
IntelliJ IDE Ruby
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Also, please see the JavaRanch naming policy and change your display name to conform with this policy. Thanks!
 
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Peer Mohamed.
Greenhorn
Posts: 6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thank you Mr.Bibeault.. Here onwards I will follow that..
 
Peer Mohamed.
Greenhorn
Posts: 6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
 
Peer Mohamed.
Greenhorn
Posts: 6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks for your reply Mr. Newton,

I have change my name as per coderanch rules..
 
Gregg Bolinger
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Peer Mohamed.
Greenhorn
Posts: 6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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

 
Gregg Bolinger
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
David Newton
Author
Posts: 12617
IntelliJ IDE Ruby
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
They weren't very bright, but they were very, very big. Ad contrast:
Thread Boost feature
https://coderanch.com/t/674455/Thread-Boost-feature
reply
    Bookmark Topic Watch Topic
  • New Topic