www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] Ajax dynamic content can't reference document classes or objects

  1. #1
    Join Date
    Aug 2011
    Posts
    3

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

    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

  2. #2
    Join Date
    Aug 2011
    Location
    Gdynia
    Posts
    8
    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

  3. #3
    Join Date
    Aug 2011
    Posts
    3

    more detail

    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

  4. #4
    Join Date
    Aug 2011
    Location
    Gdynia
    Posts
    8
    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
      });
    });
    So, what you need to do is:
    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
        });
      }
    2. then use the function on document readyness
      Code:
      jQuery(document).ready(function(){
        //apply click behaviour when document is ready
        applyClick();
      });
    3. in your ajax callback always call applyClick() again, e.g.
      Code:
      ...
      container.innerHTML = newContent;
      applyClick()
      ...
    Last edited by desiter; 08-29-2011 at 01:00 PM.

  5. #5
    Join Date
    Aug 2011
    Posts
    3

    Smile Thank you!

    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles