Question

I have a form in a lightbox to add new entry to my datatable the form in the box work with this code :

$("#add-quotation").click(function(event) {
event.preventDefault(); 
var customer_id = $(this).attr('data-customer');    
$.nmManual(
    '#quotation_manage',{
        sizes: {    // Size information
        w: 500, // Initial width
        h: 500  // Initial height
    }
    });
    $('#quotation_submit').live('click', function(event){
    event.preventDefault();
    if(typeof($.nmTop()) != "undefined"){
        $.nmTop().close();
    }   
    var loading = $('.loading-notification');
    loading.removeClass('hidden');
    var date = $('#date_activate').val();
    var budget = $('#budget').val();
    var hospital = [$('#hospital').val(), $('#hospital option:selected').text()];
    var dental = [$('#hospital').val(), $('#hospital option:selected').text()];
    var optical = [$('#optical').val(), $('#optical option:selected').text()];
    var doctor = [$('#doctor').val(), $('#doctor option:selected').text()];
    $.ajax({
                type: 'POST',
                data: 'create=true&customer_id=' + customer_id + '&date=' + date + '&budget=' + budget + '&hospital=' + hospital[0] + '&dental=' + dental[0] + '&optical=' + optical[0] + '&doctor=' + doctor[0], 
                url: 'quotation.php', 
                dataType: 'json',
                async: false,
                success: function(result){
                    if (result){
                    oTable.fnAddData([
                        result.id,
                    result.date,
                    budget,
                    hospital[1],
                    dental[1],
                    optical[1],
                    doctor[1],
                    '',
                    '',
                    '',
                    'test'
                    ]);
            }
        loading.addClass('hidden');
                }
        });
    });
});

It work well but sometimes it send 3 or more query, how can I prevent this ? Normally It should send only one query.

Answer 1

When you click #add-quotation you bind another click event to #quotation_submit. Because you’re using live you can safely move it out. Try this:

$("#add-quotation").click(function(event) {
    event.preventDefault();
    var customer_id = $(this).attr('data-customer');
    $.nmManual('#quotation_manage', {
        sizes: { // Size information
            w: 500,
            // Initial width
            h: 500 // Initial height
        }
    });
});
$('#quotation_submit').live('click', function(event) {
    event.preventDefault();
    if (typeof($.nmTop()) != "undefined") {
        $.nmTop().close();
    }
    var loading = $('.loading-notification');
    loading.removeClass('hidden');
    var date = $('#date_activate').val();
    var budget = $('#budget').val();
    var hospital = [$('#hospital').val(), $('#hospital option:selected').text()];
    var dental = [$('#hospital').val(), $('#hospital option:selected').text()];
    var optical = [$('#optical').val(), $('#optical option:selected').text()];
    var doctor = [$('#doctor').val(), $('#doctor option:selected').text()];
    $.ajax({
        type: 'POST',
        data: 'create=true&customer_id=' + customer_id + '&date=' + date + '&budget=' + budget + '&hospital=' + hospital[0] + '&dental=' + dental[0] + '&optical=' + optical[0] + '&doctor=' + doctor[0],
        url: 'quotation.php',
        dataType: 'json',
        async: false,
        success: function(result) {
            if (result) {
                oTable.fnAddData([
                    result.id, result.date, budget, hospital[1], dental[1], optical[1], doctor[1], '', '', '', 'test']);
            }
            loading.addClass('hidden');
        }
    });
});