Индикатор выполнения JQueryUI не сохраняет значение после обновления с помощью отправки формы

Я пытаюсь настроить индикатор выполнения JQuery для обновления, когда пользователь отправляет форму (окончательный код будет более сложным и динамичным, но я просто пытаюсь узнать, как индикатор выполнения работает в первую очередь).

Простой код, который я пытаюсь отладить:

<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>

Это простая форма, которая инициализирует индикатор выполнения на 25% и запускает функцию.submit, которая устанавливает значение на 75%. Я знаю, что вызывается код подтверждения, потому что, если я нажимаю кнопку "Отправить" несколько раз, в индикаторе выполнения мигает значение 75%.

У меня вопрос: как мне получить значение, которое останется выбранным после того, как оно будет изменено функцией.submit?

Заранее спасибо!

ОБНОВЛЕНИЕ: Спасибо за совет @charlietfl:-) Новое для всего сообщения:-)

Вот код на основе ajax, который у меня есть...

<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>

Все еще не обновляется... даже значение не мигает.

Спасибо!

боб

ЗАКЛЮЧИТЕЛЬНОЕ ОБНОВЛЕНИЕ: Необходимо также добавить некоторые JSON-материалы, чтобы заставить работать обратный вызов со страницы aspx. Ниже приведен полностью рабочий код для всех, кому он нужен:

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;
        }
    }

И тело самой страницы aspx:

<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>

Еще раз спасибо @charlietfl за помощь!

Источник

1 ответ

Решение

Между загрузками страниц нет сохранения состояния. Когда вы отправляете форму, она перезагружает страницу в зависимости от действия формы.

Некоторые варианты:

  1. Используйте ajax для отправки формы, чтобы пользователь не покинул страницу
  2. Используйте переменную javascript, определенную в коде вашего сервера и переданную тегу script, чтобы установить прогресс, настроить переменную в соответствии с отправкой или нет
  3. Сохранять состояние в cookie или localStorage и устанавливать значение на основе сохраненного значения
Источник
Другие вопросы по тегам