SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jun 2013
    Location
    The Netherlands
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery code doesn't work on dynamic content loaded with ajax

    Hello everybody,

    So here's my first post on this forum, let's see how this works! I really hope anyone out here can help me with this struggle I'm in. Let me try to explain it:

    I have an index.php with thumbnails of a few projects, followed by the full content of one of those projects.There's some jQuery in the index that I use on the content in this page. Everything works fine when the project content is hard-coded into the index, but I want it to load dynamically through an AJAX call. I got that working too, it loads the content from the database without reloading the page, but then I run into my problem: none of the jQuery works on the 'new' content.

    I use two separate files to get the content: xmlhttp.js with a function that is fired when you click on one of the thumbnails on the index. This uses a separate .php file with a mysql request to get the right content, and then injects this response into the right element on the index.

    Does anyone have an idea where I go wrong? Thanks a lot for your time in advance.

    Hugo

  2. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,441
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    When you say that none of your jQuery works on the dynamically loaded content, do you mean things like click event handlers etc?

  3. #3
    SitePoint Member
    Join Date
    Jun 2013
    Location
    The Netherlands
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, the onclick event to get the right content does work (which is plain inline javascript) but the jQuery event on that same click to automatically scroll down for example does not work.

  4. #4
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,441
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    Could you share either a link to the page (if it's online) or the HTML and JS for the page?

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,003
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    If I understand this correctly, you are inserting content into the DOM, but the required behaviour is not being attached to the inserted elements.

    The solution to this is to use jQuery's .on() method, but to bind it to an element that exists when the page is first rendered.

    An example:

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>jQuery scaffold</title>
      </head>
      
      <body>
        <button class="clickMe">Click Me!</button>
      
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script>
          $(function(){
            $(".clickMe").on("click", function(){
              $("<button>",
                {
                  class: "clickMe",
                  text: "Click Me!"
                }
              ).appendTo("body");
            });
          });
        </script>
      </body>
    </html>
    Here, when you click the original "Click Me!" button, it will insert another (identical) button into the page.
    The problem is that these inserted buttons do nothing when clicked, the behaviour of the original button was not attached to them.

    Now, if we change the click handler to this:

    Code JavaScript:
    $(document).on("click", ".clickMe", function(){

    the new buttons will also have the behaviour of the original button.

    In this case we have bound the click event handler to an element that existed when the page was rendered (document) and specified a selector string to filter the descendants of the selected element that triggers the event.

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>jQuery scaffold</title>
      </head>
      
      <body>
        <button class="clickMe">Click Me!</button>
      
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script>
          $(function(){
            $(document).on("click", ".clickMe", function(){
              $("<button>",
                {
                  class: "clickMe",
                  text: "Click Me!"
                }
              ).appendTo("body");
            });
          });
        </script>
      </body>
    </html>
    http://api.jquery.com/on/

    I hope that helps and is relevant to your issue, but as fretburner said, it would really help to see some code.

    Also, please note, that prior to jQuery 1.7, this behaviour was achieved using the now deprecated .live() method.

  6. #6
    SitePoint Member
    Join Date
    Jun 2013
    Location
    The Netherlands
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys, thanks for helping out. I'm not sure if the .on() method is the key, but let's see. Here's the example page: http://www.11amtoday.nl/work/

    These are the functions that are called with onclick() on the links, the first one to generate the project thumbnails when you click on 'latest' or 'featured', the second one if you select one project:

    Code:
    function selectProjects(str) {
    	var xmlhttp;
    	if(str=="") {
    	  document.getElementById("projects").innerHTML="";
    	  return;
    	}
    	if(window.XMLHttpRequest) { // modern browsers
    		xmlhttp=new XMLHttpRequest();
    	} else { // IE6, IE5
    		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    	}
    	xmlhttp.onreadystatechange=function() {
    		if(xmlhttp.readyState==4 && xmlhttp.status==200) {
    			document.getElementById("projects").innerHTML=xmlhttp.responseText;
    		}
    	}
    	xmlhttp.open("GET","projects.php?projects="+str,true);
    	xmlhttp.send();
    }
    
    function selectWork(str) {
    	var xmlhttp;
    	if(str=="") {
    	  document.getElementById("project").innerHTML="";
    	  return;
    	}
    	if(window.XMLHttpRequest) { // modern browsers
    		xmlhttp=new XMLHttpRequest();
    	} else { // IE6, IE5
    		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    	}
    	xmlhttp.onreadystatechange=function() {
    		if(xmlhttp.readyState==4 && xmlhttp.status==200) {
    			document.getElementById("project").innerHTML=xmlhttp.responseText;
    		}
    	}
    	xmlhttp.open("GET","project.php?project_id="+str,true);
    	xmlhttp.send();
    }
    If I don't use this AJAX request but just put the php straight into the index to display one of the items, the jQuery does work. What the jQuery does is automatically scroll down the page to the project, make sure the divs surrounding the project text and the side info next to it have the same height, and create a photo slider if there is more than one image to be displayed.

  7. #7
    SitePoint Member
    Join Date
    Jun 2013
    Location
    The Netherlands
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! That works, only now both buttons link to the main page and not the specific item that is being displayed.
    Do you think that it is possible with this setup to add an url with something like ?project_id=3 to the FB and Twitter buttons? I now added a page similar to project.php to display one item if the url has a project_id variable, so the buttons can maybe connect to that link?

    Cheers


Tags for this Thread

Bookmarks

Posting Permissions

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