How to clear table inside a dialog when dialog is closed

Question

When the button is clicked, 2 sets data is added. I use material design.

Button needs 2 clicks to run function for first time. Due to this, the data is added to table 2 times.

Code

HTML

<button onclick="purchaseList(orderid)" id="dialog">Button</button>

JS

function popup(listid) {

    var starCountRef = firebase.database().ref('Orders/' +
        listid).child('foodItems');
    starCountRef.on('child_added', snapshot => {

        var snaps = snapshot.val();
        var itemPrice = snaps.price;
        var itemName = snaps.productName;
        var itemQuantity = snaps.quantity;

        console.log(itemName);
        $("#producttable").append(
            '<tr><td class="mdl-data-table__cell--non-numeric">' + itemName +
            '</td><td>' + itemQuantity + '</td><td>' + itemPrice + '</td></tr>'
        );
    });

    var dialog = document.querySelector('dialog');
    var showDialogButton = document.querySelector('#dialog');
    if (!dialog.showModal) {
        dialogPolyfill.registerDialog(dialog);
    }
    showDialogButton.addEventListener('click', function() {


        dialog.showModal();

    });
    dialog.querySelector('.close').addEventListener('click', function() {

        var element = document.getElementById("producttable")
        while (element.lastChild) {
            element.removeChild(element.lastChild);
        }
        dialog.close();

    });

}

Possible duplicate of [Remove all child elements of a DOM node in JavaScript](https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript) — wizzwizz4, Apr 07 '18 at 13:11
@Ganesh there is no `;` in this line `var element = document.getElementById("producttable")` — jasinth premkumar, Apr 07 '18 at 13:19
corrected that one, can you help me with double click problem? — Ganesh, Apr 07 '18 at 13:21
No, dialog need 2 clicks to open for first time. After that it opens on single click. — Ganesh, Apr 07 '18 at 13:28
@Ganesh checkout my updated ansswer to your concerned problem — jasinth premkumar, Apr 07 '18 at 13:35

score 1 · Accepted Answer · answered Apr 07 '18 at 13:09

1

This should work:

var element = document.getElementById("producttable")
while (element.lastChild) {
    element.removeChild(element.lastChild);
}

Add this as necessary.

answered Apr 07 '18 at 13:09

wizzwizz4

6,140
2
26
62

Its working, But still it adds two sets of data due to first two clicks. Any solution for it? – Ganesh Apr 07 '18 at 13:12
@Ganesh You've cropped a significant amount of code off the top. I can't tell when the first bit of code is run. – wizzwizz4 Apr 07 '18 at 13:12
That is all in the function, Still i will add the whole function again. check it. – Ganesh Apr 07 '18 at 13:14

score 1 · Answer 2 · answered Apr 07 '18 at 13:28

I suggest you change your firebase function from using .on to .once to avoid multiple additions of data to your table and as your data isn't expected to change frequently or require active listening you better use .once for performance benefits.

firebase.database().ref('Orders/' + 
    listid + '/foodItems').once('value').then(function(snapshot) {
            // the rest of your code goes here
});

jasinth premkumar · Answer 3 · 2018-04-07T13:34:46.157

this remocve element with class name ".mdl-data-table__cell--non-numeric" when user click .close

dialog.querySelector('.close').addEventListener('click', function () {

    dialog.close();
         $(".mdl-data-table__cell--non-numeric").remove();
});

UPDATE:

to open dialog on 2nd click use pseudo element to activate like this

<div class=pseudo><button onclick="purchaseList(orderid)"id="dialog" disabled>Button</button></div>
var i=0;
$('.pseudo').click(function(){
 i++;
  if(i==2){
   $("#dialog").prop('disabled',false);
 }
});

How to clear table inside a dialog when dialog is closed

3 Answers3

Linked