sending user a mesage by passing their id to a modal box

Question

I am trying to create a message form into a bootstrap modal by Passing the user username/id to the modal for identification.

here is an html/php code that made a list of registered users.

<div class="col-lg-4 col-md-4 col-sm-4 mb">
                            <div class="content" style="margin-bottom:5px;">
                            <ul class=" extended inbox">
                            <div class="notify-arrow notify-arrow-green"></div>
                            <li>
                                <p class="green">People you can follow</p>
                            </li>
                            <?php                
                            //Show all  users    
                             foreach ($users as $row) {
                            ?>
                            <li style="padding:3px; margin-bottom:3px; width:100%; background:#CF9;">
                                <a href="index.html#">
                                    <span class="photo" style="float:left; padding:4px;"><img alt="avatar" src="uploads/<?php echo $row['pix']; ?>" width="50" height="50"></span>
                                    <span class="subject" style="float:left;">
                                    <span class="from">
                                       <?php 
                                        echo '<a href="#">'.$row['user_lastname']. '&nbsp;'.$row['user_firstname'].'</a>';
                                        ?>  
<a class="" data-toggle="modal" data-target="#profile_pic_modal"><span class="glyphicon glyphicon-comment"></span></a>
                                       </span><br>
                                    <span class="time">
                                    <?php
                                    echo  (($row['receiver'] === $row['user_id'] && $row['sender'] === $user_id) 
                                     ? '<button class="btn follow following " rel="'.$row['user_id'].'">Following</button>'
                                     :' <button class="btn follow" rel="'.$row['user_id'].'">
                                        <i class="fa fa-user-plus alert-info"></i> Follow </button>');

                                       ?>
                                    </span>
                                    </span>

                                </a>
                            </li><br>

                            <?php
                             }
                             ?>
                            </ul>
                            </div>

When a user click on another user's message icon he/she should be able to send message. Could someone please show me how to do this using php/mysqli and ajax

Answer 1

Information like username (login?) and id of a logged user should be disposed by Session, unlike you have good reasons for not do that. When the user enters in the system, you will already load a bunch of data to be sure he is valid, so the practical way to not retrieving always all the data from the user logged in, that are currently using your system, it's always good to use SESSIONs to handle that (imagine a ton of users using your system and you needing to retrieve each of them to each click and routine inside the system).

In a practical way, just open your modal and validate your routine using the started session with the user information settled in.

To clarify about the OTHERS users data (those listed that the current user will click to send a message) you can have to methods:

YOUR HTML:

    <a href="#" data-userid='<?= $row['user_id']; ?>'>
<span class="photo" style="float:left; padding:4px;"><img alt="avatar" src="uploads/<?php echo $row['pix']; ?>" width="50" height="50"></span>
<span class="subject" style="float:left;">
<span class="from">
<?php 
  echo '<a href="#">'.$row['user_lastname']. '&nbsp;'.$row['user_firstname'].'</a>';
  ?>  
<a class="" data-toggle="modal" data-target="#profile_pic_modal"><span class="glyphicon glyphicon-comment"></span></a>
</span><br>
<span class="time">
<?php
  echo  (($row['receiver'] === $row['user_id'] && $row['sender'] === $user_id) 
   ? '<button class="btn follow following " rel="'.$row['user_id'].'">Following</button>'
   :' <button class="btn follow" rel="'.$row['user_id'].'">
      <i class="fa fa-user-plus alert-info"></i> Follow </button>');

     ?>
</span>
</span>
</a>

#Modal (Assuming you're using v4)

<div class="modal hide fade" id="user-message">
     <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
        <h3 class="hdrtitle">Hey <?= $_SESSION['login']; ?>, Send message to <span></span></h3>
     </div>
     <div class="modal-body">
         <label for='msg'>Message:</label>
         <textarea id='msg' rows="4" cols="50" name='msg'></textarea>
         <button id='send-msg'>Send Msg</button>
     </div>
</div>

and then showing it with:

$('a').on('click', function(){
//retrieve all other user data
$.get( "yourcode.php?userid=" + $(this).data('userid'), function( data ) {
  $('.modal h3 span').html(data.username);
  //FILL YOUR MODAL AS YOU WISH
  $('.modal').modal('toggle');
});

});

But the best way is to click and mount the modal in a partial view bringing the HTML already mounted with all information you want just to trigger the modal routine, avoiding html structure that the user don't really needs at first time access the page.

$('a').on('click', function(){
//retrieve all other user data
$.get( "partialmodal-sendmsg.php?userid=" + $(this).data('userid'), function( data ) {
   $('body').append(data);
  //FILL YOUR MODAL AS YOU WISH
  $('.modal').modal('toggle');
});

});

Some must reads about:

When should I use session variables instead of cookies?

http://cse.unl.edu/~riedesel/pub/cse413/Project%202/SESSION.pdf

Answer 2

First add a data-(anyName) tag like below

<?php $ID = 'The persons Username'; ?>

    <a href='#' class='btn btn-warning btn-xs open-AddBookDialog' data-id='$ID' data-toggle='modal'>My Modal</a>

Then put a input tag inside your modal body with a ID of example(MyID)

<input type="text" id="MyID">

Then using the code below (jquery) this will pass the value of data-id into that input tag on modal show.

$(document).on("click", ".open-AddBookDialog", function () {
     var myId = $(this).data('id');

     $(".modal-body #bMyID").val(myId);

      $('#myModal').modal('show');
});