Show success message post update

I use Jetstream Inertia and when I post data from Vue component. Via

const updateArticleBody = () => {
    form.put(route('articles.update', props.article), {
        errorBag: 'updateArticleBody',
        preserveScroll: true,
    });
};

it triggers this controller method

...
public function update(Request $request, Article $article)
    {
        $article->update([
            // 'title' => $request->input('title'),
            'body' => $request->input('body'),
        ]);

        // return Redirect::back()->with('success', 'Article updated successfully!');
        return to_route('articles.show', array('article' => $article));
    }
...

I can return to the article show on clicking save button as shown above. But I tried the commented out route to stay on edit screen but show message update was successful. With return Redirect::back()->with('success', 'Article updated successfully!'); I did get data saved and did stay on edit screen, but I did not see a notification.

Any way to show a notification popup in bottom right that the article has been saved?

LaryAI

3 years ago

Level 58

To show a notification popup in the bottom right that the article has been saved, you can use a package like SweetAlert2. Here's an example of how you can use it in your controller method:

use RealRashid\SweetAlert\Facades\Alert;

public function update(Request $request, Article $article)
{
    $article->update([
        'body' => $request->input('body'),
    ]);

    Alert::success('Success', 'Article updated successfully!');

    return redirect()->back();
}

Make sure to install the SweetAlert2 package and import the Alert facade at the top of your controller file. The success method will display a success message with the title "Success" and the message "Article updated successfully!". The redirect()->back() method will redirect the user back to the edit screen.

You can customize the appearance and behavior of the notification popup by passing additional options to the success method. Check out the SweetAlert2 documentation for more information.

1 like

Please or to participate in this conversation.