JQuery Dialog Page

[junkie8]

Hello,

In my php code, I am retrieving entries from a table in the database and displaying them on the webpage using a while loop.

The while loop creates a button that opens a dialog form when clicked and it displays some values from the database.

With my code below, the dialog form only always display values the topmost record no matter which button is clicked. In other words, the subj, cont, stats, pid attributes of the button do not get updated even though the value of $row{'message_subject'} inside the button tag is showing me the correct value for each loop.

<button class='btn-msg' pid=".
$row{'patient_id'}." subj='".
$row{'message_subject'}."' cont='".
$row{'message_content'}."' stats='".
$row{'status'}."'>".
$row{'message_subject'}.
"</button></td>";


Can someone tell me what is wrong and how I can fix this?

javascript code ...
$(function() {
$( ".btn-msg" ).click(function() {
var pid = $('.btn-msg').attr('pid');
var subj = $('.btn-msg').attr('subj');
var cont = $('.btn-msg').attr('cont');
var stat = $('.tbn-msg').attr('stats');

$("#msg-subj").html(""+subj);
$("#msg-content").val(""+cont);

$( "#msg-dialog" ).dialog({
autoOpen:false,
hide: "puff",
show: "slide",
buttons: {
Send: function() {

$( this ).dialog( "close" );
},
Close: function() {

$( this ).dialog( "close" );
}
}
});
$( "#msg-dialog" ).dialog( "open" );
});
});


php ... code
while ($row = mysql_fetch_assoc($query_exec)) {
echo "<tr>";
echo "<td>".$patient." </td>";
echo "<td>".$row{'date'}."</td><td>".$row{'time'}."</td>";
if($row{'message_subject'}!= null && $row{'message_content'}!=null) {
echo "<td>
<button class='btn-msg' pid=".
$row{'patient_id'}." subj='".
$row{'message_subject'}."' cont='".
$row{'message_content'}."' stats='".
$row{'status'}."'>".
$row{'message_subject'}.
"</button></td>";

} else {
echo "<td>". $row{'voice_file'}."</td>";
}
echo "<td>".$row{'status'}."</td>";
echo "</tr>";
}

Dialog Form:
<div id="msg-dialog">
<h3 id="msg-subj"></h3>
<select id="msg-status">
<option value="unread">Unread</option>
<option value="read">Read</option>
<option value="respond">Responded</option>
<option value="pending">Pending</option>
</select>
<textarea id="msg-content"></textarea>
<textarea id="msg-response"></textarea>
</div>

 

[junkie8]

I seems like my question is not very clearly stated, so I am rewriting it.

when the button below is clicked, the javascript function that displays a dialog form gets called.
<button class='btn-msg' pid=".
$row{'patient_id'}." subj='".
$row{'message_subject'}."' cont='".
$row{'message_content'}."' stats='".
$row{'status'}."'>".
$row{'message_subject'}.
"</button></td>";

The javascript code needs some attributes of the button pid, subj, cont, stats that are associated with the button that was clicked.
However, the loop is not updating the button attributes pid, subj ... with new values of $row{'patient_id}, $row{message_subject} ... each time it loops.

I know the while loop is correct and it is working because $row{'message_subject}
within the button tag, i.e. <button ...> $row{'message_subject} </button>, is being correctly displayed.

In short, the loop does not update button attributes but it updates the button label.

Why is this happening and how can it be fixed?







javascript code ...
$(function() {
$( ".btn-msg" ).click(function() {
var pid = $('.btn-msg').attr('pid');
var subj = $('.btn-msg').attr('subj');
var cont = $('.btn-msg').attr('cont');
var stat = $('.tbn-msg').attr('stats');

$("#msg-subj").html(""+subj);
$("#msg-content").val(""+cont);

$( "#msg-dialog" ).dialog({
autoOpen:false,
hide: "puff",
show: "slide",
buttons: {
Send: function() {

$( this ).dialog( "close" );
},
Close: function() {

$( this ).dialog( "close" );
}
}
});
$( "#msg-dialog" ).dialog( "open" );
});
});


php ... code
while ($row = mysql_fetch_assoc($query_exec)) {
echo "<tr>";
echo "<td>".$patient." </td>";
echo "<td>".$row{'date'}."</td><td>".$row{'time'}."</td>";
if($row{'message_subject'}!= null && $row{'message_content'}!=null) {
echo "<td>
<button class='btn-msg' pid=".
$row{'patient_id'}." subj='".
$row{'message_subject'}."' cont='".
$row{'message_content'}."' stats='".
$row{'status'}."'>".
$row{'message_subject'}.
"</button></td>";

} else {
echo "<td>". $row{'voice_file'}."</td>";
}
echo "<td>".$row{'status'}."</td>";
echo "</tr>";
}

Dialog Form:
<div id="msg-dialog">
<h3 id="msg-subj"></h3>
<select id="msg-status">
<option value="unread">Unread</option>
<option value="read">Read</option>
<option value="respond">Responded</option>
<option value="pending">Pending</option>
</select>
<textarea id="msg-content"></textarea>
<textarea id="msg-response"></textarea>
</div>

 

[jpadie]

the normal grammar for php output is

<?php echo $row['keyName'];?>
//or
<?= $row['keyName'];?> //if you have short tags turned on

so I would see the block being better written thus

echo <<<HTML
<td>
<button class='btn-msg' pid="{$row['patient_id']}" subj="{$row['message_subject']}" cont="{$row['message_content']}" stats="{$row['status']}">{$row['message_subject']}</button>
</td>
HTML;

try with this. If it does not work then post back as follows:

1. ALWAYS enclose all code within [ignore]

[/ignore] tags. it is _very_ difficult to read if you do not.
2. If you are asking a javascript question post the rendered code from your browser, not the underlying php. i.e. use view-source - or provide a link to the site.
3. if you are posting a php question do so in the php forum. if you don't know which the question is, then post here and we may redirect you.

 

[junkie8]

thank you for the respone, i was able to figure out this problem by changing

var pid = $('.btn-msg').attr('pid');

to

var pid = $(this).attr('pid');