Solved

JQuery not getting called when Ajax is used

Posted on 2011-09-26
8
216 Views
Last Modified: 2012-05-12
I am trying to call some JQuery functions from anchors that are passed through an AJAX method call.  These anchors do not exist on the page until they are called from a ajax method which then populates a div tag with the new anchors.  

The JQuery is not called.  Is this because the JQuery functions are on the client side and the anchors are created on the server side then passed to the client.

Is there anyway to get this to work?

the code attached is the anchor that is passed during the call to the ajax method.
<a href='communityDetails.aspx?mID=" & postID & "&action=bH&iframe=true&width=400&height=380' rel='prettyPhoto[iframes]'>" & Name & "</a>"

Open in new window

0
Comment
Question by:lino_evolution
  • 4
  • 4
8 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 36599807
use live("click",function() instead click(function( or bind("click", function()

http://api.jquery.com/live/
0
 

Author Comment

by:lino_evolution
ID: 36599848
Thanks leakim971, but can you clarify a bit more please.

Do I place the live click function on the anchor?

or do I put this in the custom JQuery library?

and how do I bind that click event to the particular prettyphoto function?



0
 
LVL 82

Expert Comment

by:leakim971
ID: 36599875
ok, if you're using a plugin and you want to apply something on new link, just recall (or call) the function once you create the new link
so forget my previous answer
once you add the new link "recall" prettyphoto
0
 

Author Comment

by:lino_evolution
ID: 36599897
recall?  can you elaborate on that?

how do i recall a function that is executed through an anchor? using rel='prettyPhoto[iframes]'
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 82

Expert Comment

by:leakim971
ID: 36599916
$.ajax({ ...., success:function(data) {
                 blabla to add the new links
                 blabla to add the new links
                 blabla to add the new links
                 blabla to add the new links
 
                 $("a[rel^='prettyPhoto']").prettyPhoto(..blablabla.); // here we "recall"
       },
);
0
 

Author Comment

by:lino_evolution
ID: 36599971
I am creating and calling my AJAX method in a different way.  I think that is why I am confused.

on my HTML page I have a div tag; <div id="BlogLoader"></div>  

on

Page Load I call a javascript function that creates the XML Request Object and using the request to get the HTML code via a call to another page on the server.

function getCurrentBlogs()
{
         *create request object
        var userid = getQueryVariable('iUserID');
               request.open("get", "blog_data.aspx?data=g1&u=" + userid + "&anti-cache=" + new Date().getTime() , true);
            request.onreadystatechange = handleBlogs;
            request.send(null);
}

the function on the other end, at that blog_data page processes and returns HTML code to be displayed in the div tag, (which contains the anchors that calls pretty photo)

and sets the text to the DIV tag to the returned HTML

function handleBlogs()
{
      if(request.readyState == 1)
      {            
          $('#BlogLoader').html("<div style='padding-top: 100px; text-align:center;'><img src='/imgs/loading_icon.gif' /></div>");
      }
    if(request.readyState == 4){ //Finished loading the response
            $('#BlogLoader').html(request.responseText);        
      }      
      
}

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 36600402
$('#BlogLoader').html(request.responseText);
$("a[rel^='prettyPhoto']").prettyPhoto(..blablabla.); // here we "recall"
0
 

Author Comment

by:lino_evolution
ID: 36601054
Brilliant! Thank you .. answered a bunch of other questions as well.
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now