我有一个简单的应用程序 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>
下面是之前的questions.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";
}
?>
最佳答案
您可能想要使用 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 中
注释:
代码的最后一行做了几件事。首先，它将简单模态 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>或任何不需要的标记。
关于php - 如何在模态窗口中显示内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10729802/