Twitter Bootstrap Modal Dialog not working well.

Question

Good day, I am displaying members of a team each on a DIV. For each DIV, there is a message button for a user to send message. The message button fires up a Bootstrap modal dialog box where one can type the message. Now, my problem is that I want the name of person the message is being sent to, to appear at the top of the dialog box but it is not working. It only shows the name of the first person in the database even when I click on the third person.

<?php
require_once "include/db_handle.php";

$sql = "SELECT i.*, m.* FROM addclique i JOIN members m ON m.id = i.clique_id WHERE adder_id = :id";

foreach ($db->query($sql, array('id' => $_SESSION['id'])) AS $result)
{
echo "
    <div class='user_container'>    
     Name: </span> {$result['surname']} {$result['firstname']}</br>
            <a href='test.php' class='' data-toggle='modal' data-target='#basicModal'>Send Message</a>
    </div>

<div class='modal fade' id='basicModal' tabindex='-1' role='dialog' aria-labelledby='basicModal' aria-hidden='true'>
        <div class='modal-dialog'>
        <div class='modal-content'>
            <div class='modal-header'>
               <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
               <h4 class='modal-title points' id='myModalLabel'><span style ='color:black;'>To:</span> {$result['firstname']} </h4>
            </div>
            <div class='modal-body'>
                <form action='send.php' method='POST'>
                <textarea name='message' rows='10' cols='65'></textarea></br>

                </form>

            </div>
            <div class='modal-footer'>
               <button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
               <button type='button' class='btn btn-primary' data-dismiss='modal'>Send Message</button>
            </div>
        </div>
        </div>
    </div>

    </div>";
}
?>

Answer 1

<a href='test.php' class='' data-toggle='modal' data-target='#**basicModal**'>Send Message</a>

<div class='modal fade' id='**basicModal**' tabindex='-1' role='dialog' aria-labelledby='basicModal' aria-hidden='true'>

If you really want to do a modal for each user, consider do a variable for your modals.

Not sure, but something like that.

var $counter = 0;
foreach ($db->query($sql, array('id' => $_SESSION['id'])) AS $result)
{
echo "
    <div class='user_container'>    
     Name: </span> {$result['surname']} {$result['firstname']}</br>
            <a href='test.php' class='' data-toggle='modal' data-target='#basicModal".<?= $counter ?>." '>Send Message</a>
    </div>

        <div class='modal fade' id='basicModal".<?= $counter ?>."' tabindex='-1' role='dialog' aria-labelledby='basicModal' aria-hidden='true'>
        <div class='modal-dialog'>
        <div class='modal-content'>
            <div class='modal-header'>
               <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
               <h4 class='modal-title points' id='myModalLabel'><span style ='color:black;'>To:</span> {$result['firstname']} </h4>
            </div>
            <div class='modal-body'>
                <form action='send.php' method='POST'>
                <textarea name='message' rows='10' cols='65'></textarea></br>

                </form>

            </div>
            <div class='modal-footer'>
               <button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
               <button type='button' class='btn btn-primary' data-dismiss='modal'>Send Message</button>
            </div>
        </div>
        </div>
    </div>

    </div>";
    $counter++;
}
?>

Answer 2

You are creating modal for each user with same id i.e. basicModal. So if total user is 5 then 5 modal with same id is created on html page.

<a data-toggle='modal' data-target="#basicModal">Show Modal</a>

And in the above link you are calling #basicModal.So the js cant find the that particular user modal id because it is not unique.So it display the first modal with that id(or display none)

The problem should be solved if you use unique id in the link and modal .But a better option would be creating a single modal and setting the data through js so that multiple modal html is not placed in page.If you want to do it with jquery

<a href='' class='' data-toggle='modal' data-target='#basicModal' id="showModal">Send Message</a>

In jquery

$("#showModal").on("click",function(){
//set modal data
});