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 : Friday, March 5, 2021 4:36:32 AM(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 how the toastr notification works. But I cannot figure out how to make it work on my own admin page.

I have a simple form with one button to trigger some server-side code when the button is clicked:

Code:

                        @using (Ajax.BeginForm("LateShipments", "Automation", new AjaxOptions() { HttpMethod = "Post", OnSuccess = "ShowSavedSuccessMessage" }))
                        {
                            @Html.HiddenFor(model => model.JobName)
                            @Html.AntiForgeryToken()
                            <input type="submit" name="FireJob" value="Fire Job" class="btn btn-sm btn-primary" />
                        }


Here is my controller action:

Code:

        [HttpPost]
        [ValidateAntiForgeryToken]
        [ValidateAjax]
        public ActionResult LateShipments(LateShipmentsSettingsModel model)
        {
            // Enqueue the job
            BackgroundJob.Enqueue(() => LateShipmentHelper.ProcessLateShipments());

            // update user with result
            return Json(new { Success = true, msg = model.JobName + " job has been initiated.", model = model, Reload = false });
        }


and at the bottom of my view I have this javascript:

Code:

@section Scripts {
    <script type="text/javascript">
        /*FORM SUBMIT SUCCESS CALLBACK*/
        function ShowSavedSuccessMessage(data) {
            if (data == "success") {
                toastr.success(msg, "Success");
            }
        }
    </script>
    
}


My understanding is the Ajax form will call ShowSavedSuccessMessage() when the controller action is finished. And pass it my string data as a variable called 'msg'. So then toastr would then pop up using the msg string I passed in the action return json data.

But it just won't work and I can't figure out why not. It seems so damn simple. These MVC forms are so explicit in how they want to work.

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

shaharyartiwana25816656  
#2 Posted : Friday, March 5, 2021 4:43:01 AM(UTC)
shaharyar

Rank: Advanced Member

Groups: Admin, Developers, Registered, HelpDesk, Authorized User
Joined: 10/5/2018(UTC)
Posts: 704

Thanks: 5 times
Was thanked: 113 time(s) in 112 post(s)
Try using this code in your view file. Replace this with your code.

Code:
@section Scripts {
    <script type="text/javascript">
        /*FORM SUBMIT SUCCESS CALLBACK*/
        function ShowSavedSuccessMessage(data) {
            if (data.Success) {
                toastr.success(data.msg, "Success");
            }
        }
    </script>
    
}


You can see the response data object in the console by writing the following code in your callback function. Just for testing/debugging.

Code:
console.log(data)
thanks 1 user thanked shaharyar for this useful post.
Joe Payne2 on 3/5/2021(UTC)
Joe Payne2  
#3 Posted : Friday, March 5, 2021 5:28:40 AM(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)
Holy cow that worked perfectly thank you!!
Joe Payne2  
#4 Posted : Monday, March 8, 2021 4:51:32 AM(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)
So what if you want to return a partial view AND fire toastr? Is that possible?
shaharyartiwana25816656  
#5 Posted : Monday, March 8, 2021 6:36:37 AM(UTC)
shaharyar

Rank: Advanced Member

Groups: Admin, Developers, Registered, HelpDesk, Authorized User
Joined: 10/5/2018(UTC)
Posts: 704

Thanks: 5 times
Was thanked: 113 time(s) in 112 post(s)
Yes, we have handled this case. Please see the following line in the post method of BuyProductDialog method in retail side product controller.

Code:
return Json(new { status = "HTML", html = RenderRazorViewToString("_BuyProductDialog", model) });


You have to then handle accordingly in your ajax onSuccess method.
Search the onBuyProductDialogSuccess method in the retail app.js file.
thanks 1 user thanked shaharyar for this useful post.
Joe Payne2 on 3/8/2021(UTC)
Joe Payne2  
#6 Posted : Monday, March 8, 2021 11:43:50 AM(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)
Awesome. I'll give that a try and report my results here to share with others. Thanks again!!
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.