ajax call causes duplicate data on subsequent clicks

Question

I have a pop-up menu that I select customers from. It is populated with an ajax call and selections are updated on a form. This works fine, however when I click on the .lookup-cust-hide a second time the json data (my customer list) repeats itself. I now have two full list of customers concatenated..

I'm thinking I need to clear the ajax call at the end somehow???

javascript:

$("#customer .lookup-cust-hide").click(function() {
        $("#contactdiv1").css("display", "block");

        $.ajax({                                      
            url: 'customer_fill.php',                         
            data: {action:"invoice"},                                             
            dataType: 'json',                   
            success: function(data){
                populateSelectBoxes($('#contactdiv1 #dropdown'), data);

                function populateSelectBoxes($select, data) {
                    var customers = [];
                    $.each(data, function() {
                        customers.push('<li data-value="'+this.autonum+'">' + this.customer + '</li>');
                    });
                    $select.append(customers.join(''));
                }

                function populateTableRow($tableBody, data, selectedCustomerAutonum) {
                    var customers;
                    $.each(data, function() {
                        if (this.autonum == selectedCustomerAutonum) {
                            customers = this;
                            return false;
                        }
                    });
                    $($tableBody).val(customers.customer+ '\n' + customers.address1 + '\n' + customers.address2 + '\n' + customers.address3);
                }

                $('#contactdiv1 #dropdown li').click(function(e) {
                    var selection = $(this).attr("data-value");
                    $(this).parent().parent().parent().hide();
                    populateTableRow($('#customer-title'), data, selection);
                });


            }
        }); 
    });

    $("#contact #cancel").click(function() {
        $(this).parent().parent().hide();
    });

yes clear the selection box, also you can cache the ajax call if you like — lordkain, Feb 13 '17 at 15:09
$('select').empty(); http://stackoverflow.com/questions/2985072/how-do-i-clear-the-dropdownlist-values-on-button-click-event-using-jquery — lordkain, Feb 13 '17 at 15:11
Have you tried changing this? $select.append(customers.join('')); — 25r43q, Feb 13 '17 at 15:40
I'm not sure I was putting it in the right place - wanted it in the cancel button click event, bit that didn't work. Moved it to the bottom of my `populateTableRow` function and that works, not sure thats the best place as it is nit or miss, sometimes it loads multiple list and other times it works as desired. — BarclayVision, Feb 13 '17 at 15:49

BarclayVision · Accepted Answer · 2017-02-15T16:32:37.113

Needed to add:

$("#contact #cancel").click(function() {
    $('ul').empty();
    $(this).parent().parent().hide();
});

...and final results:

$("#customer .lookup-cust-hide").click(function() {
    $("#contactdiv1").css("display", "block");

    $.ajax({                                      
        url: 'customer_fill.php',                         
        data: {action:"invoice"},                                             
        dataType: 'json',                   
        success: function(data){
            populateSelectBoxes($('#contactdiv1 #dropdown'), data);

            function populateSelectBoxes($select, data) {
                var customers = [];
                $.each(data, function() {
                    customers.push('<li data-value="'+this.autonum+'">' + this.customer + '</li>');
                });
                $select.append(customers.join(''));
            }

            function populateTableRow($tableBody, data, selectedCustomerAutonum) {
                var customers;
                $.each(data, function() {
                    if (this.autonum == selectedCustomerAutonum) {
                        customers = this;
                        return false;
                    }
                });

                $($tableBody).val(customers.customer+ '\n' + customers.address1 + '\n' + customers.address2 + '\n' + customers.address3);
            }

            $('#contactdiv1 #dropdown li').click(function(e) {
                var selection = $(this).attr("data-value");
                $(this).parent().parent().parent().hide();
                populateTableRow($('#customer-title'), data, selection);
                $('ul').empty();
            });

        }
    }); 
});

$("#contact #cancel").click(function() {
    $('ul').empty();
    $(this).parent().parent().hide();
});

ajax call causes duplicate data on subsequent clicks

1 Answers1