Как использовать Bootstrap Переключение управления для отправки значения сценарию php через AJAX - PullRequest
0 голосов
/ 26 апреля 2020

Я заполняю таблицу из вызова базы данных. В первом столбце каждой строки у меня есть переключатель bootstrap 4, который либо установлен как проверенный, либо нет, в зависимости от того, установлено ли поле «is-live» для записей на 1.

Я хотел бы, чтобы пользователь чтобы иметь возможность щелкнуть по переключателю и установить запись как активную или неактивную и для этого обновлять базу данных и таблицу без всяких усилий. enter image description here

Я знаю, что для этого нужно использовать вызов AJAX, но я не могу обдумать это, поскольку я действительно новичок в JQuery / AJAX .

Я дошел до этого кода, и он возвращает сообщение об успехе, но я застрял, как я должен отправлять входные данные и идентификатор строки в мой php сценарий.

Я могу написать php, чтобы обновить БД после отправки данных, но код выглядит так, как будто он ничего не делает? Я также не уверен, как вернуть успех / неудачу сценарию AJAX в конце моего php. Могу ли я использовать возврат true; или верните false; отправить результат в сценарий AJAX? Я почти уверен, что это не работает.

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

$(document).ready(function(){
  $("#customSwitch<?php echo $voyage->voyage_id; ?>").on('change.bootstrapSwitch', function(e){
    var checkStatus = this.checked ? 1 : 0;
    request = $.ajax({
      type: 'POST',
      url: '<?php echo URLROOT.'/admin/voyages/voyage-admin/updateLive/'; ?>',
      data: checkStatus,
    });
    // Callback handler that will be called on success
     request.done(function (response, textStatus, jqXHR){
         // Log a message to the console
         console.log("Hooray, it worked!");
     });
     // Callback handler that will be called on failure
      request.fail(function (jqXHR, textStatus, errorThrown){
          // Log the error to the console
          console.log(errorThrown);
      });
  });
});

И сценарий PHP, вызываемый через мой контроллер / URL-адрес, в настоящее время является именно этим ...

public function updateLive() {
  return $_POST;
}

Это код таблицы (пожалуйста, извините устаревший код сценария ):

<table id="trips" class="table table-bordered text-secondary">
  <thead>
    <tr class="bg-msp-lightgrey">
      <th width="5%">
        Active
      </th>
      <th>
        Name
      </th>
      <th>
        Start
      </th>
      <th>
        End
      </th>
      <th>
        Type
      </th>
      <th class="text-center">
        Places
      </th>
    </tr>
  </thead>
  <tbody>
    <?php foreach ($data['voyageData'] as $voyage) : ?>
      <tr>
        <td class="text-center">
          <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="customSwitch<?php echo $voyage->voyage_id; ?>" value="1" <?php echo ($voyage->voyage_live) ? 'checked' : '';?>>
            <label class="custom-control-label" for="customSwitch<?php echo $voyage->voyage_id; ?>"></label>
            <script>
            $(document).ready(function(){
              $("#customSwitch<?php echo $voyage->voyage_id; ?>").on('change.bootstrapSwitch', function(e){
                if($(this).is(':checked'))
                  alert('checked');

                else
                  alert('not checked');

              });
            });
            </script>
          </div>
        </td>
        <td>
          <?php echo $voyage->voyage_name; ?>
        </td>
        <td data-sort="<?php echo date('Y-m-d', strtotime($voyage->voyage_startDate)); ?>">
          <?php echo date('jS M Y', strtotime($voyage->voyage_startDate)); ?>
        </td>
        <td data-sort="<?php echo date('Y-m-d', strtotime($voyage->voyage_endDate)); ?>">
          <?php echo date('jS M Y', strtotime($voyage->voyage_endDate)); ?>
        </td>
        <td>
          <?php echo $voyage->voyagetype_name; ?>
        </td>
        <td class="text-center">
          <?php echo $voyage->voyage_crewBerth; ?> | <?php echo $voyage->voyage_Afterguard; ?>
        </td>
      </tr>
    <?php endforeach; ?>
  </tbody>
</table>

1 Ответ

0 голосов
/ 28 апреля 2020

Итак, после некоторого копания и долгих экспериментов у меня есть полуработа.

