/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Ajax dynamic content can’t reference document classes or objects

Copy linkTweet thisAlerts:
Aug 29.2011

Hi All,

I need a bit of help if possible? I’ve got a pretty good knowledge of websites, JS, etc.. and I’ve been playing with AJAX for dynamic content within divs on my pages to keep away from refreshing entire pages, etc..

The problem.
My website is for my photography. I have a static gallery (php) page within which I populate 1 DIV with dynamic html (an image tag, a few links, text, etc..) this works without fail.. Also… in this static page I have a DIV called AITrigger which is a simple CSS rollover image and tied to a jquery.click event to popup a div to present a purchase photo window. This works too..

BUT I want the clickable AITrigger in the dynamic section since it varies in parameters, etc… so the AITrigger definition is in a CSS file, the query references to it are in the static gallery page and the actual AITrigger div is presented via AJAX.

When I move the DIV AITrigger into the ajax callback and the AJAX presents the DIV dynamically then the jquery in the local document doesn’t work. in fact I can use anything – doesn’t have to be jquery, I’ve used bump box, lightbox, standard <A> tags, etc.. and none of them work once the call is made from the ajax code. move the code back onto the main document and it works..

From my limited knowledge of the document structure I was thinking that the AJAX code doesn’t exist at the time the main document is put together, therefore when the ajax code and links arrive they can’t see the document or its content to call or reference them.

Have I made sense here? its been bugging me for ages and I hoped someone could point me in a rough direction that I can figure out whats going on..

MANY THANKS

Richard

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@desiterAug 29.2011 — Please explain it more precisely... When the content loaded via ajax is about to be displayed what do you do exactly?

The basic question is when and where do you run a script which applies the behaviour of the AITrigger - do you run it every time the new content is loaded? If not then change it ?
Copy linkTweet thisAlerts:
@dikjonesauthorAug 29.2011 — Hi thanks for replying,

the ajax content is loaded by a standard callback and pushed into a DIV. It will contain a few html tags but also a DIV with an ID of aitrigger

The static page has the class and jquery definitions for the div aitrigger. its job is to simply display a pop up div when clicked.

When the ajax content is shown it displays normally and the trigger div is visible but when the div is clicked the jquery.onclick does not fire. nothing happens in fact.

if the exact same code is placed on the static document it works. I've also tried this before with the ajax div calling a class such as bumpbox or mootools popups they also don't work if the trigger div is displayed via ajax. but put the div on the static document and it works!

my thoughts were something along the lines of the ajax content being blind to the document structure?? and/or the jquery trying to attach itself to an element which doesn't exist before the ajax puts it on the page!?

Hope this is clearer for you??

Rich
Copy linkTweet thisAlerts:
@desiterAug 29.2011 — Ok, so what you've just done will work only for static content. the jQuery script you are using applies the behaviour only to already existing elements... It means it just search for the matching element when after the page is loaded and that's it.

Now, when you replace the part of content of a document and that content holds some element the script was applied to, you need to apply the script again. Because the elements are gone - doesn't matter if the IDs match... they are all fresh and their behaviour has to be set again.

Your current code looks probably similar to:
[CODE]jQuery(document).ready(function(){
jQuery("your-element").click(function(){
//your popup code
});
}); [/CODE]

So, what you need to do is:
[LIST=1]
  • [*]first wrap the script applying the "click" action in a function, e.g.:
    [CODE]
    //define a function
    function applyClick(){
    jQuery("your-element").click(function(){
    //your popup code
    });
    }
    [/CODE]

  • [*]then use the function on document readyness
    [CODE]jQuery(document).ready(function(){
    //apply click behaviour when document is ready
    applyClick();
    }); [/CODE]

  • [*]in your ajax callback always call [B]applyClick()[/B] again, e.g.
    [CODE]
    ...
    container.innerHTML = newContent;
    applyClick()
    ...
    [/CODE]

    • [/LIST]
    Copy linkTweet thisAlerts:
    @dikjonesauthorAug 29.2011 — Thats such a clear answer - It also means that I don't fully understand the document model and how the scripts attach but we all learn..

    Thank you so much for your answer - I can see whats happening now and I understand the fact that I have to reattach the jquery event to the 'new' id.

    I wish I'd asked you weeks ago about this..


    Thanks again - I really appreciate your answer to this..


    Rich
    ×

    Success!

    Help @dikjones spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...