Question 366425 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – Inertia & React CRUD without reloading page

How can i do delete operation Inertia & React without page reloading.

ArticleController:

public function destroy(Article $article) {
        $article->delete();
        return redirect('/admin');
}

jsx:

function ArticleItem({ article }) {
    const { url } = usePage()
    const inAdminPage = url.includes('/admin') ? true : false

    function onDeleteSubmitEventHandler(e) {
        e.preventDefault()
        Inertia.delete(`/article/${article.id}`)
    }

    return (
        <>....
           {inAdminPage &&
                            <>
                                <div onClick={handleOptionsClick} className="hover:bg-gray-100 hover:cursor-pointer transition rounded-full p-2 relative">
                                    <img src="/icon/options.svg" className="w-1" />
                                </div>
                                {options &&
                                    <div id="options" className="absolute right-7 bottom-0  shadow-md">
                                        <ul>
                                            <form onSubmit={onDeleteSubmitEventHandler}>
                                                <button type="submit" className="hover:bg-gray-200 hover:cursor-pointer bg-white px-4 py-3" >Delete</button>
                                            </form>
                                            <li className="hover:bg-gray-200 bg-white px-4 py-3">Edit</li>
                                        </ul>
                                    </div>
                                }
                            </>
                        }
        </>

    )
}

The code above currently requires a page reload to reflect the deletion of data. I want the deletion to occur in real-time without the need for a page reload.

How can i do it?

Thank You

Tags:

2

Answers


  1. 0

    try to use this in your handleSubmit

    import { router } from ‘@inertiajs/react’;

    function onDeleteSubmitEventHandler(e) {
    e.preventDefault()
    Inertia.delete(/article/${article.id})
    router.reload({ only: [‘article’] })
    }

    https://inertiajs.com/partial-reloads

    as y con see in inertia.doc

    ps: paste even your controller to be clearer
    and paste this :

    return to_route(‘yourROUTE’)

    Login or Signup to reply.
  2. 0

    try this code
    first update your destroy function

    public function destroy(Article $article) {
    $article->delete();
    return response()->json(['success' => true]);
}

    then modified your code

    import { usePage, useRemember } from '@inertiajs/inertia-react';

function ArticleItem({ article }) {
 const { data, setData } = useRemember({ deletedArticleId: null });
   async function onDeleteSubmitEventHandler(e) {
          const response = await Inertia.delete(`/article/${article.id}`);
            if (response && response.success) {
                setData('deletedArticleId', article.id);
             }
          }
   }
    • The destroy method in the ArticleController returns a JSON response
      indicating the success of the deletion operation.
    • Use useRemember from Inertia to store the ID of the deleted article.
    • With the updated state, you can conditionally render the deleted article from the UI, ensuring real-time deletion without page reloads
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search