Show in a div the content of a table that comes in an array after being called from with ajax

Viewed 37

From a template I am calling a method in php through ajax and this returns an array that has keys with numerical values and html code; The numeric values are shown to me correctly but the key that has a value with html code shows it to me as empty.

My array

$content_taxes= '<tr>
        <td>2</td>
        <td>VAT SuperReducted </td>
        <td class="text-right">4.00</td>
        <td class="text-right">140</td>
        <td class="text-right">5.6</td>
    </tr>
    <tr>
        <td>3</td>
        <td>VAT Reducted</td>
        <td class="text-right">10.00</td>
        <td class="text-right">0</td>
        <td class="text-right">0</td>
    </tr>
    <tr>
        <td>4</td>
        <td>VAT General </td>
        <td class="text-right">21.00</td>
        <td class="text-right">1360</td>
        <td class="text-right">285.6</td>
    </tr>';

$content_taxes = [    'status' => true,
    'content_taxes'=> $content_taxes,
    'sub_total_invoice' =>($total_invoice - $sub_total_taxes),
    'sub_total_taxes' => $sub_total_taxes,
    'total_invoice' => $total_invoice,
];


return  json_encode($content_taxes);

Now in the template after I have called it I get

$.ajax({
    method : "POST",
    url: "/invoices/calculate_totals",
    data: {
        "_token" : '{{ csrf_token() }}',
        "parameters" : data_inputs,
    },

    dataType: "json",
    success: function(data) {

        if(data.status) {

            $("#total_taxes").html(data.content_taxes); //SHOWS it EMPTY

            $(".sub-total").html(data.sub_total_invoice);  // it shows it correctly
            $("#sub_total").val(data.sub_total_invoice); // it shows it correctly

            $(".total-taxes").html(data.sub_total_taxes); // it shows it correctly
            $("#total_taxes").val(data.sub_total_taxes);  // it shows it correctly

            $(".total-invoice").html(data.total_invoice); // it shows it correctly 
            $("#total_invoice").val(data.total_invoice);  // it shows it correctly
        }
    }
});

In the sample console:

{"status":true,
"content_taxes":{},
"sub_total_invoice":"711.40", 
"sub_total_taxes":"68.60",
"total_invoice":"780.00"}

Table column content

<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>Tax description</th>
            <th class="text-right">Value%</th>
            <th class="text-right">Total</th>
            <th class="text-right">VAT</th>
        </tr>
    </thead>
    <tbody id="total_taxes">

       **************** You have to show me here. *****************

    </tbody>
</table>

What am I doing wrong!!!

Thanks for all greetings.

I expected to show the key that has the value with html code in a div but it prints empty.

1 Answers

Your html content variable is $content_taxes and also your response variable is $content_taxes may be this is the issue just try like this

    $content_taxes_html = '';
    $content_taxes_html = '<tr>
        <td>2</td>
        <td>VAT SuperReducted </td>
        <td class="text-right">4.00</td>
        <td class="text-right">140</td>
        <td class="text-right">5.6</td>
    </tr>
    <tr>
        <td>3</td>
        <td>VAT Reducted</td>
        <td class="text-right">10.00</td>
        <td class="text-right">0</td>
        <td class="text-right">0</td>
    </tr>
    <tr>
        <td>4</td>
        <td>VAT General </td>
        <td class="text-right">21.00</td>
        <td class="text-right">1360</td>
        <td class="text-right">285.6</td>
    </tr>';

$content_taxes = [    'status' => true,
    'content_taxes'=> $content_taxes_html,
    'sub_total_invoice' =>($total_invoice - $sub_total_taxes),
    'sub_total_taxes' => $sub_total_taxes,
    'total_invoice' => $total_invoice,
];


return  json_encode($content_taxes);

and in your ajax file just console.log(data) to check the response.

Related