Reloading data tables after a record deletion

bytec

Hi, I have a project I am working which has a Bootstrap Modal popup (Modal 1) which in turn display records using dataTables. this works fine. On the same page I have a tabbed menu (Tab 2) and one of the tabs also displays the same data as the Modal popup.
If a record is selected from the tabbed list another modal pops up allowing editing or deletion of the record. If I delete the record the tabbed menu item is refreshed and the record is not displayed (deleted).

If I then open modal 1 the deleted record is still displayed, it only gets removed from the record list if I refresh the page. I have an Ajax process that deletes the record and in the success: function I have the following code

         success: function(data){
          $('#WayFinderStatusTable').DataTable().ajax.reload(); // Reloads the main Tab data
          $('#wayfinderSignageTableTab').DataTable().ajax.reload(); //Reloads the Tab 2 
          $('#wayfinderSignageTable').DataTable().ajax.reload(); Should reload the Modal 1 data.
            }

At the point of the record deletion the Modal 1 is hidden.

Should this work or am I going about this wrong.
Many thanks in advance for your help and time

colin

It sounds like it should work? Is this using Editor? We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

bytec

Hi Colin and many thanks for your response. I have now found that the script is working and why the data is not clearing form the modal window. It appears that the first time the modal is opened the data is displayed. When it's deleted and the modal windows is closed and then reopened using the same button the ajax call is not executing on the second button click. Below is the code I am using and I suspect it's something I have over looked in my code.

The Button:

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

The Modal window:

<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>

The dataTables and Ajax call

$(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">' }

     },
    ]

  });
}); 

colin

As I said, we're happy to look, but please link to a test case.

Colin