Question

我有一个'索引'页面，当按下导航栏中的任何按钮时，它会替换'mainContents'。

这样我只能重新加载所需的内容，并使标题，导航栏和页脚保持静态。

这导致我的“search.html”页面（加载到#mainContents中）出现问题。

search.html有一个表单，它将通过PHP调用一些sql查询。当我最初设计这个网页时，我将它跨越多个页面;每次重新加载页眉，页脚等。所以我只是用新的'php'内容重新加载了整个页面（这将是一个填充了数据的表格）。

现在'search.html'位于'index.html'页面的#mainContents内部，当按下'go / submit'按钮时，整个页面被重新加载，我丢失了页眉和页脚。 ..

我已经有一段时间了，我对如何使其发挥作用感到茫然。

我会包含相关的页面/脚本（虽然看起来有点多，但我宁愿您提供相关信息）

Index.html（主页）：

  <!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是导致导航按钮仅替换#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");   
  });

然后'search.html'只替换#mainContent。（这是它变得混乱的地方，因为我已经尝试了几种方法来实现我的工作方式）：

  <!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>

最后'searchGo.js'是所谓的代码，只强制执行“search.html”页面更改（ in #mainContent），这样页眉，页脚等就会存在。

  $(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");
                 }
              }) ;
           } );

这只是一个样本/测试，看看它是否可行;但它会重新加载整个页面。

我的意图是searchGo.js将加载一个.php脚本，该脚本将调用sql查询，并填充一个表并用其

替换#mainContent div

再次，我为所有代码道歉，如果我的问题含糊不清......我完全难过，并且非常感谢任何帮助。我的另一种方法是回到每个页面重新加载导航栏和标题;如果没有人可以提供协助，我将尽快诉诸。

任何有关完成此任务的替代方法的建议都受到欢迎。

Answer 1

您需要委派该按钮的事件 -

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

因为search.html通过AJAX加载到DOM中，所以jQuery“不知道”它。提交虽然在链中起泡，但可以在jQuery最初运行时已经存在的级别“捕获”。提交气泡到身体然后jQuery看到并行动。

Answer 2

尝试添加onsubmit =＆＃34; return false;＆＃34;在搜索表单标签上。问题是您不能覆盖默认的提交按钮表单行为。这就是您的表单提交刷新整个页面的原因。

这样的事情：

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

您可以像这样调用您的搜索功能

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

Js bin link

使用PHP从<form>提交按钮</form> </div>中仅替换（当前）<div>内容

2 个答案: