How can i reload a div without refreshing page in Laravel

Question

I am creating a CRUD Application using Ajax in Laravel 8. And the problem is I want to reload my table using ajax without reloading the whole page but it's not reloading. I tried a lot of ways but it doesn't work. How can I do that?

This is my code in books.blade.php

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Datatables</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.12.1/datatables.min.css" />
</head>

<body>
<div class="container-fluid">
    <div class="row">
        <h1 class="text-center fw-bold">Bootstrap Datatable</h1>
    </div>
    <div class="row">
        <div class="col-lg-2"></div>
        <div class="col-lg-8">
            <div class="mb-3">
                <!-- Button trigger modal -->
                <button type="button" id="createNewBook" class="btn btn-success" data-bs-toggle="modal"
                    data-bs-target="#addmodel">
                    Add Record
                </button>
            </div>
            <table id="datatables" class="table">
                <thead>
                    <tr>
                        <th scope="col">Book_ID</th>
                        <th scope="col">Book_Name</th>
                        <th scope="col">Auther</th>
                        <th scope="col">Action</th>
                    </tr>
                </thead>
                <tbody id="tbody">

                    @foreach ($books as $row)
                    <tr>
                        <th scope="row">{{ $row->id }}</th>
                        <td>{{$row->title }}</td>
                        <td>{{ $row->author }}</td>
                        <td>
                            <a href="javascript:void(0)" data-toggle="tooltip" data-id="' . $row->id . '"
                                data-original-title="Edit" class="edit btn btn-primary btn-sm editBook">Edit</a>
                            <a href="javascript:void(0)" data-toggle="tooltip" data-id="' . $row->id . '"
                                data-original-title="Delete" class="btn btn-danger btn-sm deleteBook">Delete</a>
                        </td>
                    </tr>

                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="col-lg-2"></div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="addmodel" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add New Book</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="bookForm" name="bookForm" class="form-horizontal">
                    @csrf
                    <input type="hidden" name="book_id" id="book_id">
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">Title</label>
                        <div class="col-sm-12">
                            <input type="text" class="form-control" id="title" name="title"
                                placeholder="Enter Title" value="" maxlength="50" required="">
                        </div>
                    </div>

                    <div class="form-group mt-3">
                        <label class="col-sm-2 control-label">Author</label>
                        <div class="col-sm-12">
                            <textarea id="author" name="author" required="" placeholder="Enter Author"
                                class="form-control"></textarea>
                        </div>
                    </div>

                    <div class="col-sm-offset-2 col-sm-10 mt-3">
                        <button type="submit" class="btn btn-primary" id="saveBtn" value="create">Save changes
                        </button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>



<script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.12.1/datatables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous">
</script>
<script type="text/javascript">
$("#datatables").DataTable({});
$("#bookForm").submit(function(e) {
    e.preventDefault();

    var title = $("#title").val();
    var author = $("#author").val();
    var _token = $("input[name=_token]").val();

    $.ajax({
        type: "POST",
        url: "{{route('book.add')}}",
        data: {
            title: title,
            author: author,
            _token: _token
        },
        success: function(response) {
            if (response) {
                $("#bookForm")[0].reset();
                $("#addmodel").modal("hide");
            }
        }
    });
    $("#saveBtn").click(function() {
        $("#tbody").load("#tbody");
    });

});
</script>

And this is my code in Controller

<?PHP

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Book;

class BookController extends Controller
{
    public function index()
    {
        $books = Book::all();
        return view('books', compact('books'));
    }

    public function insert(Request $request)
    {
        $book = new Book();
        $book->title = $request->title;
        $book->author = $request->author;
        $book->save();
        return response()->json($book);
    }
}

So how can I do that, please help me out...

Any console errors?

Trey Copeland
– Trey Copeland

2022-06-01 16:50:29 +00:00
Commented Jun 1, 2022 at 16:50 — Trey Copeland
– Trey Copeland, Commented Jun 1, 2022 at 16:50
@TreyCopeland no, there is no console error.

Mubeen Ahmad
– Mubeen Ahmad

