Utilizar vários datapickers em uma tabela carregada com ajax

[JorgeGomes 4]

Boa tarde!

 

É 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":

Spoiler

<?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:

Spoiler

<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:

Spoiler

<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.

[JorgeGomes Autor do tópico 4]

Resolvido!

[DiF 4.095]

@JorgeGomes O que fez para resolver? Compartilhe para que possa ajudar os outros que estiverem com esta dúvida também!

[JorgeGomes Autor do tópico 4]

Citação

Opa, procure instanciar o datepicker após o load da tabela, pois como está hoje, ele chama quando abre a página porém a tabela ainda não foi criada.

function fetch_data() { 
  //-- REMOVE OS PLUGINS ANTIGOS 
  $(".datepicker").datepicker("destroy"); 
  $.ajax({ 
    url: "docentes/select.php", 
    method: "POST", 
    success: function (data) { 
      $('#live_data').html(data);
      //-- INSTANCIA OS NOVOS PLUGINS 
      $(".datepicker").datepicker({ 
        dateFormat: "dd/mm/yy" }); 
    } 
  }); 
}  

 

 

 

Créditos: andreneeto, Fórum iMasters.

 

LInk do tópico onde obtive resposta:

Tópico: Utilizar vários datapickers em uma tabela carregada com ajax - Fórum iMasters