CODEWITHSUNDEEP
htmlcssajaxcodeigniter
Clara
Clara

Reputation: 29

How can i refresh a part of my page when the value in the database is changed (Codeigniter)?

I'm doing an online food delivery system in codeigniter. This is the section which shows order status. It gets updated in the database.

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

Can someone please tell me how i can see the change in value from the database without refreshing the page?

Upvotes: 1

Views: 226

Answers (1)

Aksen P
Aksen P

Reputation: 4599

First of all you should prepare HTML page:

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

Second step is preparing the JS(JQuery) with 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>

The third step is to make a controller method which will get the variable value from DB. Here you should do everything you need to know value of $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;
    }
}

You will get what you want if you will do each step according to this instruction. It works for me, next your turn.

Upvotes: 1

Related Questions