2022-06-01 18:09:38 +00:00
Commented Jun 1, 2022 at 18:09 — Mubeen Ahmad
– Mubeen Ahmad, Commented Jun 1, 2022 at 18:09

EHF Shahab · Accepted Answer · 2022-06-01 16:52:38Z

2

This question already has an answer by another user but i can repeat it here for you.

<script>
$('#tbody').load(document.URL +  ' #tbody');
</script>

answered Jun 1, 2022 at 16:52

EHF Shahab

7606 silver badges17 bronze badges

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

2 Comments

Mubeen Ahmad Over a year ago

it works but all the table formatting is disturbed when I use this method

EHF Shahab Over a year ago

It's because the tbody loads separately. Try reload whole table if it's not annoying for your visitors.

Hamza Shiwani · Accepted Answer · 2022-06-03 15:16:13Z

1

replace your ajax with this

$.ajax({
    type: "POST",
    url: "{{route('book.add')}}",
    data: {
        title: title,
        author: author,
        _token: _token
    },
    success: function(response) {
        if (response) {
            $("#bookForm")[0].reset();
            $('#tbody').load(document.URL +  ' #tbody');
            $("#addmodel").modal("hide");
        }
    }
});

answered Jun 3, 2022 at 15:16

Hamza Shiwani

112 bronze badges

1 Comment

Eben Watts Over a year ago

Works fine when you tried it on the entire table or div covering the whole table.

Ilyass · Accepted Answer · 2023-03-15 10:50:43Z

0

Someone already answered with this, with a small problem.

Here's a working fix:

<script>
$('#tbody').load(document.URL +  ' #tbody tr');
</script>

answered Mar 15, 2023 at 10:50

Ilyass

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Akki Buzz · Accepted Answer · 2023-03-18 10:52:43Z

I hope I'm not too much late but u can do something like below:-

Create a page load.blade.php in views folder
In the Controller code below

<?PHP

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Book;

class BookController extends Controller
{
    public function index()
    {
        $books = Book::all();
        return view('books', compact('books'));
    }

    public function insert(Request $request)
    {
        $book = new Book();
        $book->title = $request->title;
        $book->author = $request->author;
        $book->save();
        $html=view('load',compact($book))->render();
        return response()->json(['html'=>$html]);
    }
}

In load.blade.php file code below

@foreach ($book as $row)
<tr>
   <th scope="row">{{ $row->id }}</th>
   <td>{{$row->title }}</td>
   <td>{{ $row->author }}</td>
   <td>
       <a href="javascript:void(0)" data-toggle="tooltip" data-id="' . $row->id . '"
                                data-original-title="Edit" class="edit btn btn-primary btn-sm editBook">Edit</a>
      <a href="javascript:void(0)" data-toggle="tooltip" data-id="' . $row->id . '"
                                data-original-title="Delete" class="btn btn-danger btn-sm deleteBook">Delete</a>
    </td>
</tr>

@endforeach

In the Ajax code below

$.ajax({
    type: "POST",
    url: "{{route('book.add')}}",
    data: {
        title: title,
        author: author,
        _token: _token
    },
    success: function(response) {
        if (response) {
            $("#bookForm")[0].reset();
            $('#tbody').html(response.html);
            $("#addmodel").modal("hide");
        }
    }
});

I hope this helps, if any query do ask.😊

Sagar Galave · Accepted Answer · 2022-06-02 04:15:29Z

-1

Use this for eg.

window.newSetInterval = window.setInterval; window.setInterval = function(func, interval) { var interval = newSetInterval(func, interval); }

answered Jun 2, 2022 at 4:15

Sagar Galave

279 bronze badges

1 Comment

Relcode Over a year ago

what does this do? what does setting an interval have to do with refreshing the table without reloading the page? the question is looking for a laravel/ajax solution, not a plain JS function. also, please provide some content to you answers to help people who are seriously looking for help.

Collectives™ on Stack Overflow

How can i reload a div without refreshing page in Laravel

5 Answers 5

2 Comments

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related