Как получить идентификатор в модале по dataTable? - PullRequest
Новая
       4

Как получить идентификатор в модале по dataTable?

0 голосов
/ 18 февраля 2020

Мой вопрос, я отправляю ID в модал, но когда я click в datepicker внутри 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>

Вот мой DataTable JS код: 

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" }
          ]         
      });
    }

Вот моя функция отправки моего идентификатора на вход скрыта: 

$("#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
    });

Итак, когда я вводю дату из моего средства выбора даты, консоль показывает я не определен, не могли бы вы помочь мне?

Большое спасибо!

1 Ответ

0 голосов
/ 18 февраля 2020

Я думаю, что вы смущены здесь, и происходят 2 вещи. Или я должен сказать, что происходит одна вещь, а другой шаг отсутствует. Я постараюсь уточнить это для вас.

# 1

undefined происходит, потому что вы неправильно получаете значение id. Добавьте класс clickme к вашей таблице данных <a>, как показано ниже, и избавьтесь от модального вызова.

dataTable 

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