How to return a view from laravel controller function upon ajax call?

Question

I am working on a bookstore project where books can be added to cart, a user can select many books for adding them to cart. when the user clicks on the Add to Cart button, I am adding the IDs of the selected books in a JS array called cart. When all the selected books are added to the cart then I want to link <a> tag with ajax call that will hit the url of a controller function and will send the JS cart array object to the controller function and then in the controller function, I want to return view to the browser, I do not want the controller function to return the response back to the ajax call but instead I want to return the view to the browser.

Here is the JS function that adds the ID of the selected books to the cart JS array:

function addToCart(id)
{
if(! cart.includes(id) ) cart.push(id);

cartLength.html(cart.length);
$('#successCart'+id).html('Book added to cart.');

}

Here is the <a> tag that calls the ajax function, the function name is showCart():

<a href="#" onclick="event.preventDefault(); showCart();">
  <i class="fa fa-shopping-cart"></i>
  <span id="cartLength"></span>
</a>

Here is the showCart() function that has ajax code:

function showCart()
{


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

$.ajax({
        url:"cart",
        method:'post',
        data:{cart:cart},
        dataType: 'html'
  })
 .done(function(msg){


  });
 .fail(function(msg){
    alert(msg.responseJSON.errors);
 });
}

Here is the controller function - I want this function to directly return the view to the browser without sending it back to the ajax call:

public function showCart(Request $request)
{
    return view('cart', ['cart' => $request->cart ]); // this should be returned to the browser and not to the ajax call
}

Here is the route for the controller function:

Route::post('/cart', 'HomeController@showCart')->name('home.cart');

EDIT:

I have temporarily solved the issue with the following tricks but that is not a permanent solution:

After calling the showCart() function from ajax for sending the cart array variable from js to laravel controller, I used the following logic to store the books in a session variable whose ids are stored in the cart array:

public function showCart(Request $request)
{

    session()->put('cart_books', Book::whereIn('id', $request->cart)->get()); 
    session()->save();
    return "success";

}

After storing the result of the query in a session variable, I created another GET route for /cart as below:

Route::get('/cart', 'HomeController@viewCart');

Then upon success of the post ajax call, I called /cart with get method as below:

.done(function(msg){
    console.log('calling cart');
    location.href = "cart"; // Here I call the `/cart` with `get` method which will hit the `viewCart()` function of HomeController which will return the view back to the browser along with the results that were stored in the session variable.

  })

And this is the viewCart() controller function that returns the view to the browser and sends the session variable's data to the view:

public function viewCart()
{
   $random_books = Book::all()->random(4);
   $categories = Category::all();
    return view('cart', ['cart_books' => session()->get('cart_books'), 
  'random_books' => $random_books, 'categories' => $categories]); 
}

I want the controller function to return the view to the browser without returning it to the ajax call, any help is appreciated in advance.

score 3 · Answer 1 · answered Aug 12 '20 at 20:38

You can return Raw html from ajax call by rendering and returning the view inside your controller as,

return view('cart', ['cart' => $request->cart])->render();

This will return the raw HTML and you can further use it. However, returning HTML from ajax is not a good way, You can return JSON from the controller and render the view in frontend according to the JSON data.

score 2 · Answer 2 · answered Aug 13 '20 at 09:09

As the others said you can use

return view('cart', ['cart' => $request->cart])->render();

and in you jQuery do

.done(function(response){
    document.write(response);
});

Or you can return the link that its content should be shown to the user and redirect the user in your done method. So in your back-end you'll have

return route('cart', ['cart' => $request->cart]);

and in your front-end you'll have

.done(function(response){
    location.href = response;
});

Abdel-aziz hassan · Answer 3 · 2020-08-04T17:42:39.100

0

In the controller function just add render method like the following line

public function showCart(Request $request)
{
   return view('cart', ['cart' => $request->cart ])->render();
}

For js:

$.ajax({
method: 'POST', // Type of response and matches what we said in the route
url: '{{ route('home.cart') }}', // This is the url we gave in the route
data: {'cart' : cart}, // <-- this is your POST data
success: function(response){ // What to do if we succeed
    console.log(response);
},
error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail
    console.log(JSON.stringify(jqXHR));
    console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
}
});

edited Aug 04 '20 at 17:42

answered Aug 04 '20 at 17:06

Abdel-aziz hassan

370
2
9

It says `Internal Server Error`. – Abdul Raheem Ghani Aug 04 '20 at 17:12
jquery.min.js:5 POST http://localhost:8080/wisdom2/public/cart 500 (Internal Server Error) send @ jquery.min.js:5 ajax @ jquery.min.js:5 showCart @ main.js:84 onclick @ (index):64 – Abdul Raheem Ghani Aug 04 '20 at 17:16
`The GET method is not supported for this route.` – Abdul Raheem Ghani Aug 04 '20 at 17:21
It means you are calling it as get while it's not GET route,plz copy the route from routes files here – Abdel-aziz hassan Aug 04 '20 at 17:26
No, that is `post ` route, I have already added it to the question. – Abdul Raheem Ghani Aug 04 '20 at 17:27
Oh, write the following for js: $.ajax({ type: "POST", url: url, data: data, success: success, dataType: dataType }); Type not method – Abdel-aziz hassan Aug 04 '20 at 17:35
Now it cannot find the url, it goes to this url: http://localhost:8080/wisdom2/public/%7B%7B%20route('home.cart')%20%7D%7D – Abdul Raheem Ghani Aug 04 '20 at 17:52
try the same code but replace {{ route('home.cart') }} with the right url to cart, try to figure it out if you have any missing perfix. – Abdel-aziz hassan Aug 04 '20 at 18:35
I tried that as well but still get the `Internal Server Error`. – Abdul Raheem Ghani Aug 05 '20 at 00:43
I do but cannot find the answer, I have temporarily solved the issue but that is not a permanent solution in my mind. – Abdul Raheem Ghani Aug 05 '20 at 14:24
As we did not put our hands on the main problem, we will not be able to solve it permanently – Abdel-aziz hassan Aug 05 '20 at 16:26
1

Can you show log from laravel log file when that exception occured? Maybe we are missing something – Maciej Król Aug 09 '20 at 14:37
I also wonder, if `url: '{{ route('home.cart') }}'` is correctly evaluated to url – Maciej Król Aug 09 '20 at 14:40

score 0 · Answer 4 · answered Aug 11 '20 at 06:04

You're doing a XHR, so you shouldn't return the whole HTML view from your controller unless you plan to replace your existing element with the returned HTML, like how you're doing with addToCart. What you need here is a redirection after your POST, and your temporary solution isn't actually a bad solution :) Here's a similar question as yours with the same answer. In fact, I highly recommend your temporary solution over the alternative solution below.

Since you wish to use the view returned from your controller without returning it to your ajax, a rather unorthodox approach would be to POST through a <form>. You can dynamically create a <form>, with the <input>s of your data, and submit.

function postData(actionUrl, method, data) {
    var mapForm = $('<form id="mapform" action="' + actionUrl + '" method="' + method.toLowerCase() + '"></form>');
    for (var key in data) {
        if (data.hasOwnProperty(key)) {
            mapForm.append('<input type="hidden" name="' + key + '" id="' + key + '" value="' + data[key] + '" />');
        }
    }
    $('body').append(mapForm);
    mapForm.submit();
}

function showCart()
{
    postData('cart', 'post', cart);
}

I borrowed the above code from here. You can do the same with vanilla JS too.

How to return a view from laravel controller function upon ajax call?

4 Answers4

Linked