INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

JQuery Dialog Page

JQuery Dialog Page

(OP)


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>

RE: JQuery Dialog Page

(OP)
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>

RE: JQuery Dialog Page

the normal grammar for php output is

CODE

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

so I would see the block being better written thus

CODE

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 [code][/code] 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.

RE: JQuery Dialog Page

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

CODE

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

CODE

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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close