使用jQuery UI對話框和PHP

Question

我試圖最小化跳轉頁面，因此我利用了手風琴jquery ui對象來嵌套客戶需要查看的內容。 在項目手風琴下，我想列出具有項目名稱的對話框按鈕。 當客戶單擊對話框時，將彈出一個框，顯示項目詳細信息。 我已經設法在正確的手風琴下將所有內容組合在一起，但是似乎無法獲得顯示每個項目詳細信息的對話框按鈕。 我只能得到第一個項目，所有項目，或者現在列出它。

手風琴和對話框元素的效果很好，我只是無法讓每個按鈕對話框都包含唯一的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>

Answer 1

您是否檢查過jqueryui-dialog的用法？

首先，您應該使用$("#id").dialog生成jquery $("#id").dialog ； 那么您應該將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>

注意id連接每個div-button對，但是，如果<button>總是放在項目的<div>之后，則有一種更簡單的編碼方式：

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

我已經將它們編碼在jsfiddle上： 演示