Как я могу обновить часть моей страницы при изменении значения в базе данных (Codeigniter)?

Question

Я делаю онлайн систему доставки еды в codeigniter.Это раздел, который показывает статус заказа.Обновляется в базе данных.

<td>
<?php
if ($order_current_status==0) 
{?>
<button style="background-color: #FAA0C7;color:#000;cursor: context-menu;" type="button" class="btn"> New</button>
<?php 
}
elseif ($order_current_status==3) 
{?>
<button style="background-color: #6ED1FB;color:#000;cursor: context-menu;" type="button" class="btn"> Ready</button>
<?php
}
elseif ($order_current_status==5) 
{?>
<button style="background-color: #FEE609;color:#000;cursor: context-menu;" type="button" class="btn">On the way</button>
<?php
}
elseif ($order_current_status==6) 
{?>
<button style="background-color: #7FFFD4;color:#000;cursor: context-menu;" type="button" class="btn">Delivered</button>
<?php
}?>
</td>

Может кто-нибудь сказать мне, как я могу увидеть изменение значения из базы данных без обновления страницы?

Answer 1

Прежде всего вы должны подготовить страницу HTML:

<td>
    <button type="button" class="btn" id="ch_button"></button>
</td>

Второй шаг - подготовка JS (JQuery) с помощью Ajax:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
     $(function(){

         update_button(); 
     })  

 function timerss(){
            var s1= new Date();
            var c1= s1.setSeconds(s1.getSeconds() + 2);  // update in 2seconds

        var x1= setInterval(function() { 
            var n1= new Date().getTime();        
            var d1= c1 - n1;

            if (d1< 0) {

                clearInterval(x1);            
                update_button();
            }
        }, 1000);

 };

function update_button(){
         $.ajax({                                        
                url:"/index.php/controller1/method1", 
                method:"POST",
                data: null 
            }).done(function(ans) { 

                if (ans == 0) {
                    $('#ch_button').attr('style','background-color: #FAA0C7;color:#000;cursor: context-menu;');          
                    $('#ch_button').html('New');
                    timerss();
                }
                else if (ans == 3) {
                    $('#ch_button').attr('style','background-color: #6ED1FB;color:#000;cursor: context-menu;');
                    $('#ch_button').html('Ready');
                    timerss();
                }
                else if (ans == 5) {
                    $('#ch_button').attr('style','background-color: #FEE609;color:#000;cursor: context-menu;');
                    $('#ch_button').html('On the way');
                    timerss();
                }
                else if (ans == 6) {
                    $('#ch_button').attr('style','background-color: #7FFFD4;color:#000;cursor: context-menu;');
                    $('#ch_button').html('Delivered');
                }
            }).fail(function (){

                alert('Ajax has been failed.');
            });
}   
</script>

Третий шаг - создать контроллерметод, который будет получать значение переменной из БД.Здесь вы должны сделать все, что вам нужно, чтобы узнать значение $order_current_status:

<?php
class Controller1 extends CI_Controller {

    public function __construct() {
        parent::__construct(); 
    }

    public function method1() {
       // get value of $order_current_status
        $order_current_status = 5; // for example

        echo $order_current_status;
    }
}

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