I am working with datatable
and have added two buttons per column for display theme. The problem is that when viewing, for example PDF1
, it opens the modal but sometimes it shows me the pdf
one it contains but other times it doesn't. When checking in the console, the two scripts are executed, and I should execute only one: the one that is mentioned with the button PDF1
. If someone can help me with that. Cheers
{"defaultContent": "<button type='button' id='a' class='btn btn-outline-success PDF1' data-bs-toggle='modal' data-bs-target='#PDF1'>DATOS1</button>"},
{"defaultContent": "<button type='button' id='b' class='btn btn-outline-info PDF2' data-bs-toggle='modal' data-bs-target='#PDF2'>DATOS2</button>"}
<!--MODAL PDF1---------------------------------------------------------------------->
<div class="modal fade" id="PDF1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">CARNET DE IDENTIDAD</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<script type="text/javascript">
$(function() {
$(document).on('click', 'button[type="button"]', function(event) {
fila = $(this).closest("tr");
user_id = parseInt(fila.find('td:eq(1)').text());
console.log(user_id);
$.ajax({
method: 'POST',
url: 'archivo_pdf1.php',
data: {valor_x: user_id},
success: function (data) {
$("#foto_pdf1").val(data.foto_pdf1);
var url="archivo_datos1/"+data.foto_pdf1;
$('#r').attr('src',url)
}
});
});
});
</script>
<div>
<embed src="" id="r" width="100%" height="600px" type="application/pdf"></embed>
</div>
</div>
</div>
</div>
</div>
<!--MODAL PDF2---------------------------------------------------------------------->
<div class="modal fade" id="PDF2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">LICENCIA DE CONDUCIR</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<script type="text/javascript">
$(function() {
$(document).on('click', 'button[type="button"]', function(event) {
fila = $(this).closest("tr");
user_id1 = parseInt(fila.find('td:eq(1)').text());
console.log(user_id1);
$.ajax({
method: 'POST',
url: 'archivo_pdf2.php',
data: {valor_x: user_id1},
success: function (data) {
$("#foto_pdf1").val(data.foto_pdf1);
var url="archivo_datos2/"+data.foto_pdf2;
$('#x').attr('src',url)
}
});
});
});
</script>
<div>
<embed src="" id="x" width="100%" height="600px" type="application/pdf"></embed>
</div>
</div>
</div>
</div>
</div>
Your error is that you are trying to select a button type button
$(document).on('click', 'button[type="button"]'
In which you are validating that they click on it, however, you are doing it in both functions, both for pdf1 and pdf2, in addition to the fact that both buttons have the same type, therefore, you cannot make the selection through the button type since this will try to select either 1, or neither, or both and throw up problems there.
To fix this you must first identify each button with a unique id or a unique class
Followed by this change the way to select the button for each function
$(document).on('click', '#pdf1',
$(document).on('click', '#pdf2',