0

Olá,

Estou fazendo um trabalho em que existe uma tabela com um botão em cada row, e em cada botão, quando clicado, aparece um modal. Este modal contém uma barra de input e uma div para onde será enviado o texto escrito no input.

O problema é, todos os modals aparecem com o mesmo texto, se escrever 'qwerty' por exemplo no primeiro, nos outros também aparece 'qwerty'.

Como posso evitar esta repetição em todos os modals?

$(document).ready(function () {

// send message to modal if message is empty do not send anything or if it is only spaces
$('#sendMessage').click(function () {
    if($.trim($('#inputToSend').val()) == ''){
        //do not send anything
    } else {
        $('.textModal').append('<p class="msg">' + $('#inputToSend').val() + '</p>');
        $('#inputToSend').val('').focus();
    }
});


// when modal button is closed text is erased
$(".modal").on("hidden.bs.modal", function() {
    $(".modal-body").html("");
    $(".modal-title").html("");
});
});
.textModal {
   margin: 0px 15px;
   font-size: 16px;
   padding: 10px;
   border: inset;
   height: 80px;
   overflow: auto;
   text-align:justify; 
}

.msg {
   margin: 0 0 10px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#" id="btn-id" class="btn btn-sm btn-focus" style="padding: 8px;" data-backdrop="false" data-toggle="modal" data-target="#basicModal"><i class="fa fa-envelope-o"></i></a>
                    
                
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog modal-lg">
     <div class="modal-content">
        <div class="modal-header">
           <h6 class="modal-title" id="title"></h6>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
               </button>
         </div>
         <div class="modal-body"></div>
         <div id="messageInput">
             <div class="textModal"></div>
             <input id="inputToSend" type="text" class="text form-control" placeholder="Insert Message...">
             <button id="sendMessage" class="btn btn-primary">Enviar</button>
         </div>
       </div>
     </div>
 </div>

6
  • 1
    Para resolver isso é só colocar para ao clicar no botão carregar os dados digitados para a linha específica e não carregar sempre os mesmos dados para todas as linhas como está ocorrendo. Commented 17/12/2019 às 13:30
  • E qual é a linha específica? @LaércioLopes
    – ack35
    Commented 22/12/2019 às 19:17
  • Acho que está a ir para a linha específica o problema é que, é como se eles abrissem o mesmo modal e como tem o mesmo id... não sei se é isso, e se é como resolver @LaércioLopes
    – ack35
    Commented 22/12/2019 às 19:17
  • Meu amigo, pensei que comentando já iria te ajudar, mas se não ajudou talvez precise estudar um pouco mais. Feliz Natal! Commented 24/12/2019 às 22:11
  • @LaércioLopes Só não percebi a que linha específica se refere.
    – ack35
    Commented 28/12/2019 às 21:17

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .