1

The GOAL:
Click of a “next slide” button refreshes / replaces <div> content with new content from a different php file. Each slide is its own php file. This is for an online course I’m building. Each time the button is clicked the <div> existing content is replaced by new content from the next slide (php file) in the series. I also want to build a back button to go to the previous slide, but I’m not at this point yet.

The PROBLEM:
I’m currently trying to use jquery/ajax. The button works (refreshes the <div> with the new slide content) in the first two slides, but then does not work on the third slide. I placed the button on each slide (prefer it this way). This may be one of the problems. I thought another issue may have to do with the file path for the page variable. I'm also wondering if the problem has to do with the fact that the home page only “includes” the other files in Div’s. Like this:

    <div id="header">
      <?php include 'pf_header.php'; ?>
    </div>
    <div id="menu">
      <?php include 'pf_menu.php'; ?>
    </div>
    <div id="content">
      <?php include 'pf_welcome.php'; ?>
    </div>
    <div id="footer">
      <?php include 'pf_footer.php'; ?>        
    </div>

All of my code is below:

Script.js

$(document).ready(function() {
    $(".slide").on("click", function(e){
        $(".content").load($(this).attr("page"));
    });
});

Slide 1 (button works)

 <div class="content">
  <div id="main">
    <input type="button" value="NEXT" id="nextbtn" class="slide" page="pf_instructions.php">
  </div>
  <div id="sidebar">            
    <div id="aside1">
      <iframe src="https://www.youtube.com/embed/NAeha727ZWI"></iframe>
    </div>
    <div id="aside2">
    </div>
  </div>
 </div>

Slide 2 (button works)

 <div class="content">
  <div id="main">
    <p>INSTRUCTIONS</p>  
    <p>INSTRUCTIONS</p>  
    <input type="button" value="NEXT" id="nextbtn" class="slide" page="basics/pf_l1_introduction.php">
  </div>
  <div id="sidebar">            
    <div id="aside1">
      <iframe src="https://www.youtube.com/embed/NAeha727ZWI"></iframe>
    </div>
    <div id="aside2">
    </div>
  </div>
 </div>

Slide 3 (button DOES NOT work)

 <div class="content">
  <div id="main">
    <p></p>
    <input type="button" value="NEXT" id="nextbtn" class="slide" page="basics/pf_l1_quiz.php">
  </div>
  <div id="sidebar">       
    <div id="aside1">
      <iframe src="https://www.youtube.com/embed/NAeha727ZWI"></iframe>
    </div>
    <div id="aside2">
    </div>
   </div>
  </div>
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
car
  • 11
  • 2
  • Are the slides loaded dynamically via AJAX? You also have duplicated id's (`main, nextbtn, sidebar, aside1, etc`). – Jay Blanchard Feb 22 '16 at 19:21
  • 2
    jQuery is only aware of the elements in the page at the time that it runs, so new elements added to the DOM are unrecognized by jQuery. To combat that use [event delegation](http://learn.jquery.com/events/event-delegation/), bubbling events from newly added items up to a point in the DOM that was there when jQuery ran on page load. Many people use `document` as the place to catch the bubbled event, but it isn't necessary to go that high up the DOM tree. Ideally [you should delegate to the nearest parent that exists at the time of page load.](http://stackoverflow.com/a/12824698/1011527) – Jay Blanchard Feb 22 '16 at 19:23
  • Where are you loading `Script.js`? Given that your 2nd button works I'm guessing in the slide itself? Notice that the 2nd slide is `basics/...`, and if you load the JS using a relative URL, it probably can't be found. Have you checked the browser console? (F12) – Kenney Feb 22 '16 at 19:27
  • Jay & Kenney, thanks for your response. You gave me some good things to think about. I made the following changes and the button on the 3rd slide now works. I hope the issue is resolved, but I have a lot more testing to do including the 4th slide. I'm working on this part time so it may take me a few more days to work on it again. Writing because I didn't want to leave you hanging. This is the first time I'm using Stackflow, so please let me know if there is anything I need to do further in the process. – car Feb 23 '16 at 07:45
  • Changes made: 1. Changed id to class for the content div on the home page. 2. Deleted the
    in each slide. 3. Changed main, sidebar, aside1 and aside2 id's to classes in each slide.
     – car Feb 23 '16 at 07:52

0 Answers0