Display controller variable on a Laravel blade using jQuery

Question

In my laravel app, I have a div on a blade to display total number of daily orders.

<div class="row mt-3" id="shopify_row1">
        <div class="col-md-2" id="shopify_widget1">
            <div class="jumbotron bg-dark text-white">
                <img class="img-fluid pull-left" src="https://cdn0.iconfinder.com/data/icons/social-media-2092/100/social-35-512.png" width="32" height="32">
                <h6 class="text-secondary mt-2 px-4">Shopify</h6>
                <hr class="border border-white">
                <h5 class="text-white">Total Orders</h5>
                <span class="tot_o" id="tot_o">{{ $tot_o }}</span> 
            </div>
        </div>
</div>

I get this $tot_o via controller.

Following is my index() in the controller

if($request->has('selected_date')){
                $selected_date=$request->selected_date;
                $url = "https://[email protected]/admin/api/2022-10/orders/count.json?status=any&created_at_max=".$selected_date."";
            }else{
                $selected_date = date('Y-m-d');
                $url = "https://[email protected]/admin/api/2022-10/orders/count.json?status=any&created_at_min=".$selected_date."";
            }
            $curl = curl_init( $url );
            curl_setopt($curl, CURLOPT_HTTPHEADER, array("Content-Type: application/json"));
            curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
            $json_response = curl_exec($curl);
            curl_close($curl);
            $result_1 = json_decode($json_response, TRUE);
            $tot_o = $result_1['count'];
  return view('dashboard.index', ['sum' => $sum, 
                'tot_o' => $tot_o]);

Now I'm trying to implement a date picker, so does the value of $tot_o should be changed according to the picked date, on change.

This is my date picker.

<td>
      <input id="date" class="date form-control" type="date">
</td>

And this is my JavaScript.

<script>
        $(document).on('change', '#date', function (e) {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            type: 'GET',
            url : '/home',
            data : {selected_date : $('#date').val()},
            success:function(data){

            $('#tot_o').empty(); 
            var total_orders = JSON.parse("{{ json_encode($tot_o) }}")
            console.log(total_orders);

            },
            timeout:10000
        });

    });    
    </script>

But here when I console.log my output it always gives me 0, even though the total is greater than the 0...

How can I correct my JS to display the value inside the <span class="tot_o" id="tot_o"></span> correctly...

Abdulla Nilam · Accepted Answer · 2022-12-21 05:03:44Z

4

In the controller AJAX

return response()->json([
    'tot_o' => $tot_o
]);

So in AJAX

success:function(data){
    var total_orders = data.tot_o;
    $('#tot_o').text(total_orders);
},

Span should be (id="tot_o")

<span class="tot_o" id="tot_o"></span>

You can use .text() or .html() to write data

answered Dec 21, 2022 at 5:03

Abdulla Nilam

39.6k18 gold badges85 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

nikamata hukamuko Over a year ago

thank you for your answer, but I do not have an ajax on my controller, I'm returning the view with an arrays

Abdulla Nilam Over a year ago

@nikamatahukamuko In the controller AJAX, this is for controller funtion of AJAX. /home

nikamata hukamuko Over a year ago

I'm really sorry , I still don't understand it, could you please edit your answer with the expected controller...

Abdulla Nilam Over a year ago

You cannot return the view and data at the same time—either one of these. Or define another function to get tot_o value

nikamata hukamuko Over a year ago

This is working! thank you for your patience and the support!

|

Vijay Hardaha · Accepted Answer · 2022-12-22 13:21:59Z

0

In the controller, write this:

if($request->ajax()) {
    return response(['total_order'=> $tot_o],200);
}

In ajax request's success callback:

$('#tot_o').text(ordertotal_orders);

Finally, add an id named tot_o to the span element:

<span class="tot_o" id="tot_o"></span>

edited Dec 22, 2022 at 13:21

Vijay Hardaha

2,6061 gold badge9 silver badges17 bronze badges

answered Dec 21, 2022 at 6:18

Nayan Bangar

1

Collectives™ on Stack Overflow

Display controller variable on a Laravel blade using jQuery

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related