Using jquery ui dialog and php

Question

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

        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>';
}

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>

Answer 1

Have you check the usage of jqueryui-dialog ?

First you should generate jquery dialogs by using $("#id").dialog ; then you should bind click() functions to each button. Note : Dialog <div> and <button> always work in pairs, so you should avoid using same id on each <div> .

So modify your php code, like this:

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:

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

Now your javascript should be:

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

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

I've coded them on jsfiddle: demo