使用 jquery ui 对话框和 php

Question

我试图尽量减少跳转页面，所以我使用手风琴 jquery ui object 来嵌套客户需要看到的内容。在手风琴项目下，我想列出具有项目名称的对话框按钮。当客户单击该对话框时，将弹出一个显示项目详细信息的框。我已经设法将所有内容放在正确的手风琴下，但我似乎无法获得显示每个项目详细信息的对话框按钮。我只能得到第一个项目，所有的项目，或者按现在的样子列出来。

手风琴和对话框元素工作得很好，我只是无法让每个按钮对话框包含唯一的 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> &nbsp;' . $projectId . '<br>';
        echo '<b>Project Name:</b> &nbsp;' . $projectName . '<br>';
        echo '<b>Project Date:</b> &nbsp;' . $projectDate . '<br>';
        echo '<b>Verifier:</b> &nbsp;' . $projectStaff . '<br>';
        echo '<b>Report Link:</b> &nbsp;' . "<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>';
}

这是我正在使用的 header 部分中的脚本：

<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>

Answer 1

你检查过jqueryui-dialog的用法了吗？

首先，您应该使用 $("#id").dialog 生成 jquery 个对话框；那么你应该将click()函数绑定到每个按钮。注意：对话框<div>和<button>总是成对工作，所以你应该避免使用相同的id 每个 <div>.

所以修改你的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>';
}

在那之后，你的 html 输出应该是这样的：

<div class="dlg" id="dialog-1">
  <p>....
</div>
<button class="dlg_btn" data-dlg="1">Project 1</button>

现在你的 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>

注意 id 连接每个 div-按钮 pair.But，如果你的 <button> 总是放在项目的 <div> 之后，那里是一种更简单的编码方式：

$(".dlg_btn").click(function(){
  $(this).prev().dialog("open");
});

我已经在 jsfiddle 上编写了它们：demo

使用 jquery ui 对话框和 php

Using jquery ui dialog and php

javascript

php

jquery

jquery-ui

filemaker