Question

我有一个简单的应用程序here（QandATable2.php），当用户点击加号按钮时，它会打开一个模态窗口，它会显示存储在另一个页面中的详细信息（previousquestions.php）

现在我遇到的问题是，如果您在文本框空白时立即点击“搜索”按钮，您将看到它在自己的页面上加载页面，显示要在短语中输入的消息搜索，它还显示以前从模态窗口到该页面的所有功能。这是不正确的。

我想要它做的是，如果用户点击了搜索按钮，那么当它发布表单并输出消息时，它会在模态窗口内完成，而不是在它自己的整个页面上。那么有谁知道如何实现这一目标呢？

我使用的模态窗口称为SimpleModal，它的网站是here

下面是QandATable2.php代码，它显示加号按钮，它打开模态窗口，将模态窗口的内容链接到previousquestions.php页面：

<script type="text/javascript">

  function plusbutton()
    {

    $.modal( $('<div />').load('previousquestions.php #previouslink') );            
    return false;
}

</script>


<h1>CREATING QUESTIONS AND ANSWERS</h1>

<table id="plus" align="center">
<tr>
<th>
<a onclick="return plusbutton();">
<img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage"/>
</a>
<span id="plussignmsg">(Click Plus Sign to look <br/> up Previous Questions)</span>
</th>
</tr>
</table>

下面是previousquestions.php代码，它显示模态窗口中的详细信息以及存储搜索功能的位置：

<?php

      foreach (array('questioncontent') as $varname) {
        $questioncontent = (isset($_POST[$varname])) ? $_POST[$varname] : '';
      }

?>

    <div id="previouslink">
    <button type="button" id="close" onclick="return closewindow();">Close</button>
    <h1>PREVIOUS QUESTIONS</h1>

    <p>Search for a previous question by entering in a phrase in the search box below and submitting the phrase</p>

    <form action="previousquestions.php" method="post">
          <p>Search: <input type="text" name="questioncontent" value="<?php echo $questioncontent; ?>" /></p>
          <p><input id="searchquestion" name="searchQuestion" type="submit" value="Search" /></p>
          </form>

    </div>

    <?php 

    //...connected to DB

                if (isset($_POST['searchQuestion'])) {

                  $questionquery = "SELECT QuestionContent FROM Question
              WHERE(QuestionContent = '".mysql_real_escape_string($questioncontent)."')";

            if (empty($questioncontent)){
        echo "Please enter in a phrase in the text box in able to search for a question";
    }
          ?>

Answer 1

你可能想要使用AJAX，因为你已经在使用jQuery，你只需要这样的东西：

// override the "default" form submitting behavior with a callback function
$("form").submit(

    // this is the callback function for your form submit function.
    function(e)
    {

        // this prevents the page from reloading -- very important!
        e.preventDefault(); 

        // get the search data from the input textbox
        var s = $("input[name='questioncontent']").val();

        // see annotation
        $("#simplemodal-data").html("loading...")
           .load("previousquestions.php #previouslink", 
               { 
                   questioncontent : s,
                   searchQuestion : "Search"
               }
            );
    }); // end submit wrapper

这会将值发送到服务器并将其加载到ID为simplemodal-data

的div中

<强>注释：

代码中的最后一行做了几件事。首先，它用“加载”消息替换simplemodal DIV。同时，它向您的previousquestions.php页面发出POST请求。这部分{ questioncontent : s, searchQuestion : "Search"}是表单中的数据传递给PHP页面的地方，（请记住上面的变量var分配。最后，应该在simplemodal-data模式窗口中加载previousquestions.php页面的结果。

缺少的一件事是在load方法中添加#previousquestions，以便只有部分HTML文档插入到模式中。将整个HTML页面加载到另一个HTML文档中并不是一个好主意，而“加载”旨在让您只选择要插入的文档部分，这就是DIV。

我在php文件名后添加了“#previouslink”。这就是魔术发生的地方。浏览器知道从PHP文件中提取DIV并在页面上只插入该部分，没有<head> <body>或任何不需要的标记。

Answer 2

通过使用AJAX提交表单而不是使用页面重新加载新内容的默认行为，您可以实现所需的内容。您不能使用modal.load，因为您需要在请求中POST数据以获得适当的响应。

但是，当使用AJAX发布数据时，您可以将响应作为HTML并将该HTML添加到页面上的DIV，然后在该DIV容器上调用SimpleModal命令。

首先，修改表单上的提交按钮，使其为type =“button”而不是type =“submit”。这将阻止表单提交和重定向页面。或者，您可以添加event.preventDefault（）;并将false返回到表单提交点击处理程序（请参阅第二步），但在进行更改时尝试此方法可能更容易：

第1步：

<!-- change type to button -->
<input id="searchquestion" name="searchQuestion" type="button" value="Search" />

第2步：

为表单按钮创建一个处理程序，它使用serializeArray将表单序列化为字符串，然后将其POST到服务器。在成功回调处理程序中，您将获取HTML响应并使用新HTML替换模态窗口中的内容。这也会捕获错误（如果有），并提醒它们并将它们写入控制台：

$('form[type="button"]').click(function() {

  var dataString = $('form').serializeArray();

  $.ajax({
    url: "/previousquestions.php?t="+new Date().getTime(),
    type: "POST",
    data: dataString,           
    context: document.body,
    success: function(data){ 
   alert(data); // results from server, either the HTML page, or JSON/XML
       $('simplemodal-data').html(data);  // if HTML, just insert into div#results
    },
    error: function(jqXHR, textStatus, errorThrown) {
    if(window.location.hostname == "localhost") {
        alert("Error submitting the form :: " + textStatus + " : " + errorThrown);                        
    }
    console.error("Error submitting the form :: " + textStatus + " : " + errorThrown);
    }
  });
});

第3步：

最后，请确保您的previousquestions.php代码仅返回部分HTML文档，而不是完整的HTML文档。由于您将HTML注入现有页面，因此您不需要<html>，<head>或<body>部分。这些只会导致您的页面无法验证，并可能导致旧版浏览器出现意外行为。以下是您的回答可能如下所示的示例：

<div id="previouslink">
<button type="button" id="close" onclick="return closewindow();">Close</button>
<h1>PREVIOUS QUESTIONS</h1>

<p>Search for a previous question by entering in a phrase in the search box below and submitting the phrase</p>

<form action="previousquestions.php" method="post">
      <p>Search: <input type="text" name="questioncontent" value="test" /></p>
      <p><input id="searchquestion" name="searchQuestion" type="submit" value="Search" /></p>
      </form>

</div>


     <p>
         Your Search: 'test'     </p>


      <p>Number of Questions Shown from the Search: <strong>0</strong></p><p>Sorry, No Questions were found from this Search</p>

Answer 3

我从另一页的答案中发现了类似的问题，就像Bergi所说的那样，使用iframe比使用ajax更容易将内容显示在模态窗口中。所以这个问题的最佳答案就在下面，它显示了iframe如何用于上述问题：

  function plusbutton() { 
    // Display an external page using an iframe 
    var src = "previousquestions.php"; 
    $.modal('<iframe src="' + src + '" style="border:0;width:100%;height:100%;">');
    return false;
}

如何在模态窗口中显示内容？

3 个答案: