Вызов данных с помощью ajax при нажатии кнопки не работает на той же кнопке в течение второго нажатия - PullRequest
Новая
       20

Вызов данных с помощью ajax при нажатии кнопки не работает на той же кнопке в течение второго нажатия

0 голосов
/ 03 марта 2020

У меня есть кнопка, которая открывает модальное всплывающее окно Bootstrap и заполняется строками данных с использованием таблиц данных. Это отлично работает. Когда кнопка нажата, она запускает запрос Ajax для получения данных и отображает их в модальном окне. Я вижу запрос Ajax в работе консоли.

У модального всплывающего окна есть кнопка «Закрыть», которая сбрасывает модал, то есть закрывает его. Если я затем снова нажму кнопку, чтобы открыть тот же модал, запрос Ajax не будет отображен в окне консоли, которое, в свою очередь, не перезагружает данные. Мне нужно, чтобы запрос Ajax запускался при каждом нажатии кнопки, чтобы получить какие-либо изменения в данных.

Может кто-нибудь понять, почему второе нажатие кнопки не вызывает сценарий dataTables Ajax. Мой лог c говорит мне, что при каждом нажатии кнопки должен выполняться вызов Ajax. Если я обновлю sh страницу, нажатие кнопки будет работать так, как я ожидал.

Кнопка: 

<a  class="cursoritem" data-toggle="modal" id="room_override_data_modal"><span class="glyphicon glyphicon-plus"></span>Room override</a>

Модальное окно: 

<div id="open_current_room_display_overrides_data_modal" class="modal fade" data-keyboard="false" data-backdrop="false" style="z-index:111">
  <div class="modal-wayfinder-signage" modal-ku style=" max-height:85%;  margin-top: 35px; margin-bottom:50px;" modal-lg>
    <div class="modal-content-search"> 
      <!-- END -->
      <div class="modal-header-current-signage">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <div class="modal-title-current-signage" id="HideTitle" style="cursor:move">Current room display override schedule.</div>
      </div>

      <div class="modal-body-room-override">

    <table name="timeline" border="0" cellpadding="0" cellspacing="0" class="table table-striped" id="roomoverrideTable" style="width:100%; min-width:800px" data-role="datatable"   data-info="false">
      <thead>
        <tr class="CenterHeaderSignageData">
          <th><div class="LeftPadding">Room</div></th>
          <th><div class="ImagePadding">Image</div></th>
          <th>Promotion</th>
          <th>From</th>
          <th>To</th>
          <th><div class="RightPadding"></div></th>
        </tr>
      </thead>
      <tbody class="CurrentSignage-rows">
      </tbody>
    </table>

      </div>
      <div class="footer_search_buttons">
          <div class="room-overide-message">Room overrides take priority if the room has a booking</div>
      <div id="foot-button-margin-current-room-display-override-schedule">
    <button id="NewRoomOverrideform" type="button" class="btn btn-success btn-xs">New override</button>
    <button id="NewRoomOverridecancelform" type="button" class="btn btn-secondary-edit btn-xs" data-dismiss="modal">Close</button>
      </div>
      </div>
    </div>
  </div>
</div>

Таблицы данных и Ajax звоните 

$(document).on("click", "#room_override_data_modal", function() {
var hotelid ='<?php echo $_SESSION['_amember_user']['hotelid'];?>';
  $('#open_current_room_display_overrides_data_modal').modal('show');
  $(".modal-body-room-override").css("padding",'2px');
   $(".modal-body-room-override").css("margin",'2px');
  var imagepath = '../../../../conf/conf_images/roomoverride/' + hotelid + '/';
  $('#roomoverrideTable').DataTable({
   "ordering": false,
        retrieve: true,
        paging: false,
    searching: false,
        bInfo : false,
        responsive: true,
        fixedHeader: true,
   ajax: {
      url: 'get_room_override.php', 
      dataSrc: ''

   },
   "columnDefs": [
    { className:"model-left-margin", "targets": [ 0 ] }
  ],
   language: {
      "emptyTable": "There are no promotional signage schedules set"
    },

    columns: [
      { data: 'RoomName',"sWidth": "15%" },
      { data: "PromoImage", "sWidth": "15%",  render : function (data, type, full, meta) 
                     { return '<img src="' + imagepath + '' +data+'" class="WayfinderSignageImageModal"/>'; }
      },
      { data: 'ClientName', "sWidth": "30%" },
      { data: 'PromotionFromDate', "sWidth": "20%" },
      { data: 'PromotionToDate',  "sWidth": "15%"},

      { data: 'RecordID',  render : function (data, type, full, meta) {
            var recordid = full.RecordID;
                    console.log("RECORDID", recordid);
                     return '<input type="button" name="edit" value="Edit" data-id=' + recordid + ' class="btn btn-conf-view btn-xs edit_room_override">' }

     },
    ]

  });
});

Большое спасибо заранее за вашу помощь и время.

...