[英]Using jquery ui dialog and php
I am trying to minimize jumping pages around so I have utilized an accordion jquery ui object to nest what the customer needs to see. 我试图最小化跳转页面,因此我利用了手风琴jquery ui对象来嵌套客户需要查看的内容。 Under the project accordion I want to list dialog buttons that have the project name. 在项目手风琴下,我想列出具有项目名称的对话框按钮。 When the customer clicks on the dialog a box will pop out showing the project detail info. 当客户单击对话框时,将弹出一个框,显示项目详细信息。 I have managed to get everything together under the right accordion but I can't seem to get the dialog button to display each project detail. 我已经设法在正确的手风琴下将所有内容组合在一起,但是似乎无法获得显示每个项目详细信息的对话框按钮。 I can get the first project only, all of the projects or have it listed as it is now. 我只能得到第一个项目,所有项目,或者现在列出它。
The accordion and dialog elements are working great, I just can't get each button dialog to contain the unique projectID
data. 手风琴和对话框元素的效果很好,我只是无法让每个按钮对话框都包含唯一的projectID
数据。
foreach ($r->getRecords() as $project){
$projectId = $project->getField('ID_Project');
$projectName = $project->getField('Project_Name');
$projectDate = $project->getField('Date_Start');
$projectStaff = $project->getField('Staff');
$projectReport = $project->getField('MasterReport');
echo '<div id="dialog" title="Project Detail">';
echo '<p>';
echo '<b>Affidavit:</b> ' . $projectId . '<br>';
echo '<b>Project Name:</b> ' . $projectName . '<br>';
echo '<b>Project Date:</b> ' . $projectDate . '<br>';
echo '<b>Verifier:</b> ' . $projectStaff . '<br>';
echo '<b>Report Link:</b> ' . "<a href='includes/php/containerBridge.php?path=".urlencode($projectReport)."'>Click here to download PDF Report</a><br>";
echo '</p>';
echo '</div>';
echo '<button id="opener">' . $projectName . '</button><br>';
}
Here is the script in the header portion I am using: 这是我正在使用的标题部分中的脚本:
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
<script>
$(function() {
$( "#accordion" ).accordion({
heightStyle: "fill"
});
});
$(function() {
$( "#accordion-resizer" ).resizable({
minHeight: 250,
minWidth: 200,
resize: function() {
$( "#accordion" ).accordion( "refresh" );
}
});
});
</script>
Have you check the usage of jqueryui-dialog ? 您是否检查过jqueryui-dialog的用法?
First you should generate jquery dialogs by using $("#id").dialog
; 首先,您应该使用$("#id").dialog
生成jquery $("#id").dialog
; then you should bind click()
functions to each button. 那么您应该将click()
函数绑定到每个按钮。 Note : Dialog <div>
and <button>
always work in pairs, so you should avoid using same id
on each <div>
. 注意 :对话框<div>
和<button>
始终成对工作,因此应避免在每个<div>
上使用相同的id
。
So modify your php code, like this: 因此,修改您的php代码,如下所示:
foreach($r->getRecords() as $project){
//getField...
echo '<div class="dlg" id="dialog-'.$projectId.'" title="Project Detail">';
//...echo other contents
echo '<button class="dlg_btn" data-dlg="'.$projectId.'">' . $projectName . '</button><br>';
}
After that, your html output should like this: 之后,您的html输出应如下所示:
<div class="dlg" id="dialog-1">
<p>....
</div>
<button class="dlg_btn" data-dlg="1">Project 1</button>
Now your javascript should be: 现在您的JavaScript应该是:
<script>
//do bindings
$(".dlg").dialog({
autoOpen: false
});
//button click callback
$(".dlg_btn").click(function(){
var projectid = $(this).attr("data-dlg");
$("#dialog-"+projectid).dialog("open");
});
</script>
Note the id
connect each div-button pair.But, if your <button>
is always placed just after the <div>
of the project, there is a more simple way to code: 注意id
连接每个div-button对,但是,如果<button>
总是放在项目的<div>
之后,则有一种更简单的编码方式:
$(".dlg_btn").click(function(){
$(this).prev().dialog("open");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.