CODEWITHSUNDEEP
javascriptphpjqueryhtml
OscuroAA
OscuroAA

Reputation: 252

Using PHP to replace only (current) <div> content from <form> submit button

I have a single 'index' page that replaces the 'mainContents' when any button in the navBar is pressed.

This is so that I can re-load only the contents needed, and keep the header, navbar, and footer static.

This is causing me trouble in my "search.html" page (which is loaded into the #mainContents ).

search.html has a form which (will) call some sql queries via PHP. When I initially designed this webpage I had it spanning across multiple pages; re-loading header, footer, etc each time. So I just re-loaded the whole page with the new 'php' contents (which will be a table populated with data).

Now that 'search.html' is located inside the #mainContents of the 'index.html' page, when the 'go/submit' button is pressed, the entire page is reloaded, and I lose my header and footer...

I've been at this for a while now, and I am at a loss as to how to make it work.

I'll include relevant pages/scripts (though it seems like a bit much, I'd rather you have the information available)

Index.html (main page):

  <!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="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
  </head>
  <body>

  <div data-role="page" id="noteVote"> 
     <!-- HEADER -->
     <div data-role="header" align="middle" class="header">
        <img src="images/banner_post_it.png" align="middle" alt="Banner Image" height="100" width="250"/>
        <!-- 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>
        <!-- /NAVBAR -->
     </div>
     <!-- /HEADER -->

     <!-- 
        This is the MAIN section.
        This is where the contents will be replaced
     -->
     <div data-role="content" class="ui-content" id="mainContent">
                 Site-related text.
     </div>
     <!-- /MAIN -->

     <!-- FOOTER -->
     <div data-role="footer" class="footer">
        This is the footer.
     </div>
     <!-- /FOOTER -->

  </div>
  <!-- /INDEX -->
  <script src="./scripts/navScript.js"></script>
  </body>
  </html>

navScript.js is the script that causes the nav-buttons to replace only the #mainContents :

  $(document).ready(function() {
      // Actual script includes code for each nav-bar button.
      $("#searchButton").on("click", function(e) {
          e.preventDefault();
          $("#mainContent").load("./pages/search.html");   
  });

Then the 'search.html' which only replaces the #mainContent . (this is where it gets messy, as I've tried a few ways to get this to work how I want):

  <!DOCTYPE html>
  <html>
  <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
     <div class="main" data-role="content" id="main">
        <div id="holder">
           <h1>Search</h1>
            <div class="left">
              <form id="searchForm">
                 <b>Course:</b>
                 <select name="course">
                    <option value="*">All</option>
                    <option value="COMM2216">COMM-2216</option>
                    <option value="COMP2121">COMP-2121</option>
                    <option value="COMP2510">COMP-2510</option>
                    <option value="COMP2526">COMP-2526</option>
                    <option value="COMP2714">COMP-2714</option>
                    <option value="COMP2721">COMP-2721</option>
                 </select>

                 <p>
                 Type:
                 <input type="radio" name="type" value="lec">Lecture
                 <input type="radio" name="type" value="lab">Lab
                 <input type="radio" name="type" value="*" checked>Both

                 <p>
                 <input type="submit" value="Go" id="searchGoButton">
              </form>
            </div>
        </div>
     </div>
     <script src="./scripts/searchGo.js">
     </script>
  </body>
  </html>

And finally 'searchGo.js', is the code that is supposed to enforce only the "search.html" page to change (inside the #mainContent ), so that the header, footer, etc stay present.

  $(document).ready(function() {
            $("#searchForm").submit(function(e)
            {
              e.preventDefault();
              $.ajax({
                 type: "POST",
                 url: "./scripts/php_test.php",
                 data: "blah",
                 success: function(){
                    $("#holder").load("../pages/account.html");
                 }
              }) ;
           } );

This is just a sample/test to see if it would work; but it reloads the whole page.

It is my intention that searchGo.js will load a .php script that will call the sql queries, and populate a table and replace the #mainContent div with its

Again, I apologize for all the code, and if my problem is vague... I'm totally stumped, and would greatly appreciate any help. My alternative is to go back to reloading the navbar and header with each page; which I will resort to soon if no one can offer assistance.

Any suggestions of alternate means to accomplish this task are more than welcomed.

Upvotes: 1

Views: 1705

Answers (2)

Rok Burgar
Rok Burgar

Reputation: 949

Try to add onsubmit="return false;" on the search form tag. The problem is that you don't override default submit button form behavior. That is the reason that your form submitting is refreshing the whole page.

Something like this:

  <form onsubmit="return false;">
      <input id="submitButton" type="submit" />
  </form>

You can call your search function like this

  $(document).ready(function() {
    $('#submitButton').on('click', function() {
      console.log('Form submitted');
      console.log('Ajax call');
      console.log('Insert returned data');
    });
  });

Js bin link

Upvotes: 1

Jay Blanchard
Jay Blanchard

Reputation: 34416

You need to delegate the event for that button - 

$("body").on("submit", "#searchForm", function(e)...

Because search.html is loaded into the DOM via AJAX jQuery is "unaware" of it. The submit bubbles up the chain though and can be "captured" at a level that was already there when jQuery initially ran. The submit bubbles up to the body then jQuery sees it and acts.

Upvotes: 1

Related Questions