Jump to content
Sign in to follow this  
Jorge Gomess

Utilizar vários datapickers em uma tabela carregada com ajax

Recommended Posts

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.

Share this post


Link to post
Share on other sites

Opa, procure instanciar o datepicker após o load da tabela, pois como está hoje, ele chama quando abre a página porem 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"
            });
        }
    });
}
 
  • +1 1

Share this post


Link to post
Share on other sites

Opa, procure instanciar o datepicker após o load da tabela, pois como está hoje, ele chama quando abre a página porem 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"
            });
        }
    });
}
 

Muito obrigado mano, deu certo!

A desatenção foi tão grande que não estava percebendo isso.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By Pitag346
      Olá pessoal, tudo bem? 
      Estou com uma dúvida bem bobinha... mas gostaria que me ajudassem a solucionar.
       
      Alguns sites utilizam uma forma de carregar as imagens deixando elas embaçadas/desfocadas. Até que são carregadas e elas aparecerem normalmente...
       
      Exemplo básico seria esse site: https://www.redbull.com/br-pt/athletes
       
      Sabem me explicar como isso é feito, e pra que ? Meu site usa bastante imagens, gostaria de saber se tem algum benefício ou se seria somente estética ... Obrigado! 
       
      (Não sei se isso é feito em JavaScript, acredito que sim... perdão se publiquei na área errada).
    • By teuzero
      Meu site é :https://xraros.000webhostapp.com/
       
      To com seguinte problema eu adicionei esse código:
       
      jQuery(document).ready(function() { if($(window).width()<=820) { $('#menu').hide(); } }); no arquivo carrega.js com a intenção de ocultar o menu só quando a tela estive com 820px de largurar ou menos, mais isso não esta acontecendo, como podem ver no meu site esse script n esta funcionando ele ta ocultando o menu em todas as resoluções, como faço pra deixar o menu oculto na resolução de 820px pra baixo?
    • By rxhxtx
      Boa tarde,
      nos meus estudos me deparei com mais um obstaculo,
      estava fazendo um tutorial sobre atualizacao de BD via ajax...
       
      os dados da pagina estao sendo atualizados perfeitamente, porem o PHP nao executa a funcao de colear os dados e atualizar o BD,
      <?php $connection = mysqli_connect('localhost' , 'root' ,'' ,'testes'); if(isset($_POST['user_id'])){ $user_fname = $_POST['user_fname']; $user_lname = $_POST['user_lname']; $user_email = $_POST['user_email']; $user_id = $_POST['user_id']; $result = mysqli_query($connection , "UPDATE `users_full` SET `user_fname`=`$user_fname` , `user_lname`=`$user_lname` , `user_email`= `$user_email` WHERE `user_id`=`$user_id`"); if($result){ echo 'data updated'; } } ?> se eu coloco 
      if(2+2 ==$){  
      e tiro os POST e coloco os valores ex: $user_fname = "carlinhos";
      atualiza, porem se deixo para ele pegar os dados vi post não funciona... so atualiza na pagina, mas o BD fica igual....
       
      qual é o erro? pq nao esta recebendo os POST??
       
      codigo da pagina é esse:
      <?php include 'listaUSUcon.php'; ?> <head></head> <body> <div class="container"> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> <th>Action</th> </tr> </thead> <tbody> <?php $table = mysqli_query($connection ,'SELECT * FROM users_full'); while($row = mysqli_fetch_array($table)){ ?> <tr id="<?php echo $row['user_id']; ?>"> <td data-target="user_fname"><?php echo $row['user_fname']; ?></td> <td data-target="user_lname"><?php echo $row['user_lname']; ?></td> <td data-target="user_email"><?php echo $row['user_email']; ?></td> <td><a href="#" data-role="update" data-id="<?php echo $row['user_id'] ;?>">Update</a></td> </tr> <?php } ?> </tbody> </table> </div> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <input type="text" id="user_id" class="form-control" readonly> </div> <div class="modal-body"> <div class="form-group"> <label>First Name</label> <input type="text" id="user_fname" class="form-control"> </div> <div class="form-group"> <label>Last Name</label> <input type="text" id="user_lname" class="form-control"> </div> <div class="form-group"> <label>Email</label> <input type="text" id="user_email" class="form-control"> </div> <input type="hidden" id="user_id" class="form-control"> </div> <div class="modal-footer"> <a href="#" id="save" class="btn btn-primary pull-right save">Update</a> <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button> </div> </div> </div> </div> </body> <script> $(document).ready(function(){ // append values in input fields $(document).on('click','a[data-role=update]',function(){ var user_id = $(this).data('id'); var user_fname = $('#'+user_id).children('td[data-target=user_fname]').text(); var user_lname = $('#'+user_id).children('td[data-target=user_lname]').text(); var user_email = $('#'+user_id).children('td[data-target=user_email]').text(); $('#user_fname').val(user_fname); $('#user_lname').val(user_lname); $('#user_email').val(user_email); $('#user_id').val(user_id); $('#myModal').modal('toggle'); }); // now create event to get data from fields and update in database $('#save').click(function(){ var user_id = $('#user_id').val(); var user_fname = $('#user_fname').val(); var user_lname = $('#user_lname').val(); var user_email = $('#user_email').val(); $.ajax({ url : 'listaUSUcon.php', method : 'post', data : {user_fname : user_fname , user_lname: user_lname , user_email : user_email , user_id: user_id}, success : function(response){ // now update user record in table $('#'+user_id).children('td[data-target=user_fname]').text(user_fname); $('#'+user_id).children('td[data-target=user_lname]').text(user_lname); $('#'+user_id).children('td[data-target=user_email]').text(user_email); $('#myModal').modal('toggle'); } }); }); }); </script>  
       
      aquele include (listaUSUcon.php) é referente ao primeiro codigo que postei la em cima..
       
       
      para mim não faz sentido, pois aparentemente nao tem nada errado....
       
      alguem sabe onde estou errando???
       
       
       
       
       
       
       
       
    • By Gourmet
      Eu tenho 3 layout diferentes e gostaria de que quando o usuário clicasse no layout desejado aparecesse o modelo do layout
    • By leandro.silva
      Estou tentando fundir essas funções para receber o total levando em consideração os filtro. Segue.
      FILTRO.
       
       
      $(function(){ $("#tabledit input").keyup(function(){ var index = $(this).parent().index(); var nth = "#tabledit td:nth-child("+(index+1).toString()+")"; var valor = $(this).val().toUpperCase(); $("#tabledit tbody tr").show(); $(nth).each(function(){ if($(this).text().toUpperCase().indexOf(valor) < 0){ $(this).parent().hide(); } }); }); $("#tabledit input").blur(function(){ $(this).val(""); }); TOTAL.
       
       
      $(function(){ var valorCalculado = 0; $( ".valor-calculado" ).each(function() { valorCalculado += parseInt($( this ).text()); }); $( "#qtdtotal" ).text(valorCalculado); });  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.