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

Question

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.

Rok Burgar · Accepted Answer · 2014-05-08 21:53:53Z

1

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

answered May 8, 2014 at 21:53

Rok Burgar

9495 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

OscuroAA Over a year ago

Thank you. This is working well. For anyone interested, I simply added a this override of the #submitButton function into 'searchGo.js', and added my ajax-function after it. It is successfully refreshing only the #mainContent <div> of my index.html. Thank you!!

Jay Blanchard · Accepted Answer · 2014-05-08 21:39:03Z

1

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.

answered May 8, 2014 at 21:39

Jay Blanchard

34.5k17 gold badges82 silver badges130 bronze badges

3 Comments

OscuroAA Over a year ago

Thank you for your quick response! I suppose it should be obvious, but this would be included in the 'searchGo.js' script file? After the "$(document).ready(function() {", then "function(e)..." Would be my "function(e){ $.ajax({ etc,etc..." ?

Jay Blanchard Over a year ago

It really needs to be in the doc ready of the file that you're loading into, index.html and YES, this is just the start of your AJAX request from searchGo.js

OscuroAA Over a year ago

Thank you for your time. I appreciate your answer. Due to the simplicity of implementing the secondary answer I received, I did not attempt to get your fix working. I do not doubt that it is correct. If I run into more trouble along the way, I will be sure to try your solution as an alternative. Once again, many thanks for your assistance. The community here is awesome. Cheers!

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related