JQueryUI Progress Bar doesn't maintain value after update via form submit

Question

I'm trying to set up a JQuery Progress Bar to update when the user submits a form (the final code will be more complex and dynamic, but I'm just trying to learn how the progress bar works first).

The simple code that I'm trying to debug is:

<body>
<form id="form1" method="GET" runat="server">
<div>
    <h1>Test</h1>

    <input type="submit" value="Start Test"/>
</div>
</form>

<div id="progressbar"></div>

<script type="text/javascript">
    $("#progressbar").progressbar({
        value: 25
    });
    $("#progressbar > div").css({ 'background': 'Green' });

    $(document).ready(function () {
        $("#form1").submit(function () {
            $("#progressbar").progressbar({ value: 75 });
        });
    });
</script>
</body>

It's just a simple form that initializes a progress bar to 25%, and runs a .submit function that sets the value to 75%. I know that the submit code is getting called because if I click the Submit button repeatedly, I see the 75% value flash on and off in the progress bar.

My question is: How do I get the value to stay selected once it's changed by the .submit function?

Thanks In Advance!

UPDATE: Thanks for the advice @charlietfl :-) New to the whole posting thing :-)

Here is the ajax-based code I have...

<body>
<form id="form1" method="GET" runat="server">
<div>
    <h1>Test</h1>

    <input type="submit" value="Start Test"/>
</div>
</form>

<div id="progressbar"></div>

<script type="text/javascript">
    $("#progressbar").progressbar({
        value: 25
    });

    $(document).ready(function () {
        $("#form1").submit(function () {
            $.ajax({
                url: "JQueryProgressTest.aspx/GetProgress",
                type: "GET",
                success: function (data) {
                    $(".selector").progressbar({value: data});
                }
            });
        });
    });
</script>
</body>

Still not updating...don't even see the value flash anymore.

Thanks!

Bob

FINAL UPDATE: Needed to also add some JSON stuff to get the callback from the aspx page to work. Below is the fully working code for anyone else who needs it:

ASPX Code-Behind:

    public partial class JQueryProgressTest : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        public static int GetProgress()
        {
            // Put any code to update the progress bar here
            return 50;
        }
    }

And the body of the aspx page itself:

<body>
    <form id="form1" method="GET" runat="server">
    <div>
        <h1>Test</h1>

        <input type="submit" value="Start Test"/>
    </div>
    </form>

    <div id="progressbar" style="border-color: lightgreen;"></div>

    <script type="text/javascript">
        $("#progressbar").progressbar({
            value: 25
        });
        $("#progressbar > div").css({ 'background': 'Green' });
        $(document).ready(function () {
            $("#form1").submit(function (event) {
                event.preventDefault();
                $.ajax({
                    type: "POST",
                    url: "JQueryProgressTest.aspx/GetProgress",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        $("#progressbar").progressbar({ value: response.d });
                    },
                    failure: function(response) {
                        alert("Error in calling Ajax:" + response.d);
                    }
                });
            });
        });
    </script>
</body>

Thanks again to @charlietfl for all the help!

Answer 1

There is no state saving between page loads. When you submit the form it will reload page based on the form action.

Some choices are:

Use ajax to submit form so user doesn't leave page
Use a javascript variable defined in your server code and passed to script tag to set progress, adjust variable according to submit or not
Store state in cookie or localStorage and set value based on stored value

JQueryUI Progress Bar doesn't maintain value after update via form submit

Question

1 answers

solution1
1 ACCPTED 2015-03-19 14:29:38

JQueryUI Progress Bar doesn't maintain value after update via form submit

Question

1 answers

solution1 1 ACCPTED 2015-03-19 14:29:38

solution1
1 ACCPTED 2015-03-19 14:29:38