Блог

Я кратко изложу свою цель, используя псевдокод и фрагменты, чтобы легко показать, чего я хотел бы достичь:

Столбец таблицы:

        <td data-target="scheduled">

         <?php
           if ($row['scheduled'] == 1) {
          ?>

          <a href="#" data-role="update" data-id="<?php echo $row['id'] ;?>">YES</a>

         <?php
           } else if ($row['scheduled'] == 0) {
           ?>
          <a href="#" data-role="update" data-id="<?php echo $row['id'] ;?>">NO</a>
         <?php
           }
          ?>
       </td>
  

Это столбец таблицы, где кнопка зависит от значения, которое равно 1 (ДА) и 0 (НЕТ)

Модальный:

 <div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">amp;times;</button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label>UPDATE SCHEDULED?</label>
          <input type="text" id="scheduled" class="form-control">
        </div>
        <input type="hidden" id="userId" class="form-control">

      </div>
      <div class="modal-footer">
        <a href="#" id="save" class="btn btn-primary pull-right">Update</a>
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
  

Этот модал появляется всякий раз, когда нажимаются кнопки «ДА» или «НЕТ»

Прямо сейчас я мог бы изменить текстовое поле на 1 или 0, чтобы на выходе был показан соответствующий результат.

Я пытаюсь получить «$ scheduled = $_POST[‘по расписанию’];» получите ввод автоматически по щелчку, $ _POST станет 1, если столбец равен 0, и 0, если столбец равен 1.

Ajax:

 <script>
  $(document).ready(function(){

      $(document).on('click','a[data-role=update]',function(){
            var id  = $(this).data('id');
            var scheduled  = $('#' id).children('td[data-target=scheduled]').text();

            $('#scheduled').val(scheduled);
            $('#userId').val(id);
            $('#myModal').modal('toggle');
      });


       $('#save').click(function(){
          var id  = $('#userId').val();
          var scheduled = $('#scheduled').val();

          $.ajax({
              url      : 'connection.php',
              method   : 'post',
              data     : {scheduled: scheduled , id: id},
              success  : function(response){

                             $('#' id).children('td[data-target=scheduled]').text(scheduled);
                             $('#myModal').modal('toggle');

                         }
          });
       });
  });
</script>
  

Это текущий ajax-код, в котором он получает значение в текстовом поле.

SQL:

 if(isset($_POST['id'])){

    $id = $_POST['id'];
    $scheduled = $_POST['scheduled'];

    $result  = mysqli_query($connection , "UPDATE user SET scheduled = '$scheduled' WHERE id='$id'");
}
?>
  

Код SQL, который обновляет столбец с помощью ajax.

Подведение итогов с помощью псевдокода: (ручного ввода текстового поля не будет, просто кнопка прямого перехода к обновлению с помощью ajax)

Модальный:

  if ($row['scheduled'] == 1) {
    textfield input is 0
} else if ($row['scheduled'] == 0) {
    textfield input is 1
}
  

Я думаю, что если я смогу заставить работать оператор if в моем модальном, ajax и SQL сделают все остальное при обновлении, и я получу отзывчивую кнопку, которая изменяет текст (ДА или НЕТ).

Буду признателен за любую помощь.

Поскольку в вопросе использовались фрагменты псевдокода, использование фрагментов псевдокода для ответа казалось бы уместным — возможно, это должно помочь.

Очень легко переключать состояние элемента, использование dataset атрибутов очень помогает с такими задачами, и я вижу, что вы их уже используете, так что это должно быть легко. Если состояние элемента равно 1 , то для переключения состояния достаточно просто 1 minus current state

Пример

     <a href='#' data-scheduled=1 data-id=303 data-role='update'>Yes</a>
    <a href='#' data-scheduled=1 data-id=404 data-role='update'>Yes</a>
    <a href='#' data-scheduled=1 data-id=505 data-role='update'>Yes</a>

<script>
    let links=Array.prototype.slice.call( document.querySelectorAll('a[data-scheduled]') );
    let matrix={
        1:'YES',
        0:'NO'
    }
        links.forEach( a=>{
            a.addEventListener('click', e=>{
                /* Toggle the state of the link */
                e.target.dataset.scheduled = 1 - parseInt( e.target.dataset.scheduled );
                e.target.textContent=matrix[ e.target.dataset.scheduled ];
                alert( 'send ajax request using ' e.target.dataset.scheduled ' as the value for button/link of id ' e.target.dataset.id )
            })
        })
</script>
  

Нажатие на каждую ссылку изменит атрибут dataset scheduled либо на 1, либо на 0 — поиск в текстовой матрице с использованием этого значения используется для соответствующей настройки текста ссылки. В примере будет использоваться alert , но в этот момент вам захочется отправить ajax-запрос.

При начальной загрузке страницы вы должны установить значение data-scheduled на основе значений базы данных, чтобы начальное состояние не обязательно всегда было равно 1. Я уверен, вы можете понять, как соответствующим образом изменить логику, чтобы установить либо YES , либо NO для каждой ссылки при загрузке страницы … $text=$row['scheduled']==1 ? 'YES' : 'NO'; и т. Д

Надеюсь, это поможет.

полный пример:

 <!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>toggle state</title>
        <style>
            body{font-family:calibri,verdana,arial;}
            *{box-sizing:border-box;}
            [data-scheduled]{margin:0.5rem;padding:0.25rem;border:1px solid rgba(133,133,133,0.25);}
            [data-scheduled="0"]{background:rgba(255,0,0,0.1)}
            [data-scheduled="1"]{background:rgba(0,255,0,0.1)}
        </style>
        <script>
            document.addEventListener('DOMContentLoaded', e=>{
                let links=Array.prototype.slice.call( document.querySelectorAll('a[data-scheduled]') );
                let matrix={
                    1:'YES',
                    0:'NO'
                }
                links.forEach( a=>{
                    a.addEventListener('click', e=>{
                        e.preventDefault();
                        e.target.dataset.scheduled = 1 - parseInt( e.target.dataset.scheduled );
                        e.target.textContent=matrix[ e.target.dataset.scheduled ];
                        console.info('send ajax request using ' e.target.dataset.scheduled ' as the value ( or "' matrix[ e.target.dataset.scheduled ] '" )for button/link of id ' e.target.dataset.id);
                    })
                })
            });
        </script>
    </head>
    <body>
        <?php
            for( $i=1; $i <= 25; $i   ){

                $scheduled=rand(0,1);
                $text=$scheduled==1 ? 'YES' : 'NO';

                printf(
                    '<a href="#" data-scheduled=%d data-id=%d data-role="update">%s</a>',
                    $scheduled,
                    $i,
                    $text
                );
            }
        ?>
    </body>
</html>