dimanche 26 avril 2020

Simple food tracker using ajax and jquery

I am trying to implement a simple food tracker for my restaurant website which updates food status. What I want to do is that whenever I update the food status for an order, the icon becomes green for that stage. I need to perform a query from my website and get the food status value and update it without page refresh. How do I do that? Please help me, it is very important

 <div class="progressbar">
<ul >
    <li>
        <img style="width:130px;height:130px;margin-left:100px"src="foodStatusImages/waiting.png">
        <i style="margin-left:150px" class="fa fa-check" id="iconstatus"></i>
        <h5 style="margin-left:80px;display: inline-block;white-space: nowrap;">Waiting for 
       confirmation</h5>
    </li>

    <li>
        <img style="width:130px;height:130px;margin-left:200px;"src="foodStatusImages/confirmed.png">
        <i style="margin-left:250px" class="fa fa-check" id="iconstatus"></i>
        <h5 style="margin-left:190px;display: inline-block;white-space: nowrap;">Order Confirmed</h5>

    </li>

        <li>
        <img style="width:130px;height:130px;margin-left:350px"src="foodStatusImages/preparing.png">
        <i style="margin-left:400px"class="fa fa-check" id="iconstatus"></i>
        <h5 style="margin-left:350px;display: inline-block;white-space: nowrap;">In preparation... 
       </h5>
    </li>

    <li>
        <img style="width:130px;height:130px;margin-left:530px;"src="foodStatusImages/Ready.png">
        <i style="margin-left:590px" class="fa fa-check" id="iconstatus"></i>
        <h5 style="margin-left:520px;display: inline-block;white-space: nowrap;">Your order is 
      ready</h5>
    </li>-->

<ul>
</div>

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

            $("ul li:nth-child(1) i.fa").css("background","#148e14");
            var icons = $('#iconstatus'); //does not work
            console.log(icons);

        $.ajax({
            url:"action.php",
            data:{icons:icons},
            cache:false,
            method:"POST",
            sucess:function(result)
            {

            }

        });
    }
    );
    });

</script>



Aucun commentaire:

Enregistrer un commentaire