Modal not showing long messages, problem with javascript function arguments

user_15426255 0
Viewed 77

I am facing a problem when I try to show message content in modal. I am trying to build a view which has a list of messages (table), and by clicking a message title, the user would be able to see the message content in modal view. It works for short messages, but for some reason nothing happens with longer messages. I think the issue is with my function 'displayMessage' to which I pass two elements: message title and message content.

Here is the snippet from the table view:

    <table id="msg-table" class="table table-striped">
        <thead>
          <tr>
            <th id="message-date" scope="col">Date</th>
            <th id="message-content" scope="col">Message</th>
          </tr>
        </thead>
        <tbody>
        {% for message in messages %}
           <tr>
             <td>{{ message.date }}</td>
             <td onclick="displayMessage('{{message.content,}}', '{{ message.title }}')">
               {{ message.title }}
           </tr>
        
          <div id="myModal" class="modal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                   <h5 class="modal-title" id="message-title"></h5>
                   <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                   </button>
                </div>
                <div class="modal-body">
                  <p id="message-content"></p>
                </div>
              </div>
            </div>
          </div>
        {% endfor %}
     </tbody>
   </table>

And this is the function for displaying the Modal:

   function displayMessage(message, title) {

     var modal = document.getElementById("myModal");
     var close = document.getElementsByClassName("close")[0];

     // Change the modal text and display
     document.getElementById("message-title").innerHTML = title;
     document.getElementById("message-content").innerHTML = message;
   
     modal.style.display = "block";

     close.onclick = function () {
       modal.style.display = "none";
     }
 
     window.onclick = function (event) {
       if (event.target == modal) {
         modal.style.display = "none";
       }
     }
   }

Can anyone help me to identify what am I doing wrong here? EDIT: I think it is problem with the .innerHTML part. It does not work if the message is multiline item, but not sure how to fix this..

bootstrap-modal django html javascript
1 Answers

I think you may not send the varialbe via javascript

    <table id="msg-table" class="table table-striped">
        <thead>
          <tr>
            <th id="message-date" scope="col">Date</th>
            <th id="message-content" scope="col">Message</th>
          </tr>
        </thead>
        <tbody>
        {% for message in messages %}
           <tr>
             <td>{{ message.date }}</td>
             <td onclick="displayMessage('{{message.id}}')">
               {{ message.title }}
           </tr>
        
          <div id="myModal{{message.id}}" class="modal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                   <h5 class="modal-title" id="message-title">{{ message.title }}</h5>
                   <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                   </button>
                </div>
                <div class="modal-body">
                  <p id="message-content">{{message.content}}</p>
                </div>
              </div>
            </div>
          </div>
        {% endfor %}
     </tbody>
   </table>

Javascript

function displayMessage(id) {
     var modal = document.getElementById("myModal"+id);
     var close = document.getElementsByClassName("close")[0];

     // Change the modal text and display
     modal.style.display = "block";

     close.onclick = function () {
       modal.style.display = "none";
     }
 
     window.onclick = function (event) {
       if (event.target == modal) {
         modal.style.display = "none";
       }
     }
   }

It is because the message title and content is updated with python variable. And you created a modal per a message

thank you

user_149795860
Related