0

I have implemented a simple program known as foodlist which is a array list. i used to add food items to list through ajax. Everything works fine. but i want to update the list items when i insert food items to the array. This is my app.js file 

app.post('/add', (req, res) => {
    console.log(req.body.item); 
    foods.push(req.body.item);
    console.log(foods);
    res.render('index',{order:foods});
});

index.ejs

<form >
    <input type="text" name="game" id="title">
    <input type="submit">
</form>

<span id="succ_msg"></span><br>

<% if(typeof order !== "undefined") {
    for (var i = 0; i< order.length; i++) { %>
    <div id="champ">
        <span><%= order[i] %></span>
    </div>
<% } }%>

<script>
$(document).ready(function() {
    $('form').on('submit', function(e) {
        e.preventDefault();
        var title = $('#title').val();
        $.ajax({
            method: 'POST',
            url: '/add',
            data: {
                item: title
            },
            success: function(result) {
                $('#title').val("");
                $('#succ_msg').html("Success");
                setInterval(function() {
                    $('#champ').load() //here is my problem
                }, 1000);
            },
            error: function() {
                console.log('Error');
            }
        });
    });
});
</script>

Any ideas

Andrejs Gubars
  • 584
  • 7
  • 30
Harish
  • 123
  • 11
  • What exactly is your problem? do you get errors? is the list empty? – Andrejs Gubars Feb 11 '19 at 12:17
  • Hey, my prob is when i add data into arraylist it didn't update on front view without refreshing. After i refreshed my page it also updated. – Harish Feb 11 '19 at 12:31
  • My basic qus is how to update a list which is displaying on front page without refreshing? can you say answer depends on my code that i've showed above – Harish Feb 11 '19 at 12:45
  • Simple: You must propagate `result` to html page. see here https://stackoverflow.com/q/41001619/1194525 – bato3 Feb 11 '19 at 15:33
  • Please show your client code. The client would need to make the request, then inject the response data into its DOM. – ggorlen May 31 '22 at 22:52

0 Answers0