How to open a pop up with a unique message id from my database

Question

i am trying to create a pop up message dialog in my website. when a user clicks a reply icon, a pop up message would appear and he would have a textarea to answer a question he's been asked.

now when a use clicks my tag it opens the dialog regardless of which message hes pressed in his messages inbox.

i need a way in which i can only make the dialog open with the unique id of the message.

Right now, everytime a user clicks any of the messages to reply to, unless they are the first one, it would always start answering from top to bottom. i want it to answer the specific message he clicked on.

here is my pop up:

<div class="sitemodal fade" id="reply-popup">
    <div class="sitemodal-dialog" >

      <!-- siteModal content-->
      <div class="sitemodal-content">
        <div class="sitemodal-header">
          <button type="button" class="close-popup">&times;</button>
          <p id="showMesgID" style="display:none;"></p>
          <h4 class="sitemodal-title" style="font-size: 20px;">Reply</h4>
        </div>
        <hr style="margin-top: 8px;margin-bottom:2px;">
        <div class="sitemodal-body" style="padding: 0px 0;">
          <form enctype="multipart/form-data" method="Post" action="" name="msgform" onsubmit="">
        <textarea placeholder="Reply to the eitiraaf" name="textarea1"  onkeyup="countChars(this);" id="textarea1" maxlength="250" rows="3" cols="2"
            style=" text-align: left; resize:none; margin-top:4px; 
                width:90%;min-width:200px; height:100px; background: #fff; border-radius: 6px;
                border: 0.8px solid #ac68cc;
                 max-width:500px;
                 padding:6px;"></textarea>

      
        </div>
        <hr style="margin-top: 16px;margin-bottom:2px;">
        <div class="sitemodal-footer" style="display: flex;margin-bottom:8px;">
            <input style="padding: 8px;margin-top:16px; position:inherit;  width:25%; background: #ac68cce3; border-radius: 6px; border: 0.6px solid #ac68cce3; color: #fff; max-width:330px;"
        class='main-div' type="submit" value="Reply" name="sendmsg">
         
    
        </div>
      </div>
          </form>
    </div>
</div>

here is my tag that opens the pop up:

<a class="msg-icon2 popup-button"  id=""> <i class="fas fa-reply"></i></a>//this is the icon the user presses to open the pop up. here is where i want things to be unique to each individual message.

here is my php handling the submission of the form inside the pop up.

if (isset($sendmsg)){

            $msg_id=$row['msgid'];
    
        
        
            $txt = $_POST['textarea1'];
        
    
                date_default_timezone_set("Asia/Bahrain");
                $d = date('Y-m-d H:i:s');
                $from = $_SESSION['active_user_id'];
                $user_name = $_SESSION['active_user'];
                $query = "INSERT INTO messages_reply (from_id, question, answer, message_id ,date,to_id) VALUES
                (?,?,?,?,?,?)";
                $result = $db->prepare($query);
                $result->bindParam(1, $from);
                $result->bindParam(2, $question);
                $result->bindParam(3, $txt);
                $result->bindParam(4, $msg_id); 
                $result->bindParam(5, $d);  
                $result->bindParam(6, $to_id);                  
                $result->execute();
                if ($result)
                {
                    $deleteMessage = $db->prepare("DELETE FROM messages WHERE msgid=?");
                    $deleteMessage->bindValue(1,$msg_id);
                    $deleteMessage->execute();
                    
            
                    
                    header( "location:profile" );
                    
                    $success = true;
                }
                
                
                
                $db=NULL;
            
            
        
        }

i tried many ways to make this pop up work. ajax, javascript functions and many different approaches to putting and revealing my pop up. but nothing worked. please if anyone has any suggestion i would greatly appreciate it.

My main question is: how can a user reply to a specific question he presses the icon of?

Let's start with this try, how many popups printed on the source code? if each message has it's own popup, then the issue is with id="reply-popup" rename it to something reply-popup-{$id} — skmail, Aug 10 '20 at 21:36
yes, i tried putting the pop up in my while loop that loops every message a user gets, but that caused issues since it would answer the first instance of a message id it would find. now i have the pop up outside the loop but still having the same issue. — , Aug 10 '20 at 21:43
can you show the javascript code that triggers the popup to open — skmail, Aug 10 '20 at 21:45
its a CSS that triggers it ` `//this is the icon the user presses to open the pop up. here is where i want things to be unique to each individual message. — , Aug 10 '20 at 21:48
there must be a javascript code to show/hide the modal/popup do you use bootstrap or something else? — skmail, Aug 10 '20 at 21:49
how do i make it open the modal based on the {id} you suggested. i just implemented that and its a great idea @SolaimanKmail — , Aug 10 '20 at 21:52
I will say I don't understand where are messages, how you get them, and where is that button you are talking about, but you keep mentioning that you want it to be unique on key press. So here is code i write for other question that on every key-down gives new unique class or id to clicked element: https://stackoverflow.com/a/63121910/7158959 — ikiK, Aug 10 '20 at 21:53
button is displayed in the question, messages i get them from my messages table from my db from a while loop. — , Aug 10 '20 at 21:56
where is message id stored before clicking button ? you just need to trigger popup open and get the id of message than add it to input in your popup inside form using javascript and jquery maybe — Youssef, Aug 10 '20 at 21:59

score 0 · Answer 1 · answered Aug 10 '20 at 22:39

as you said in comments you are using bootstrap modal to open popup so you need to change message id in your form when popup opened.

button reply :

<a class="btn btn-primary reply" data-id="544" data-toggle="modal" data-target="#reply-popup"> Reply</a>

popup :

<div class="fade modal" id="reply-popup">
    <form action="post">
      <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body">
            <input type="hidden" name="msgid" value="">
            <textarea class="form-control" name="message"></textarea>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Send</button>
        </div>
      </div>
    </div>
  </form>
</div>

handle popup open :

jQuery(document).ready(function(e) {
    $(document).on('shown.bs.modal','#reply-popup', function (e) {
        var messageId = $('.reply').data('id');
      $('#reply-popup input[name="msgid"]').val(messageId);
    });
});

example in jsfiddle : https://jsfiddle.net/hamdane/jky4m2s3/

How to open a pop up with a unique message id from my database

1 Answers1