muzahidul's avatar

Fetch mysql Data in ajax.js

I am using local js varriable for appearing data in input box. but i need to reterive these varriables data from mysql Database. that means i will store these data to mysql database and i want reterive data from mysql to "var prices" with same syntax

so please help me to do it

here is my varriable

var prices = [


"Celofen 100 mg Tablet|BOX/PACK|N/A|ACI|4.01",
"Soritec 25 mg Capsule|BOX/PACK|N/A|ACI|85.26",
"Soritec 10 mg Capsule|BOX/PACK|N/A|ACI|45.14",
"Adgar 3 mg/gm Gel|BOX/PACK|N/A|ACI|80.24",
"Adgar  100 mg/100 gm Gel|BOX/PACK|N/A|ACI|60.18",





];

here is my full ajax.js file

//adds extra table rows
var i=$('table tr').length;
$(".addmore").on('click',function(){
    html = '<tr>';
    html += '<td><input class="case" type="checkbox"/></td>';
    html += '<td><input type="text" data-type="productCode" name="pro[]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
    html += '<td><input type="text" data-type="productName" name="name[]" id="itemName_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
    html += '<td><input type="text" data-type="productGro" name="gro[]" id="itemGro_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
    html += '<td><input type="text" data-type="productCom" name="com[]" id="itemCom_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
    html += '<td><input type="text" name="price[]" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
    html += '<td><input type="text" name="qty[]" id="quantity_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
    html += '<td><input type="text" name="sub_total[]" id="total_'+i+'" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
    html += '</tr>';
    $('table').append(html);
    i++;
});

//to check all checkboxes
$(document).on('change','#check_all',function(){
    $('input[class=case]:checkbox').prop("checked", $(this).is(':checked'));
});

//deletes the selected table rows
$(".delete").on('click', function() {
    $('.case:checkbox:checked').parents("tr").remove();
    $('#check_all').prop("checked", false); 
    calculateTotal();
});


var prices = [


"Celofen 100 mg Tablet|BOX/PACK|N/A|ACI|4.01",
"Soritec 25 mg Capsule|BOX/PACK|N/A|ACI|85.26",
"Soritec 10 mg Capsule|BOX/PACK|N/A|ACI|45.14",
"Adgar 3 mg/gm Gel|BOX/PACK|N/A|ACI|80.24",
"Adgar  100 mg/100 gm Gel|BOX/PACK|N/A|ACI|60.18",





];

//autocomplete script
$(document).on('focus','.autocomplete_txt',function(){
    type = $(this).data('type');
    
    if(type =='productCode' )autoTypeNo=0;
    if(type =='productName' )autoTypeNo=1;  
    if(type =='productGro' )autoTypeNo=2; 
    if(type =='productCom' )autoTypeNo=3; 
    
    $(this).autocomplete({
        source: function( request, response ) {  
             var array = $.map(prices, function (item) {
                 var code = item.split("|");
                 return {
                     label: code[autoTypeNo],
                     value: code[autoTypeNo],
                     data : item
                 }
             });
             //call the filter here
             response($.ui.autocomplete.filter(array, request.term));
        },
        autoFocus: true,            
        minLength: 2,
        select: function( event, ui ) {
            var names = ui.item.data.split("|");                        
            id_arr = $(this).attr('id');
            id = id_arr.split("_");
            $('#itemNo_'+id[1]).val(names[0]);
            $('#itemName_'+id[1]).val(names[1]);
            $('#itemGro_'+id[1]).val(names[2]);
            $('#itemCom_'+id[1]).val(names[3]);
            $('#quantity_'+id[1]).val(1);
            $('#price_'+id[1]).val(names[4]);
            $('#total_'+id[1]).val( 1*names[4] );
            calculateTotal();
        }               
    });
});

//price change
$(document).on('change keyup blur','.changesNo',function(){
    id_arr = $(this).attr('id');
    id = id_arr.split("_");
    qty = $('#quantity_'+id[1]).val();
    price = $('#price_'+id[1]).val();
    if( qty!='' && price !='' ) $('#total_'+id[1]).val( (parseFloat(price)*parseFloat(qty)).toFixed(2) );   
    calculateTotal();
});

$(document).on('change keyup blur','#tax',function(){
    calculateTotal();
});

//total price calculation 
function calculateTotal(){
    subTotal = 0 ; sub_total = 0; 
    $('.totalLinePrice').each(function(){
        if($(this).val() != '' )subTotal += parseFloat( $(this).val() );
    });
    $('#subTotal').val( subTotal.toFixed(2) );
    tax = $('#tax').val();
    if(tax != '' && typeof(tax) != "undefined" ){
        taxAmount = subTotal * ( parseFloat(tax) /100 );
        $('#taxAmount').val(taxAmount.toFixed(2));
        sub_total = subTotal + taxAmount;
    }else{
        $('#taxAmount').val(0);
        sub_total = subTotal;
    }
    $('#totalAftertax').val( sub_total.toFixed(2) );
    calculateAmountDue();
}

$(document).on('change keyup blur','#amountPaid',function(){
    calculateAmountDue();
});

//due amount calculation
function calculateAmountDue(){
    amountPaid = $('#amountPaid').val();
    sub_total = $('#totalAftertax').val();
    if(amountPaid != '' && typeof(amountPaid) != "undefined" ){
        amountDue = parseFloat(sub_total) - parseFloat( amountPaid );
        $('.amountDue').val( amountDue.toFixed(2) );
    }else{
        sub_total = parseFloat(sub_total).toFixed(2);
        $('.amountDue').val( sub_total);
    }
}


//It restrict the non-numbers
var specialKeys = new Array();
specialKeys.push(8,46); //Backspace
function IsNumeric(e) {
    var keyCode = e.which ? e.which : e.keyCode;
    console.log( keyCode );
    var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
    return ret;
}

//datepicker
$(function () {
    $.fn.datepicker.defaults.format = "dd-mm-yyyy";
    $('#invoiceDate').datepicker({
        startDate: '-3d',
        autoclose: true,
        clearBtn: true,
        todayHighlight: true
    });
});
0 likes
3 replies
bobbybouwmann's avatar

What have you tried so far?

The basic concept here is to fetch all the data you need and return that in an API call. After that you should be able to retrieve this with javascript using that same API.

1 like
muzahidul's avatar

i float the data with json with this /products/json/ Url but how can i call there . i can not understand.

Please or to participate in this conversation.