- HTML
// I get what's inside the observacoes class and play for a textarea within the modal
<td>
<div class="observacoes">teste</div>
<button class="btn btn-default btn-modal-comentario" data-obs-id="{{ $lista->user_id }}">Adicionar/Atualizar Comentários</button>
</td>
- My Modal
// Inside it will be created a button dynamically ( Atualizar Comentário and will have a textarea with the text of the observations and will be editable)
<div class="modal fade" tabindex="-1" role="dialog" id="modal-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<div class="modal-conteudo"></div>
</div>
<div class="modal-footer">
<div class="modal-buttons">
</div>
</div>
</div>
</div>
</div>
- Jquery
// An update button will be created dynamically and a textarea within the modal
$(document.body).on("click", "#btn-modal-update", function(){
var $modal = "#modal-1";
alert($($modal).find("textarea").text());
$.ajax({
headers: {
'X-CSRF-Token': $('input[name="_token"]').val()
},
url: "{{ URL::to('lista-contatos/update') }}",
data: {
"id": get_id,
"observacao": $($modal).find("textarea").text()
},
type: "POST",
success: function(result){
}
});
});
$(document.body).on("click",".btn-modal-comentario", function(){
var $modal = "#modal-1";
get_id = $(this).data("obs-id");
var obs = $(this).closest("td").find(".observacoes").text();
$($modal).find(".modal-body").html("<textarea class='form-control' id='teste'>"+obs+"</textarea>");
$($modal).find(".modal-footer").html("<button class='btn btn-primary' id='btn-modal-update'>Atualizar Observação</button>");
$($modal).modal('show');
});
The problem is that you are not getting the updated value correctly after you type anything in textarea , the generated text is always "teste" .