logo
Welcome to our new AbleCommerce forums. As a guest, you may view the information here. To post to this forum, you must have a registered account with us, either as a new user evaluating AbleCommerce or an existing user of the application. For all questions related to the older version of Gold and earlier, please go to AbleCommerce Gold forum. Please use your AbleCommerce username and password to Login. New Registrations are disabled.

Notification

Icon
Error

Options
Go to last post Go to first unread
Joe Payne2  
#1 Posted : Tuesday, August 10, 2021 3:22:20 PM(UTC)
Joe Payne2

Rank: Advanced Member

Groups: HelpDesk, Developers
Joined: 11/9/2018(UTC)
Posts: 564

Thanks: 122 times
Was thanked: 26 time(s) in 25 post(s)
I really like the toastr popup in the admin. It's quick, concise and clear to the user.

But what I've been struggling with is how to fire toastr on a page that saves the data but also needs to redirect back to a parent page. Toastr fires, but the redirect immediately kills it and the user does not see the popup.

Finally figured out a way to do it today.

Assume you have the following page structure:
/Admin/RepairsDashboard
/Admin/RepairsDashboard/SetRma
/Admin/RepairsDashboard/SetRepairCost

So basically a main (index) page that handles showing the data (in my case a grid), and two child pages that each perform a specific task. Concept applies to both child pages, so let's just focus on the SetRepairCost child page.

When the user hits the 'Set Repair Cost' button in the parent page grid, a new view is rendered with a form for the user to enter their values. There is a Save (submit) button in the form.

At the end of the [HttpPost] action method for the form, I simply return a Json object:
Code:
return Json("Repair cost order has been generated.");


In the SetRepairCost view, I have the form set to call a js function on success, like this:
Code:
@using (Ajax.BeginForm("SetRepairCost", "RepairsDashboard", null, new AjaxOptions() { OnSuccess = "savedSuccessfully" }, new { id = "setrepaircost-form" }))


And finally, a small snippet of js to handle both showing the toastr message, AND automatically firing a redirect after the toastr message disappears:
Code:

function savedSuccessfully(data) {
            toastr.success(data,
                'Saved Successfully',
                {
                    timeOut: 2000,
                    preventDuplicates: true,
                    
                    // Redirect 
                    onHidden: function() {
                        window.location.href =  '@Url.Action("Index", "RepairsDashboard")';
                    }
                });
        }


Now, when the user hits the Save button, the page will show the toastr popup, and then automatically redirect back to the parent page.
thanks 1 user thanked Joe Payne2 for this useful post.
shaharyar on 8/10/2021(UTC)

Wanna join the discussion?! Login to your AbleCommerce Forums forum account. New Registrations are disabled.

Users browsing this topic
Guest
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.