Я создал форму, в которой находится таблица, и каждое bootstrap имя / идентификатор переключателя равно идентификатору записи. в foreach l oop. Затем я добавил кнопку отправки в нижний колонтитул таблицы, чтобы она выглядела хорошо с точки зрения UX. Затем мой AJAX звонок отправляет серверу данные, и я oop через настройку каждого включения / выключения, как мы go.

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

enter image description here

Код ниже:

<form class="switch" action="<?php echo URLROOT; ?>/admin/voyages/voyage-admin/updateLive" method="POST">
<table id="trips" class="table table-bordered text-secondary">
  <thead>
    <tr class="bg-msp-lightgrey">
      <th width="5%">
        Active
      </th>
      <th>
        Name
      </th>
      <th>
        Start
      </th>
      <th>
        End
      </th>
      <th>
        Type
      </th>
      <th class="text-center">
        Places
      </th>
    </tr>
  </thead>
  <tbody>
    <?php foreach ($data['voyageData'] as $voyage) : ?>
      <tr>
        <td class="text-center">
            <div class="custom-control custom-switch">
              <input value="1" type="checkbox" class="custom-control-input" name="<?php echo $voyage->voyage_id; ?>" id="<?php echo $voyage->voyage_id; ?>" <?php echo ($voyage->voyage_live) ? 'checked' : '';?>>
              <label class="custom-control-label" for="<?php echo $voyage->voyage_id; ?>"></label>
            </div>
        </td>
        <td>
          <?php echo ($voyage->voyage_featured == 1) ? '<i class="fas fa-star text-msp-orange"></i> ' : '<i class="fas fa-star text-msp-lightgrey"></i> '; echo $voyage->voyage_name; ?>
        </td>
        <td data-sort="<?php echo date('Y-m-d', strtotime($voyage->voyage_startDate)); ?>">
          <?php echo date('jS M Y', strtotime($voyage->voyage_startDate)); ?>
        </td>
        <td data-sort="<?php echo date('Y-m-d', strtotime($voyage->voyage_endDate)); ?>">
          <?php echo date('jS M Y', strtotime($voyage->voyage_endDate)); ?>
        </td>
        <td>
          <?php echo $voyage->voyagetype_name; ?>
        </td>
        <td class="text-center">
          <?php echo $voyage->voyage_crewBerth; ?> | <?php echo $voyage->voyage_Afterguard; ?>
        </td>
      </tr>
    <?php endforeach; ?>
  </tbody>
  <tfoot>
    <tr class="bg-msp-lightgrey">
      <th>
        <button type="submit" class="btn btn-sm btn-msp-orange text-white">UPDATE</button>
      </th>
      <th colspan="5">

      </th>
    </tr>
  </tfoot>
</table>
</form>

Сценарий вызова JQuery / Ajax выглядит так: (Я обнаружил, что сначала мне пришлось уничтожить старую таблицу данных, а затем повторно -инициализировать его, когда я получаю странное поведение при обновлении)

<script>
  $(document).ready(function(){
    $('#trips').DataTable({
       "order": [[ 2, "asc" ]],
    });

    $('form.switch').on('submit', function() {
      var that = $(this),
          url = that.attr('action'),
          type = that.attr('method'),
          data = {};

      that.find('[name]').each(function(index,value) {
        var that = $(this),
            name = that.attr('name'),
            value = $('#'+name).prop('checked')
        data[name] = value;
      });
      $.ajax({
        url: url,
        type: type,
        data: data,
        success: function(response) {
          $('#statusMessage').toast('show');
          $('#trips').dataTable().fnDestroy();
          $('#trips').DataTable({
             "order": [[ 2, "asc" ]],
          });
        }
      });
      return false;
    });

  });
</script>

И это мой код на стороне сервера:

public function updateLive() {
  if (!$this->permissionModel->checkSettingsPermission(get_class($this), $_SESSION['userGroup']) && $_SESSION['userGroup'] != 1) {
    flash('siteMessage', 'You do not have access to this page', 'bg-danger');
    redirect('register');
  }
  if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    foreach ($_POST as $key => $value) {
      if ($value == 'false') {
        $status = 0;
      } else {
        $status = 1;
      }
      $update = $this->voyageModel->status($key, $status);
    }
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...