Using JS variable to change specific <div> contents over multiple pages (JQuery Mobile) (Second button-click does nothing)

StackOverflow https://stackoverflow.com/questions/23499977

Question

I am trying to change only the 'main/contents' part of my webpage, and leave the header, navbar, and footer 'static', as they are common to every page.

This works just fine on the first nav-button click. But the second does not respond (though the change in $currentPage is reflected when printed to the console). After numerous clicks, a secondary div-content-change will take place, but not one corresponding to the last button clicked.

I'm really hoping I can get a hand with this, as it seems like something that should be very do-able.

Here's my index:

  <!DOCTYPE html>
  <head>
     <title>NoteVote</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
     <link rel="stylesheet" href="./NV_home.css">
     <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
     <script src="./scripts/navScript.js"></script>
     <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
  </head>
  <body>

  <!-- COURSES page -->
  <div data-role="page" id="noteVote">
     <div data-role="header" align="middle" class="header">
        <img src="images/banner_post_it.png" align="middle" alt="Banner Image" height="100" width="250"/>
        <!-- This is the Navbar -->
        <div data-role="navbar" data-grid="c" id="navBar">
           <ul>
              <li><a class="ui-btn" id="coursesButton">Courses</a></li>
              <li><a class="ui-btn" id="searchButton">Search</a></li>
              <li><a class="ui-btn" id="submitButton">Submit</a></li>
              <li><a class="ui-btn" id="accountButton">Account</a></li>
           </ul>
        </div>
     </div>

     <!-- This is the MAIN section -->
     <div data-role="content" class="ui-content" id="coursesContent">
           <h1>Courses</h1>
     </div>

     <!-- FOOTER -->
     <div data-role="footer" class="footer">
        You are not logged in!
     </div>
  </div>
  <!-- /COURSES -->

  <!-- SEARCH -->
  <div data-role="page" id="search">

     <!-- This is the MAIN section -->
     <div data-role="content" class="ui-content" id="searchContent">
        <h1>Search Section</h1>
     </div>

  </div> <!-- /search -->

  <!-- SUBMIT -->
  <div data-role="page" id="submit">

     <div data-role="content" class="ui-content" id="submitContent">
        <h1>Submiiiiit</h1>
     </div>

  </div> <!-- /submit -->

  <!-- ACCOUNT -->
  <div data-role="page" id="account">

     <div data-role="content" class="ui-content" id="accountContent">
        <h1>Accoooount</h1>
     </div>

  </div>
  <!-- /Account -->
  </body>
  </html>

My script:

  $(document).ready(function()
  {
     $currentPage = "#coursesContent";   // Holds the current page.

     // Function for Courses button
     $(document).on("click","#coursesButton",function(e)
     {
        e.preventDefault();

        $($currentPage).html($('#coursesContent').html());

        $currentPage = "#coursesContent";
        console.log($currentPage);
     });

     // Function for the Search Button in nav bar.
     $(document).on("click","#searchButton",function(e)
     {
       e.preventDefault();

       $($currentPage).html($('#searchContent').html());

       //Sets  current page to Search Content (search page)
       $currentPage = "#searchContent";

       console.log($currentPage);
     });

     // Function for Submit button.
     $(document).on("click","#submitButton",function(e)
     {
        e.preventDefault();

        $($currentPage).html($('#submitContent').html());

        $currentPage = "#submitContent";

        console.log($currentPage);
     });

     // Function for Account button
     $(document).on("click","#accountButton",function(e)
     {
        e.preventDefault();

        $($currentPage).html($('#accountContent').html());

        $currentPage = "#accountContent";
        console.log($currentPage);
     });

  });

Is there some way I can call the script to re-load on every button-click? It seems like the variable is changing, but the contents refresh isn't taking place.

Many thanks to any help.

Also, any suggestions on other means to implement this are very welcome.

Cheers!

Was it helpful?

Solution

A simple one-page navigation script I often use looks like this:

$(document).ready(function() {
    $("#coursesButton").on("click", function(e) {
        e.preventDefault();
        $("#mainContent").load("/snippets/courses.html");
    }

    $("#accountButton").on("click", function(e) {
    //... etc.
}

Use as many of these blocks as you have menu items.

Basically, repeat and then /snippets/courses.html is changed to /snippets/account.html, etc. Keep your extra HTML files in the snippets folder (or however you'd like to arrange it).

The constant is the <div> with an ID of #mainContent. This way, you are simply swapping in/out the contents of that main DIV without having to keep other elements in the document when they aren't in use.

There may be a more elegant way to do this using $(this) and matching snippet filenames to the button's ID, but the above method should work in a way that's a bit easier to understand than what you're currently doing.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top