我的网站有'动态'内容，'静态'导航按钮在点击时只替换某些div内容。
我成功地得到我的php/ajax结果回到一个对话框，但我不能理解如何创建这个对话框在我的当前页面。
我当前代码的结果是整个"search.html"被这个新页面取代，它打开了一个对话框(这几乎是我想要的)。这将导致新页面的背景为白色，结果显示在顶部的对话框中。
(这都发生在我的'index.php'的div中)
我要做的是保持我的初始页面在对话框后面。
我试着在javascript中创建一个"对话框"对象，因为一些研究建议可能会起作用，然后调用。dialog('open')。这导致了一个"打开不是一个函数"的错误(释义)。
进一步的研究表明JQM对话框与JQ UI对话框不一样。这就是我被难住的地方，然后尝试了我现在的"解决方案"。
我的'search.html'(加载在我的索引页内的div中):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- Removed class="main" -->
<div data-role="content" id="main">
<div id="holder">
<h1>Search</h1>
<div data-role="fieldcontain" id="center">
<form name="searchForm" id="searchForm" onsubmit="return false;">
<div id="term">
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain" data-mini="true">
<input type="radio" name="termChoice" id="term1" value="1"/>
<label for="term1">Term 1</label>
<input type="radio" name="termChoice" id="term2" value="2" />
<label for="term2">Term 2</label>
<input type="radio" name="termChoice" id="term3" value="3" />
<label for="term3">Term 3</label>
<input type="radio" name="termChoice" id="term4" value="4" />
<label for="term4">Term 4</label>
</fieldset>
</div>
<p/>
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<select id="courseSelect" name="courseSelect">
<option value="null">Select Course</option>
</select>
</fieldset>
<p />
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<input type="radio" name="type" value="lec" id="lec"/>
<label for="lec">Lecture</label>
<input type="radio" name="type" value="lab" id="lab">
<label for="lab">Lab</label>
<input type="radio" name="type" value="*" id="both" checked="checked">
<label for="both">Both</label>
</fieldset>
<input type="range" name="numberSlider" id="numberSlider" value="0" min="0" max="35" />
<p/>
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<input type="submit" value="Go">
</fieldset>
</form>
</div>
<p style="font-size:9px"><i>Note: Zero ('0') on slider indicates *All* lab/lecture numbers.</i></p>
</div>
</div>
<script src="./scripts/searchGo.js"></script>
<script src="./scripts/dynamicSelect.js" />
</body>
</html>
$(document).ready(function() {
$("#searchForm").submit(function(e)
{
e.preventDefault();
var term = document.forms["searchForm"]["termChoice"].value;
if(term==null || term=="")
{
alert("Select Term and Course.");
return false;
} else {
var formData = $("#searchForm").serialize();
var trimmedFormData = $.trim(formData);
$.ajax({
type: "POST",
url: "./scripts/search_result.php",
data: trimmedFormData,
success: function(data){
$("#main").html(data).dialog().trigger('create');
$(this).enhanceWithin();
}
});
}
});
});
我发现$(document).ready(function() {});不能在jQuery Mobile中使用。虽然不正确，但网站运行正常，我很确定这与我目前试图解决的问题无关。
因为我正在加载整个。html/.php文件内一个div在我的'index.php'，使用'div data-role="page" '在我的search_result.php (ajax成功后加载)是没有影响。
任何建议或建议都是非常感谢的。我是新的AJAX, jQuery/jQuery移动，不知道如何得到我正在寻找的结果。
所有我想要的是有'search_result.php' ("data")加载在一个对话框中，打开顶部我的"search.html"页面…
抱歉写了这么多代码/长文。
干杯…
对于遇到同样问题的人，这里有一个解决方案:
根据@Gajotres的建议和示例，我的代码看起来像这样。
它达到了我想要的结果;在当前页面上显示一个弹出式，其中包含从PHP查询中检索到的'data'。
我的新"searchGo.js":
$(document).ready(function() {
$("#searchForm").submit(function(e)
{
e.preventDefault();
var term = document.forms["searchForm"]["termChoice"].value;
var closeBtn = $('<a href="#" data-rel="back" data-role="button" data-theme="b" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>').button();
if(term==null || term=="")
{
alert("Select Term and Course.");
return false;
} else {
var formData = $("#searchForm").serialize();
var trimmedFormData = $.trim(formData);
$.ajax({
type: "POST",
url: "./scripts/search_result.php",
data: trimmedFormData,
success: function(data){
var popup = $("<div/>", {
"data-role": "popup",
"class" : "ui-content"
}).css({
"width": $(window).width()*0.6,
"height": $(window).height()*0.6
}).append(closeBtn).append(data);
// Append it to active page
$(".ui-page-active").append(popup);
// Create it and add listener to delete it once it's closed
// open it
$("[data-role=popup]").on("popupafterclose", function () {
$(this).remove();
}).on("popupafteropen", function () {
$(this).popup("reposition", {
"positionTo": "window"
});
}).popup({
dismissible : false,
theme : "b",
overlayTheme : "b",
transition : "pop"
}).enhanceWithin().popup("open");
}
});
}
});
});
它基本上创建了一个弹出窗口和一个关闭按钮，然后将关闭按钮附加到弹出窗口，将php请求数据附加到弹出窗口，并将弹出窗口附加到当前活动页面(据我的理解)。