Использование jquery ui dialog и php

Question

Я пытаюсь свести к минимуму переходы страниц, поэтому я использовал объект jQuery jQuery для размещения того, что нужно видеть клиенту. В рамках аккордеона проекта я хочу указать диалоговые кнопки с названием проекта. Когда клиент нажимает на диалоговое окно, появится окно с информацией о деталях проекта. Мне удалось собрать все вместе под правильным аккордеоне, но я не могу заставить кнопку диалога отображать каждую деталь проекта. Я могу получить только первый проект, все проекты или его список, как сейчас.

Аккордеон и элементы диалога отлично работают, я просто не могу получить каждое диалоговое окно каждой кнопки, чтобы содержать уникальные данные 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?

Сначала вы должны сгенерировать jquery-диалоги с помощью $("#id").dialog; то вы должны привязать функции 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 соединяет каждую пару с двумя кнопками. Но если ваш <button> является alw AYS размещены только после <div> проекта, есть более простой способ кодирования:

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

Я закодирован их на jsfiddle: demo