troubleshooting Question

Syntax error when using ASP:UpdateProgress

Avatar of BrianFord
BrianFordFlag for United States of America asked on
ASP.NET
3 Comments1 Solution198 ViewsLast Modified:
I have a page that has only 2 buttons, one to show a Toaster and one to show a spinner in an update panel.
The Spinner works fine but when trying to display the toaster I get the error below:

"Uncaught SyntaxError: Unexpected identifier" inspecting the page it highlights the following line:

showToaster('Saved.', 'Room saved.', 'success', 'False', 1000)Sys.Application.add_init(function() {
    $create(Sys.UI._UpdateProgress, {"associatedUpdatePanelId":"upnlSpinner","displayAfter":500,"dynamicLayout":true}, null, null, $get("updProgess1"));


If I comment out the ASP:UpdateProgress control, the toaster displays without error.

The full page markup is below:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="testParse.aspx.vb" Inherits="testParse" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link href="css/plugins/toastr/toastr.min.css" rel="stylesheet" />
    <link href="css/animate.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <script src="js/jquery-2.1.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/plugins/toastr/toastr.min.js"></script>


    <script>
        function showToaster(title, text, urgencyClass, showButton, waitTime) {

            // showButton = Show a close button on toaster (True or False)
            // waitTime = How long to wait before hiding toaster: 0 = wait forever

            toastr.options = {
                closeButton: false,
                debug: false,
                progressBar: true,
                preventDuplicates: false,
                positionClass: "toast-top-center",
                onclick: null,
                showDuration: 600,
                hideDuration: 1000,
                timeOut: waitTime,
                extendedTimeOut: waitTime,
                showEasing: "swing",
                hideEasing: "linear",
                showMethod: "slideDown",
                hideMethod: "fadeOut"
            };

            // Show the toaster
            if (showButton == "True") {
                var closeButton = "<br /><br /><button type=\"button\" class=\"btn btn-sm btn-default\">Close</button>";
                eval("toastr." + urgencyClass + "('" + text + closeButton + "', '" + title + "')");
            } else {
                eval("toastr." + urgencyClass + "('" + text + "', '" + title + "')");
            }
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server"></asp:ScriptManager>
        <br />
        <br />
        <div class="padLeft20">
            <div class="row">
                <div class="col-lg-4">
                    <br />
                    <asp:Button runat="server" ID="cmdGo" Text="Show Toaster" />
                    <asp:UpdatePanel runat="server" ID="upnlSpinner">
                        <ContentTemplate>
                            <asp:LinkButton runat="server" ID="cmdTestSpinner" CssClass="btn btn-sm btn-warning">Test Spinner</asp:LinkButton>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                    <br /><br />
            
                    <!-- Progress Update Panel to show activity spinner -->
                    <asp:UpdateProgress runat="server" ID="updProgess1" AssociatedUpdatePanelID="upnlSpinner">
                        <ProgressTemplate>
                            <div class="sk-spinner sk-spinner-wave">
                                <div class="sk-rect1"></div>
                                <div class="sk-rect2"></div>
                                <div class="sk-rect3"></div>
                                <div class="sk-rect4"></div>
                                <div class="sk-rect5"></div>
                            </div>
                        </ProgressTemplate>
                    </asp:UpdateProgress>
                </div>
            </div>
        </div>
    </form>

    <script src="js/plugins/pace/pace.min.js"></script>

    <script>
        function init() {
        }
    </script>

</body>
</html>

And in the code behind:
Partial Class testParse
    Inherits Page

    Private Sub cmdGo_Click(sender As Object, e As EventArgs) Handles cmdGo.Click

        ScriptManager.RegisterStartupScript(Me, [GetType](), "JSScript", "showToaster('Saved.', 'Room saved.', 'success', 'False', 1000)", True)

    End Sub

    Private Sub cmdTestSpinner_Click(sender As Object, e As EventArgs) Handles cmdTestSpinner.Click

        System.Threading.Thread.Sleep(5000)

    End Sub
End Class
ASKER CERTIFIED SOLUTION
HainKurt
Sr. System Analyst

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 3 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros