Text is not appearing after the second insert

20
May 18, 2019, at 4:50 PM

these code is working except that for the second or subsequent insert, the message 'Order added' is not appearing. Secondly, after I removed everything using pop and click to view current order, the message 'No customer orders at the moment.' is not appearing even though the code executed.

    const order = []; 
 
    const customer = { 
        name: '', 
        totalCups: 0 
    } 
 
    const checkCustomerOrders = () => { 
        if (order.length === 0) { 
            $('.Mesg').show(); 
            $('.Mesg').text("No customer orders at the moment.").fadeTo(4000, 0); 
        } 
    } 
 
    $('#AllOrders').hide();  
 
    $('#btnAdd').click(function () { 
        var item = $('#customerName'); 
 
        // Data structure Queue 
        order.unshift(item.val()); 
 
        // UX 
        $('.Mesg').text("Order added").fadeTo(4000, 0); 
 
        // UI 
        var orderElement = $('<div class="orderItem"></div>').text(item.val()); 
        $('#AllOrders').append(orderElement); 
 
        // Reset textbox 
        item.val("");         
 
        // Optional Design         
        $('#ViewAllOrders').click(); 
        debugger; 
    }) 
 
    $('#ViewAllOrders').click(function () { 
        checkCustomerOrders(); 
        $('#AllOrders').show();  
        $('#CurentOrder').hide(); 
    }) 
 
     
 
    $('#ViewCurrentOrder').click(function () { 
        debugger; 
        checkCustomerOrders(); 
        $('#AllOrders').hide();  
        $('#CurentOrder').show(); 
 
        var top = order[order.length - 1]; 
        console.log(top); 
 
        $('#CurentOrder').empty(); 
        // UI 
        var orderElement = $('<div></div>').text(top); 
        $('#CurentOrder').append(orderElement); 
    }) 
 
    $('#DeliverOrder').click(function () { 
        debugger 
        // Remove one element from array. FIFO. 
        order.pop(); 
        // Element removed. 
 
        // Remove the html element as well 
        $(".orderItem:first").remove(); 
 
        // UX 
        $('.Mesg').text("One customer order delivered").fadeTo(4000, 0); 
 
        // Optional Design         
        $('#ViewAllOrders').click(); 
    })
html{ 
            font-size:1em 
        } 
 
        div.Mesg { 
            height: 20px !important; 
        } 
 
        ul#menu { 
            display: flex; 
            list-style-type: none;          
            justify-content: space-around;             
            padding: 0; 
            margin: 0; 
        } 
 
        ul#menu > li { 
            display: block; 
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul id="menu"> 
                <li><a id="ViewAllOrders" href="#">View all orders</a></li> 
                <li><a id="ViewCurrentOrder" href="#">View current order in process</a></li> 
                <li><a id="DeliverOrder" href="#">Deliver one order</a></li> 
            </ul>             
         
        <hr /> 
        <div class="Mesg"></div> 
        <hr /> 
        <div id="AddOrder"> 
            <input id="customerName" type="text" placeholder="Enter customer's name" /> 
            <input id="btnAdd" type="button" value="Add" /> 
        </div> 
        <div id="AllOrders"></div> 
        <div id="CurentOrder"></div>

Is it due to fadeTo method?

Answer 1

Change fadeTo() to fadeOut() should fix this

    const order = []; 
 
    const customer = { 
        name: '', 
        totalCups: 0 
    } 
 
    const checkCustomerOrders = () => { 
        if (order.length === 0) { 
            $('.Mesg').show(); 
            $('.Mesg').text("No customer orders at the moment.").fadeOut(4000, 0); 
        } 
    } 
 
    $('#AllOrders').hide();  
 
    $('#btnAdd').click(function () { 
        var item = $('#customerName'); 
 
        // Data structure Queue 
        order.unshift(item.val()); 
 
        // UX 
        $('.Mesg').text("Order added").fadeOut(4000, 0, function(){  
              $('.Mesg').text(''); 
              $('.Mesg').show(); 
        }); 
 
        // UI 
        var orderElement = $('<div class="orderItem"></div>').text(item.val()); 
        $('#AllOrders').append(orderElement); 
 
        // Reset textbox 
        item.val("");         
 
        // Optional Design         
        $('#ViewAllOrders').click(); 
        debugger; 
    }) 
 
    $('#ViewAllOrders').click(function () { 
        checkCustomerOrders(); 
        $('#AllOrders').show();  
        $('#CurentOrder').hide(); 
    }) 
 
     
 
    $('#ViewCurrentOrder').click(function () { 
        debugger; 
        checkCustomerOrders(); 
        $('#AllOrders').hide();  
        $('#CurentOrder').show(); 
 
        var top = order[order.length - 1]; 
        console.log(top); 
 
        $('#CurentOrder').empty(); 
        // UI 
        var orderElement = $('<div></div>').text(top); 
        $('#CurentOrder').append(orderElement); 
    }) 
 
    $('#DeliverOrder').click(function () { 
        debugger 
        // Remove one element from array. FIFO. 
        order.pop(); 
        // Element removed. 
 
        // Remove the html element as well 
        $(".orderItem:first").remove(); 
 
        // UX 
        $('.Mesg').text("One customer order delivered").fadeOut(4000, 0); 
 
        // Optional Design         
        $('#ViewAllOrders').click(); 
    })

READ ALSO
Find min/max values from object array exlcuding infinity

Find min/max values from object array exlcuding infinity

I have an array of objects where I want to find the min/max value of a property in each objectI currently have a working method to find the min, however I am struggling with the max, if the value is Infinity I want to ignore it

43
How to sort array of objects by day, if object can includes 2 or more timestamp, if no same date - create new property &amp; set to null

How to sort array of objects by day, if object can includes 2 or more timestamp, if no same date - create new property & set to null

I have array of objects where each element has 2 or more unique keys 'datetime' and also i have data that belongs to the each datetimeI need sort by same date(by day), if no date we should set value to null

18
loop inner object array in angular without having iteration of outer array [on hold]

loop inner object array in angular without having iteration of outer array [on hold]

I am web service which return nested object arrayIn my angular example, I have iterated the inner array ie currencies in users

16
Ionic 4: No emulator images (avds) found

Ionic 4: No emulator images (avds) found

I'm trying to emulate my ionic 4 app into Android Emulator so I run the command:

39