ajax call not happening

user_19570214 0
Viewed 46

I'm trying to add a date filter to customers' accounts, but I can't seem to get it right. every time I click the filter button the page refreshes. I want to get the customer's order date, order id, debit amount, credit amount, and total amount. I don't know how to call credit and debit as it is conditional. kindly help me figure out this code. thank you in advance :)

ps: I'm a newbie to coding, so forgive me for my bad coding

here's my code :

<table id="customer-account-table" class="table table-bordered" with="100%">
              <thead>
                <tr class="bg-secondary">
                  <th>Date</th>
                  <th>Order ID</th>
                  <th>Debit</th>
                  <th>Credit</th>
                  <th>Amount</th>
                </tr>
              </thead>
              <tbody id="accdet">
               @foreach($accounts as $account)
                 <tr>
                  <td>{{ $account->payment_date }}</td>
                  <td>{{ $account->order_id }}</td>
                  <td align="right">
                      @if ($account->credit_debit == "DEBIT") 
                        <i class="fas fa-rupee-sign"></i> {{ $account->amount }}
                    @endIf
                   </td>
                  <td align="right">
                         @if ($account->credit_debit == "CREDIT") 
                            <i class="fas fa-rupee-sign"></i>  {{ $account->amount }}
                     @endIf
                   </td>
                  <td align="right"><i class="fas fa-rupee-sign"></i>  {{ $account->amount }}</td>
              </tr>
                  @endForeach
              </tbody>
                <tfoot>
                <tr>
                  <td></td>
                      <td></td>
                      <td class="bg-secondary" align="right">Total Debit <i class="fas fa-rupee-sign"></i>:  {{$total_debit }}</td>
                      <td class="bg-success" align="right">Total Credit <i class="fas fa-rupee-sign"></i>:  {{ $total_credit }}</td>
                      <td class="bg-secondary" align="right">Grand Total <i class="fas fa-rupee-sign"></i>:  {{ $balance }}</td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>
    </div>


<script>
  $(document).ready(function() {

      var table = $('#customer-account-table').DataTable({
        aaSorting: [[ 1, "desc" ]]
      });

      const baseURL="{{url('')}}";
      $(document).ready(function(){
        console.log(baseURL);

        $("#accountfilter").submit(function(event) {
          console.log("test") ;
          var accounthtml='';
          var formData= 
          { 
            filter:$("#Accountfilter").val()
          };

          $.ajax (
          {
            type: "GET",
            url: baseURL+"customers/data{id}"+id,
            data : formData,
            dataType : "json",
            encode:true }).done(function(data){
              console.log(data); 
              var html = data.accounts;

              html.forEach(accdet=> {
                accounthtml = '<tr>\
                <td>'+account['payment_date']+'</td>\
                <td>'+account['order_id']+'</td>\
                <td>'+account['amount']+'</td>\ </tr>'
              });
              $("#accdet").html(accounthtml);
            });
          });
           e.preventDefault();
       });
    });
</script>
html jquery ajax
1 Answers

You have to add event.preventDefault(); inside the submit function. Otherwise your form will be submitted as a normal form and redirect to the action page of the form.


$("#accountfilter").submit(function (event) {
    event.preventDefault(); // <-- add this line 
    console.log("test");
    var accounthtml = '';
    var formData = {
        filter: $("#Accountfilter").val()
    };

    $.ajax({
        type: "GET",
        url: baseURL + "customers/data{id}" + id,
        data: formData,
        dataType: "json",
        encode: true
    }).done(function (data) {
        console.log(data);
        var html = data.accounts;

        html.forEach(accdet => {
            accounthtml = '<tr>\
    <td>' + account['payment_date'] + '</td>\
    <td>' + account['order_id'] + '</td>\
    <td>' + account['amount'] + '</td>\ </tr>'
        });
        $("#accdet").html(accounthtml);
    });
});
user_70439080
Related