Utilizar vários datapickers em uma tabela carregada com ajax
Boa noite!
É o seguinte, a princípio, estou carregando uma tabela com dados mysql via ajax:
function fetch_data() {
$.ajax({
url: "docentes/select.php",
method: "POST",
success: function (data) {
$('#live_data').html(data);
}
});
}
E em seguida faço manipulações para atualizar os dados, com isso, tudo certo. Entretanto, existe um campo da tabela que é para data, resolvi utilizar o Datepicker para deixar o campo mais elegante com a utilização de um calendário, se deparei com um problema ao utilizar vários Datepickers na mesma página, entretanto, designei uma ID única para cada input e uma classe igual para todos os inputs, classe a qual serviria de seletor para chamar a função datepicker, só que outro problema surge nessa jornada, este acontece por não estar executando a chamada da função datepicker, contudo, o seletor está correto, tem o mesmo identificador que o das classes dos inputs, não compreendo o por quê desse problema, por favor, peço vossa ajuda para a solução de meu problema, seguem códigos logo abaixo:
$(document).ready(function(){
$(".datepicker").datepicker({
dateFormat: "dd/mm/yy"
});
)};
Já tentei pôr eventos no input do DatePicker:
<div class="input-group">
<input type="text" id="date_'.$inc.'" class="form-control datepicker" onmouseover="acionaDatePicker(\'#date_'.$inc.'\')"
data-id="' . $Docente['id'] . '" data-before="' . $date . '" value="'.$date.'"/>
</div>
e no javascript:
function acionaDatePicker(seletor){
$(seletor).datepicker({
dateFormat: "dd/mm/yy"
});
}
É como se não executasse o código do javascript nos dois casos.
Arquivos:
Código gerador de tabela com informações do banco, mais tarde será carregada com auxilio do ajax via POST na div de id = "live_data":
<?php
require('../../dts/dbaSis.php');
$readDocentes = read('docentes', 'ORDER BY admissao DESC');
$output = '
<table class="table table-bordered">
<thead>
<tr>
<th>NOME</th>
<th>SOBRENOME</th>
<th>E-MAIL</th>
<th>CURSO</th>
<th>CENTRO DE REFERÊNCIA</th>
<th>ADMISSÃO</th>
<th>AÇÃO</th>
</tr>
</thead>
';
if (count($readDocentes) > 0) {
$output .= '<tbody>';
$inc = 0;
foreach ($readDocentes as $Docente) :
$output .= '
<tr>
<td class="nome" data-id="' . $Docente['id'] . '" data-before="' . $Docente['nome'] . '" contenteditable>' . $Docente['nome'] . '</td>
<td class="sobrenome" data-id="' . $Docente['id'] . '" data-before="' . $Docente['sobrenome'] . '" contenteditable>' . $Docente['sobrenome'] . '</td>
<td class="email" data-id="' . $Docente['id'] . '" data-before="' . $Docente['email'] . '" contenteditable>' . $Docente['email'] . '</td>
<td class="curso" data-id="' . $Docente['id'] . '" data-before="' . $Docente['curso'] . '" contenteditable>' . $Docente['curso'] . '</td>
<td>
<select class="centro form-control" data-id="' . $Docente['id'] . '" data-before="' . $Docente['centro_ref'] . '">
<option></option>';
$readCentro = read('centros_ref', '');
if ($readCentro) {
foreach ($readCentro as $Centro):
if ($Centro['id'] == $Docente['centro_ref']) {
$output .= '<option value="' . $Centro['id'] . '" selected="selected">' . $Centro['nome'] . '</option>';
} else {
$output .= '<option value="' . $Centro['id'] . '">' . $Centro['nome'] . '</option>';
}
endforeach;
}
$date = date('d/m/Y', strtotime($Docente['admissao']));
$output .= '</select>
</td>
<td class="date">
<div class="input-group">
<input type="text" id="date_'.$inc.'" class="form-control datepicker" onmouseover="acionaDatePicker(\'#date_'.$inc.'\')"
data-id="' . $Docente['id'] . '" data-before="' . $date . '" value="'.$date.'"/>
</div>
</td>
<td class="text-center"><button name="btn_delete" id="btn_delete" class="btn btn-xs btn-danger" data-id="' . $Docente['id'] . '">
<i class="glyphicon glyphicon-trash"></i></button></td>
</tr>
';
$inc++;
endforeach;
} else {
$output .= '<tbody><tr>NÃO EXISTEM REGISTROS DE DOCENTES!</tr>';
}
$output .= '
<tr>
<td id="nome" contenteditable></td>
<td id="sobrenome" contenteditable></td>
<td id="email" contenteditable></td>
<td id="curso" contenteditable></td>
<td>
<select id="centro" class="form-control">
<option></option>';
$readCentro = read('centros_ref', '');
if ($readCentro) {
foreach ($readCentro as $Centro):
$output .= '<option value="' . $Centro['id'] . '">' . $Centro['nome'] . '</option>';
endforeach;
}
$output .= '</select>
</td>
<td class="date">
<div class="input-group" >
<input type="text" class="form-control" id="datetimepicker3" onmouseover="acionaTimepicker()"/>
</div>
</td>
<td class="text-center"><button id="btn_add" class="btn btn-xs btn-success"><i class="glyphicon glyphicon-plus"></i></button></td>
</tr>
';
$output .= '</tbody></table>';
echo $output;
?>
Página onde serão exibidos os dados:
<div class="table-responsive">
<h3>Gerenciamento de Docentes</h3>
<div id="live_data"></div>
<input type="text" class="form-control datepicker" />
</div>
Página onde ficam os códigos JAVASCRIPT:
<script src="<?php setHome(); ?>/js/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/bootstrap.js"></script>
<!-- TABELA COM DADOS CARREGADOS VIA AJAX -->
<?php
$url = stripslashes($_GET['exe']);
$url = explode('/', $url);
if ($url[1] == 'new-doc-edit') {
?>
<script>
$(document).ready(function () {
function fetch_data() {
$.ajax({
url: "docentes/select.php",
method: "POST",
success: function (data) {
$('#live_data').html(data);
}
});
}
fetch_data();
$(document).on('click', '#btn_add', function () {
var nome = $('#nome').text(),
sobrenome = $('#sobrenome').text(),
email = $('#email').text(),
curso = $('#curso').text(),
centro_ref = $('#centro').val(),
admissao = $('#datetimepicker3').val();
if (nome == '' || sobrenome == '' || email == '' || curso == '' || centro_ref == '' || admissao == '') {
return false;
}
$.ajax({
url: "docentes/insert.php",
method: "POST",
data: {
nome: nome,
sobrenome: sobrenome,
email: email,
curso: curso,
centro_ref: centro_ref,
admissao: admissao
},
dataType: "text",
success: function () {
alert('Dados adicionados com sucesso!');
fetch_data();
}
});
});
function update(id, text, column_name) {
$.ajax({
url: "docentes/update.php",
method: "POST",
data: {
id: id,
text: text,
column_name: column_name
},
dataType: "text",
success: function () {
alert('Dados atualizados com sucesso!');
}
});
}
$(document).on('blur', '.nome', function () {
var id = $(this).data("id"),
text = $(this).text(),
before = $(this).data("before");
if (before != text) {
update(id, text, "nome");
}
});
$(document).on('blur', '.sobrenome', function () {
var id = $(this).data("id"),
text = $(this).text(),
before = $(this).data("before");
if (before != text) {
update(id, text, "sobrenome");
}
});
$(document).on('blur', '.email', function () {
var id = $(this).data("id"),
text = $(this).text(),
before = $(this).data("before");
if (before != text) {
update(id, text, "email");
}
});
$(document).on('blur', '.curso', function () {
var id = $(this).data("id"),
text = $(this).text(),
before = $(this).data("before");
if (before != text) {
update(id, text, "curso");
}
});
$(document).on('blur', '#datetimepicker4', function () {
var id = $(this).data("id"),
val = $(this).val(),
before = $(this).data("before");
if (before != val) {
update(id, val, "admissao");
}
});
$(document).on('blur', '.centro', function () {
var id = $(this).data("id"),
val = $(this).val(),
before = $(this).data("before");
if (before != val) {
update(id, val, "centro_ref");
}
});
$(document).on('click', '#btn_delete', function () {
var id = $(this).data("id");
$.ajax({
url: "docentes/delete.php",
method: "POST",
data: {
id: id
},
dataType: "text",
success: function () {
alert('Dados apagados com sucesso!');
fetch_data();
}
});
});
});
</script>
<?php } ?>
<script>
$(document).ready(function(){
$(".datepicker").datepicker({
dateFormat: "dd/mm/yy"
});
function acionaDatePicker(seletor){
$(seletor).datepicker({
dateFormat: "dd/mm/yy"
});
}
});
</script>
Caso eu não tenha sido claro quanto a minha dúvida, por favor, informem.
Discussão (2)
Carregando comentários...