Recent posts
Don't miss the latest trends
-
coders guild
CRUD CONTROLLER
public function post() { $posts = Post::all(); return view('user.create', compact('posts')); } // Store new post public function post_store(Request $request) { $request->validate([ 'title' => 'required|string|max:255', 'description' => 'required|string', ]); $post = Post::create([ 'title' => $request->title, 'description' => $request->description, ]); return response()->json($post); } // Update post public function post_update(Request $request, $id) { $request->validate([ 'title' => 'required|string|max:255', 'description' => 'required|string', ]); $post = Post::findOrFail($id); $post->update([ 'title' => $request->title, 'description' => $request->description, ]); return response()->json($post); } // Delete post public function posts_destroy($id) { $post = Post::findOrFail($id); $post->delete(); return response()->json(['message' => 'Post deleted successfully']); }Route::get('/post',[UserController::class,'post'])->name('posts.index'); Route::post('/post_store', [UserController::class, 'post_store'])->name('posts.store'); Route::post('/posts_update/{id}', [UserController::class, 'post_update'])->name('posts.update'); Route::post('/posts_destroy/{id}', [UserController::class, 'posts_destroy'])->name('posts.destroy');
-
coders guild
CRUD AJAX
@include('components.doctype') @include('components.header') <div class="container mt-4"> <h2>Posts</h2> <!-- Add Post Button --> <button type="button" class="btn btn-success mb-3" data-bs-toggle="modal" data-bs-target="#createModal"> Add Post </button> <!-- Posts Table --> <table class="table table-bordered table-striped"> <thead class="thead-dark"> <tr> <th>ID</th> <th>Title</th> <th>Description</th> <th>Actions</th> </tr> </thead> <tbody> @foreach ($posts as $post) <tr id="postRow{{ $post->id }}"> <td>{{ $post->id }}</td> <td>{{ $post->title }}</td> <td>{{ $post->description }}</td> <td> <!-- Edit Button --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editModal{{ $post->id }}"> Edit </button> <!-- Delete Form --> <form class="deletePostForm" data-id="{{ $post->id }}" style="display:inline;"> @csrf <input type="hidden" name="_method" value="POST"> <button type="submit" class="btn btn-danger">Delete</button> </form> </td> </tr> <!-- Edit Modal --> <div class="modal fade" id="editModal{{ $post->id }}" tabindex="-1" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form class="editPostForm" data-id="{{ $post->id }}"> @csrf <input type="hidden" name="_method" value="POST"> <div class="modal-header"> <h5 class="modal-title">Edit Post</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="mb-3"> <label class="form-label">Title</label> <input type="text" class="form-control" name="title" value="{{ $post->title }}" required> </div> <div class="mb-3"> <label class="form-label">Description</label> <textarea class="form-control" name="description" rows="3" required>{{ $post->description }}</textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Save Changes</button> </div> </form> </div> </div> </div> @endforeach </tbody> </table> </div> <!-- Create Modal --> <div class="modal fade" id="createModal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form id="createPostForm"> @csrf <div class="modal-header"> <h5 class="modal-title">Add New Post</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="mb-3"> <label class="form-label">Title</label> <input type="text" class="form-control" name="title" required> </div> <div class="mb-3"> <label class="form-label">Description</label> <textarea class="form-control" name="description" rows="3" required></textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="submit" class="btn btn-success">Add Post</button> </div> </form> </div> </div> </div> <!-- Scripts --> <meta name="csrf-token" content="{{ csrf_token() }}"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $(document).ready(function() { // Create Post $('#createPostForm').submit(function(e) { e.preventDefault(); let formData = $(this).serialize(); $.post("{{ route('posts.store') }}", formData, function(response) { $('#createModal').modal('hide'); $('#createPostForm')[0].reset(); $('tbody').append(` <tr id="postRow${response.id}"> <td>${response.id}</td> <td>${response.title}</td> <td>${response.description}</td> <td> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editModal${response.id}">Edit</button> <form class="deletePostForm" data-id="${response.id}" style="display:inline;"> <input type="hidden" name="_method" value="POST"> <button type="submit" class="btn btn-danger">Delete</button> </form> </td> </tr> `); // Append Edit Modal $('body').append(` <div class="modal fade" id="editModal${response.id}" tabindex="-1" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form class="editPostForm" data-id="${response.id}"> <input type="hidden" name="_method" value="PUT"> <div class="modal-header"> <h5 class="modal-title">Edit Post</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="mb-3"> <label class="form-label">Title</label> <input type="text" class="form-control" name="title" value="${response.title}" required> </div> <div class="mb-3"> <label class="form-label">Description</label> <textarea class="form-control" name="description" rows="3" required>${response.description}</textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Save Changes</button> </div> </form> </div> </div> </div> `); alert('Post created successfully!'); }).fail(() => { alert('Failed to create post.'); }); }); // Edit Post $(document).on('submit', '.editPostForm', function(e) { e.preventDefault(); let form = $(this); let postId = form.data('id'); let formData = form.serialize(); $.ajax({ url: `/posts_update/${postId}`, method: 'POST', data: formData, success: function(response) { $(`#postRow${postId} td:eq(1)`).text(response.title); $(`#postRow${postId} td:eq(2)`).text(response.description); form.closest('.modal').modal('hide'); alert('Post updated successfully!'); }, error: function(xhr) { alert('Failed to update post'); console.error(xhr.responseText); } }); }); // Delete Post $(document).on('submit', '.deletePostForm', function(e) { e.preventDefault(); if (!confirm('Are you sure you want to delete this post?')) return; let form = $(this); let postId = form.data('id'); let formData = form.serialize(); $.ajax({ url: `/posts_destroy/${postId}`, method: 'POST', data: formData, success: function() { $(`#postRow${postId}`).remove(); alert('Post deleted successfully!'); }, error: function() { alert('Failed to delete post'); } }); }); }); </script> @include('components.footer')
-
coders guild
edit and delete ajax
<!-- Edit Modal --> <div class="modal fade" id="editModal{{ $post->id }}" tabindex="-1" aria-labelledby="editModalLabel{{ $post->id }}" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form class="editPostForm" data-id="{{ $post->id }}"> @csrf @method('PUT') <div class="modal-header"> <h5 class="modal-title">Edit Post</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="mb-3"> <label class="form-label">Title</label> <input type="text" class="form-control" name="title" value="{{ $post->title }}" required> </div> <div class="mb-3"> <label class="form-label">Description</label> <textarea class="form-control" name="description" rows="3" required>{{ $post->description }}</textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Save Changes</button> </div> </form> </div> </div> </div> <form class="deletePostForm" data-id="{{ $post->id }}" style="display: inline-block;"> @csrf <input type="hidden" name="_method" value="DELETE"> <button type="submit" class="btn btn-danger">Delete</button> </form> <script> $(document).ready(function() { // Create Post AJAX (your existing code) // Edit Post AJAX $(document).on('submit', '.editPostForm', function(e) { e.preventDefault(); let form = $(this); let postId = form.data('id'); let formData = form.serialize(); $.ajax({ url: `/posts/${postId}`, method: 'POST', data: formData, success: function(response) { // Close modal form.closest('.modal').modal('hide'); // Update table row let row = $('button[data-bs-target="#editModal' + postId + '"]').closest('tr'); row.find('td:eq(1)').text(response.title); row.find('td:eq(2)').text(response.description); alert('Post updated successfully!'); }, error: function(xhr) { alert('Error updating post.'); } }); }); // Delete Post AJAX $(document).on('submit', '.deletePostForm', function(e) { e.preventDefault(); if (!confirm('Are you sure you want to delete this post?')) return; let form = $(this); let postId = form.data('id'); let formData = form.serialize(); $.ajax({ url: `/posts/${postId}`, method: 'POST', data: formData, success: function(response) { // Remove table row form.closest('tr').remove(); alert('Post deleted successfully!'); }, error: function(xhr) { alert('Error deleting post.'); } }); }); }); </script> public function update(Request $request, Post $post) { $post->update($request->only('title', 'description')); return response()->json($post); } public function destroy(Post $post) { $post->delete(); return response()->json(['message' => 'Post deleted successfully']); }
-
coders guild
ajax search 2
Create this file: resources/views/posts/partials/posts_table.blade.php @forelse ($posts as $post) <tr> <td>{{ $post->id }}</td> <td>{{ $post->title }}</td> <td>{{ $post->description }}</td> </tr> @empty <tr> <td colspan="3" class="text-center">No results found.</td> </tr> @endforelse public function searchPage() { $posts = Post::all(); // Load all posts initially return view('posts.search', compact('posts')); } public function ajaxSearch(Request $request) { $query = $request->input('query'); $posts = Post::where('title', 'LIKE', "%{$query}%") ->orWhere('description', 'LIKE', "%{$query}%") ->get(); // Return only the table rows as HTML return view('posts.partials.posts_table', compact('posts'))->render(); } // Load the search page Route::get('/posts/search', [PostController::class, 'searchPage'])->name('posts.search.page'); // AJAX search Route::get('/posts/search/ajax', [PostController::class, 'ajaxSearch'])->name('posts.search.ajax');
-
coders guild
search ajax
@include('components.doctype') @include('components.header') <div class="container mt-4"> <h2>Search Posts (Live AJAX + Blade)</h2> <!-- Search Input --> <input type="text" id="searchInput" class="form-control mb-4" placeholder="Search by title or description"> <!-- Results Table --> <table class="table table-bordered table-striped"> <thead class="thead-dark"> <tr> <th>ID</th> <th>Title</th> <th>Description</th> </tr> </thead> <tbody id="postsTableBody"> @foreach ($posts as $post) <tr> <td>{{ $post->id }}</td> <td>{{ $post->title }}</td> <td>{{ $post->description }}</td> </tr> @endforeach </tbody> </table> </div> @include('components.footer') <!-- jQuery CDN --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $('#searchInput').on('keyup', function() { let query = $(this).val(); $.ajax({ url: "{{ route('posts.search.ajax') }}", type: "GET", data: { query: query }, success: function(response) { $('#postsTableBody').html(response); }, error: function() { alert('Error searching posts.'); } }); }); }); </script>
Popular Posts
-
Routes
1 reaction
-
installaion:
0 reaction
-
auth installation
0 reaction
-
profile route
0 reaction
-
profile
0 reaction
Jane Cooper
Katen Doe
Barbara Cartland