irankhosravi
5 months ago
790
9
Laravel

How do i send the view back to ajax in Laravel

Posted 5 months ago by irankhosravi

I want to after submit a form, display json in console and then it display for me in index page.

Look at my codes

index.blade.php

<form class="col l7 s12 m12 form1 slideud1" id="addPost" enctype="multipart/form-data" method="post">
@csrf
<div class="row">
<div class="col s10 white">
<i class="material-icons close1 close2 close3 right red-text text-darken-1" onclick="toggle(0)">close</i>
<div class="input-field col s12">
<i class="material-icons prefix">insert_drive_file</i>
<input id="icon_prefix" type="text" class="validate" name="title">
<label for="icon_prefix">title</label>
</div>
<div class="file-field input-field col s6 float-left">
<input type="text" name="category">
<label for="icon_prefix">category</label>
</div>
<div class="file-field input-field col s6 float-left">
<div class="btn">
<span>upload</span>
<input type="file" name="image_post">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
<div class="input-field col s12">
<textarea id="textarea1" class="materialize-textarea"></textarea>
<label for="textarea1">text</label>
</div>
<br>
<div class="col width-c">
<button class="btn waves-effect waves-light s5" type="submit" id="postAdd" name="action">save
<i class="material-icons right">send</i>
</button>
</div>
</div>
<div class="col s2 center-align">
<br>
<a class="btn-floating waves-effect waves-light white"><img src="../../images/user.png" alt="" class="user"></a><br><br>
<span>amir</span>
</div>
</div>
</form>

Ajax

<script>
    $(document).ready(function () {
        $('#postAdd').click(function(e){

            e.preventDefault();

            var formData = new FormData($('#addPost')[0]);
            formData.append('file', $('input[type=file]')[0].files[0]);

            $.ajax({
                type: "POST",
                url: "{{ route('posts.store') }}",
                data: formData,
                dataType: "JSON",
                processData: false,
                contentType: false,
                success: function (response) {
                    console.log(response);
                    showAllPosts();
                },
                error: function (error) {
                    console.log(error);
                }
            });
        });
        function showAllPosts() {
            $.ajax({
                url: "{{ route('posts.index') }}",
                type: "POST",
                data: {action: "view"},
                success: function (response) {
                    console.log(response);
                    $("#showPosts").html(response);
                }
            });
        }
    });
</script>

web.php

Route::resource('posts', 'PostController');

PostController.php

public function index()
{
    $posts = Post::latest()->get();
    return view('index', compact('posts'));
}

Please sign in or create an account to participate in this conversation.