How can I load content of another page inside a specic div after form submit using AJAX in Laravel

Question

I want to load a page content (search.blade.php) inside a specific div element after form submit for the controller function using AJAX in Laravel blade.

The data must be sent to the (search.blade.php) page from the controller.

My Form:

<form data-action="{{ route('viewsearch') }}" method="POST" enctype="multipart/form-data" id="searchview">
    @csrf
    <input type="text" name="email" class="form-control" placeholder="Username/Email" style="width:180px; float:left; font-size:12px;">
    <select name="cate" class="form-control" style="width:180px;  float:left; font-size:12px;">
        <option value="">Select Category</option>
        <option value="Programmer">Programmer</option>
        <option value="Software Engineering">Software Engineering</option>
    </select>
    <button type="submit" class="btn btn-primary" style="width:180px; float:left; background-color:green; font-size:12px;">Search Professional</button>
</form>

Div where to show content from another page:

<div id="dataview">
    @include('htmlview')
</div>

Ajax & JavaScript for the form submit and load content of search.blade.php page in the specific div:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    var form = '#searchview';
    $(form).on('submit', function (event) {
        event.preventDefault();
        var url = $(this).attr('data-action');

        $.ajax({
            url: url,
            method: 'POST',
            data: new FormData(this),
            dataType: 'JSON',
            contentType: false,
            cache: false,
            processData: false,
            success: function (response) {
                $("#dataview").html(response)
            },
            error: function (response) {
            }
        });
    });
});
</script>

Web route:

Route::post('viewsearch', [App\Http\Controllers\Controller::class, 'viewsearch'])->name('viewsearch');

Controller function for receive data from the form, send data to the search.blade.php page:

public function viewsearch(Request $request)
{
    $user = $request->email;
    $cate = $request->cate;
    return view('search',['user'=>$user,'cate'=>$cate]);
}

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community, May 10 '23 at 04:14
I think you are trying to return a fully generated view from your AJAX call, and insert it in the page, is that correct? I searched for "*laravel return view from ajax*" and found many questions and answers here already, suggesting you must use `->render()`. Did you see those and try that already? https://stackoverflow.com/q/28634712/6089612, https://stackoverflow.com/q/63251604/6089612, https://stackoverflow.com/q/73468942/6089612, https://stackoverflow.com/q/64108609/6089612, https://stackoverflow.com/q/73969935/6089612, https://stackoverflow.com/q/57467725/6089612 ... — Don't Panic, May 11 '23 at 06:47
Does this answer your question? [How can I return a view from an AJAX call in Laravel 5?](https://stackoverflow.com/questions/28634712/how-can-i-return-a-view-from-an-ajax-call-in-laravel-5) — Don't Panic, May 11 '23 at 06:48

score 0 · Answer 1 · answered May 09 '23 at 20:48

in the controller:

$user = $request->email;
$cate = $request->cate;

return response()->json(['view' => view('search',['user'=>$user,'cate'=>$cate,])->render(),]);

in the Ajax:

success: function(data)
{
$("#dataview").html(data.view);
},
error: function(response) 
{
}

Note: After form submit using Ajax the data is sent to the "search.blade.php" and the content of "search.blade.php" is shown inside the desired div element at the current page without any page load.

Thank you.

How can I load content of another page inside a specic div after form submit using AJAX in Laravel

1 Answers1