0
I have a Modal that creates dynamically when the user clicks on a link, as the link opens a different modal.
I would like to popular a Select that is within that modal. I have tried only with a include, but this not working.
When I click, I trigger this function. Which then executes the next two.
$(document).on('click', '.abre-modal-aula', function(){
const typeOperation = $(this).attr("type-operation");
const codAula = $(this).attr("cod-aula");
$.getJSON('config/database/consultaAjax/includes/modalAulas.php', { codAula, typeOperation }, resultado => {
if(resultado == '999-login'){
newAuth();
return false;
}
if(resultado != null){
const modals = modalActionAula(resultado, typeOperation);
$('#showModal').html(modals);
$('#aula').modal();
setTimeout(() => {
$('input[type="checkbox"], input[type="radio"]').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue'
});
// INICIA O CSS E JS DO SELECT2
$('select.select2').each(function () {
$(this).select2({
dropdownParent: $(this).parent().parent()
});
});
// INICIA CSS E JS DA MASCARA DE FORMATAÇÃO
$('[data-mask]').inputmask();
}, 100);
}
});
return false;
});
const modalActionAula = (resultado, typeOperation) => {
switch (typeOperation) {
case 'verAula':
return verAula(resultado);
case 'cancPgto':
return cancPgto(resultado);
case 'pagamento':
return pagamento(resultado, optionFormaPgto);
case 'pgtoLote':
return pgtoLote(optionFormaPgto);
default:
return false;
}
}
const verAula = (resultado) => {
return `
<div class="modal fade" id="aula">
<div class="modal-dialog modal-lg">
<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">Visualização Dados da Aula</h4>
</div>
<div class="modal-body">
<section class="content">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-body">
<div class="row">
<div class="form-group col-md-8">
<label>Professor</label>
<input type="text" class="form-control" value="${resultado.CPROFESSOR}" disabled>
</div>
<div class="form-group col-md-4">
<label>Tipo Aula</label>
<input type="text" class="form-control" value="${resultado.CTIPOAULA}" disabled>
</div>
</div>
</div>
</div>
<div class="box box-primary">
<div class="box-body">
<div class="row">
<div class="form-group col-md-12">
<label >Selecione o Talento para adicionar na Aula</label>
</div>
<div class="form-group col-md-8">
<select class="select2 form-control" id="selectTalentoAula" required>
<?php include "pages/includes/lista/listClientes.php" ?>
</select>
</div>
<div class="form-group col-md-4">
<button type="button" class="btn btn-primary pull-right addTalentoAula" >Adicionar Talento</button>
</div>
<div class="form-group col-md-12">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary pull-right" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
`;
}
This select is not pulling anything:
<div class="form-group col-md-8">
<select class="select2 form-control" id="selectTalentoAula" required>
<?php include "pages/includes/lista/listClientes.php" ?>
</select>
</div>
On another screen that is not modal he pulls the customer list normally.