使用 jquery ui 对话框和 php - Using jquery ui dialog and php

Using jquery ui dialog and php

本文关键字：php 对话框 ui jquery 使用 | 更新日期: 2023-09-27

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

手风琴和对话框元素工作得很好，我只是无法让每个按钮对话框都包含唯一的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>';
}

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

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

你有没有检查过jqueryui-dialog的用法？

首先，你应该使用 $("#id").dialog 生成 jquery 对话框;然后你应该click()函数绑定到每个按钮。注意：对话框<div>和<button>始终成对工作，因此应避免在每个<div>上使用相同的id。

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

请注意连接每个div 按钮对id。但是，如果您的<button>总是放在项目<div>之后，则有一种更简单的编码方法：

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

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