gpt4 book ai didi

php - 如何在模态窗口中显示内容?

转载 作者:搜寻专家 更新时间:2023-10-31 21:41:20 26 4
gpt4 key购买 nike

我有一个简单的应用程序 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com