时间戳

首页 > 解决方案 > 如何在来自dataTable的模态中获取ID？

javascript - 如何在来自dataTable的模态中获取ID？

问题描述

我的问题是，我将 an 发布ID到一个模态中，但是当我click在一个datepickerinside中时modal，它给了我一个undefined价值，似乎我失去了ID某个地方，你能帮我吗？这是我的代码：

这是我的模态 HTML：

<div class="modal fade" id="modalUpdatePeriodico" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered " role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Prontuário médico</h4>
          <!-- para pegar o id do meu campo -->
          <input type="hidden" id="hiddenIdPeriodic"/>
        </div>
        <div class="modal-body">
          <div class="row">
            <!-- left column -->
            <div class="col-md-12">
                <!-- Inicio do Formulario de Pesquisa -->
                <form id="formUpdatePeriodico" enctype="multipart/form-data" action="#" method="POST">
                <!-- Form Data e Qtde dias -->
                <div class="form-row">
                  <div class="form-group col-md-6">
                    <label for="dateExam">Data da Realização</label>
                    <input type="text" class="form-control datepicker-calendar" id="dateExam" name="dateExam">
                  </div>
                  <div class="form-group col-md-6">
                    <label for="statusExam">Status</label>
                    <select class="form-control select2" id="statusExam" name="statusExam">
                      <option value="1">Inapto</option>
                      <option value="2">Apto</option>
                    </select>
                  </div>
                </div>
              </form>
              <!-- Fim do Formulario de Pesquisa -->
            </div>
            <!--/.col (right) -->
          </div>
          <!-- /.row -->
        </div>
        <div class="modal-footer">
          <button 
            type="button"
            id="btnSavePeriodic"
            class="btn btn-success" 
            data-dismiss="modal" 
            onclick="saveEmpRestrictions('periodics', inputMatriculaAtes, dateExam, statusExam, hiddenIdPeriodic, examType);">
            Salvar
          </button>
          <button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
        </div>
      </div>
    </div>

这是我的DataTableJS 代码：

function tbPeriodic() {

    // Definição do id da tabela como um dataTable
      $("#tbPeriodico").DataTable({
          "ajax": "webservices/ws_medicalRecord/tables/tb_medicalRecords.php?action=per&matriculaOp=" + <?php echo $matricula; ?>,
          sorting: false,
          "columns": 
          [
              { "data": "id" ,
                render: function(data, type, row) { // Função para link de download dos arquivos que foram "upados" no formulário.
                  data = '<a href="#" data-toggle="modal" data-target="#modalUpdatePeriodico" data-id="' + row.id + '" id="' + row.id + '">' + row.id + '</a>';
                  return data;
                } 
              },
              { "data": "ult_exame" },
              { "data": "tipo_exame" },
              { "data": "status_exame" },
              { "data": "prox_exame" }
          ]         
      });
    }

这是我将我的 id 发布到隐藏的输入中的函数：

$("#modalUpdatePeriodico").on('show.bs.modal', function (event) {
        var callModal = $(event.relatedTarget); // Para pegar tudo que há na opção que chama o modal
        var id = callModal.data('id'); // pegando o parametro ID da minha opção que chama o modal (data-id)
        console.log(id);
        var modal = $(this); 
        modal.find('.modal-header #hiddenIdPeriodic').val(id); // Adicionando o id em um campo hidden só para pegar esse valor depois 
    });

这是我的datepicker功能：

$('.datepicker-calendar').datepicker({
      autoclose: true
    });

所以，当我从我的日期选择器输入一个日期时，控制台显示我未定义，你能帮我吗？

非常感谢！

标签： javascriptjquerydatatablemodal-dialog

解决方案

我认为您在这里感到困惑，并且发生了两件事。或者我应该说发生了一件事而缺少另一步骤。我将尝试为您澄清这一点。

#1

发生这种undefined情况是因为您没有id正确获得价值。clickme像下面这样向您的 dataTable添加一个类<a>并摆脱模态调用。

数据表

data = '<a class="clickme" href="#" data-id="' + row.id + '" id="' + row.id + '">' + row.id + '</a>';

然后摆脱

$("#modalUpdatePeriodico").on('show.bs.modal', function (event) {
    var callModal = $(event.relatedTarget); // Para pegar tudo que há na opção que chama o modal
    var id = callModal.data('id'); // pegando o parametro ID da minha opção que chama o modal (data-id)
    console.log(id);
    var modal = $(this); 
    modal.find('.modal-header #hiddenIdPeriodic').val(id); // Adicionando o id em um campo hidden só para pegar esse valor depois 
});

并将其更改为

$(document).on('click', '.clickme', function() {
    var id = $(this).data('id');
    $('#modalUpdatePeriodico').modal('show');
    $('#modalUpdatePeriodico').find('#hiddenIdPeriodic').val(id);
    console.log(id);
})

#2

日期是一个不同的事件，所以添加它来获取日期

$('.datepicker-calendar').datepicker({
    autoclose: true,
    onSelect: function(date) {
        console.log(date)
    }
})

推荐阅读