Ir ao conteúdo
  • Cadastre-se
JorgeGomes

Utilizar vários datapickers em uma tabela carregada com ajax

Recommended Posts

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites
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

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×