Ajax Reload Problem

ph730

hi im new in datatables need a help about table data of columns , when i update the data i need to refresh the page and tables go back to first draw , help me out to reconfigure the code for ajax reload .. mean stay there where i data updated no need to refresh the page for seen the changes here is my code

HTML Code

ID	Sale Date	Submit By	Customer	Product Sold	RGUs	Account#	Order#	Order ID	Installation	Status	Action

Datatable JS Code

<script type="text/javascript" language="javascript" >
$(document).ready(function(){

 $('.input-daterange').datepicker({
  todayBtn:'linked',
  format: "yyyy-mm-dd",
  autoclose: true
 });

 fetch_data('no');


function fetch_data(is_date_search, start_date='', end_date='')
 {
  var salesdataTable = $('#order_data').DataTable({
   "processing" : true,
   "serverSide" : true,
   "order" : [],
   "ajax" : {
    url:"fetch2.php",
    type:"POST",
    data:{
     is_date_search:is_date_search, start_date:start_date, end_date:end_date
    }
   }

  });
 }

 $('#search').click(function(){
  var start_date = $('#start_date').val();
  var end_date = $('#end_date').val();
  if(start_date != '' && end_date !='')
  {
   $('#order_data').DataTable().destroy();
   fetch_data('yes', start_date, end_date);
  }
  else
  {
   alert("Both Date is Required");
  }
 }); 


});
</script>
<script>

        $(document).on('submit', '#sale_form', function(event){
        event.preventDefault();
        $('#action').attr('disabled', 'disabled');
        var form_data = $(this).serialize();
        $.ajax({
            url:"sale_action.php",
            method:"POST",
            data:form_data,
            success:function(data)
            {
                $('#sale_form')[0].reset();
                $('#saleModal').modal('hide');
                $('#alert_action').fadeIn().html('<div class="alert alert-success">'+data+'</div>');
                $('#action').attr('disabled', false);
                salesdataTable.ajax.reload();
            }
        })
    });

    $(document).on('click', '.update', function(){
        var sale_id = $(this).attr("id");
        var btn_action = 'fetch_single';
        $.ajax({
            url:"sale_action.php",
            method:"POST",
            data:{sale_id:sale_id, btn_action:btn_action},
            dataType:"json",
            success:function(data){
                $('#saleModal').modal('show');
                $('#sale_date').val(data.sale_date);
                $('#sale_status').val(data.sale_status);
                $('#submit_by').val(data.submit_by);
                $('#agent_name').val(data.agent_name);
                $('#closer_name').val(data.closer_name);
                $('#customer_name').val(data.customer_name);
                $('#phone_number').val(data.phone_number);
                $('#alt_phone').val(data.alt_phone);
                $('#email_address').val(data.email_address);
                $('#birth_date').val(data.birth_date);
                $('#home_address').val(data.home_address);
                $('#ssn_number').val(data.ssn_number);
                $('#product_sold').val(data.product_sold);
                $('#comments').val(data.comments);
                $('#admin_note').val(data.admin_note);
                $('.modal-title').html("<i class='fa fa-pencil-square-o'></i> Edit Sale");
                $('#sale_id').val(sale_id);
                $('#action').val("Edit");
                $('#btn_action').val("Edit");

            }
        })
    });
</script>

ph730

i try the datatables docs ajax.reload() but didnt help me out i think there is problem in code

kthorngren

I think the problem is with the scope of the variable salesdataTable is only in the fetch_data() function. Either declare the variable globally or change your ajax.reload() to this:
$('#order_data').ajax.reload();

If this doesn't help then please provide a link to your page or a test case replicating the issue so we can help debug.

Kevin

ph730

hi Kevin thanks for reply i try ajax.reload but didnt worked here is a test link for this code plz check this like when i update the status to Active data updated but need to refresh the browser to see the changes

http://test.younlife.com/sales_listf.php

kthorngren

I might be missing it but I don't see where you made either of the changes I suggested.

Kevin

ph730

ok i check the console where its says ReferenceError: salesDatatable is not defined
so i add the code var salesdataTable = $('#order_data').DataTable(); on

       $(document).on('submit', '#sale_form', function(event){
        var salesdataTable = $('#order_data').DataTable();    
        event.preventDefault();
        $('#action').attr('disabled', 'disabled');
        var form_data = $(this).serialize();
        $.ajax({
            url:"sale_action.php",
            method:"POST",
            data:form_data,
            success:function(data)
            {
                $('#sale_form')[0].reset();
                $('#saleModal').modal('hide');
                $('#alert_action').fadeIn().html('<div class="alert alert-success">'+data+'</div>');
                $('#action').attr('disabled', false);
                salesdataTable.ajax.reload();
            }
        })
    });

its work now can u check on that code i put correctly ??

ph730

i update with code check again its works now there is no error in console

ph730

Brother can u help me on one thing that i want to change whole row color like is column have text Active then whole row color will be green ????

kthorngren

Your above code looks ok to me.

Kevin