3

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

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

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

我使用的模态窗口被称为 SimpleModal，它的网站在这里

下面是 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";
    }
          ?>
4

3 回答 3

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 的 div 中simplemodal-data

注解：

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

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

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

于 2012-05-24T01:12:40.420 回答
0

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

但是，当使用 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>
于 2012-05-24T01:18:33.263 回答
0

我从另一个页面上的答案中发现了一个与此类似的问题，就像 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;
}
于 2012-05-24T17:39:37.977 回答