Как я могу реализовать страницу стиля "мастера", используя JQuery?

Question

Я внедряю анкету в Интернете, и я бы хотел, чтобы у каждого блока вопросов была своя «страница», чтобы пользователю не приходилось листать. Однако при загрузке страницы возникают две проблемы: а) они требуют времени (и имеют заметное мерцание / обновление) и б) такой подход заставил бы меня выполнить вставку таблицы данных плюс несколько обновлений (или сохранить все это в моем сеансе).

Как я могу использовать JQuery, чтобы позволить пользователю просматривать страницу вопросника на стороне клиента, отвечая на вопросы по мере его поступления? После этого я смогу обработать хранилище данных, когда все ответы будут отправлены в конце.

Еще одна вещь ... есть ли способ убедиться, что сеанс не истекает, если пользователь занимает некоторое время?

Answer 1

Я не просто пытаюсь раскрыть свой плагин jQuery или что-то еще, но у меня есть приличная реализация мастера jQuery, которая может вам очень помочь: http://github.com/dominicbarnes/jWizard / http://plugins.jquery.com/project/jwizard

Answer 2

Лично я бы, наверное, пошел с простотой в этом случае. Загрузите весь контент в начале загрузки страницы в скрытых div. Затем используйте jQuery, чтобы показать / скрыть каждую из страниц «анкеты»:

div#pageTwo {
     display: none;
}

<div>
    <div id="pageOne">
        <p>Do you like the color blue?<p>
        <p>What about green?</p>
        <a href="#" onClick="gotoPageTwo();">Next Page</a>
    </div>
    <div id="pageTwo">
        <p>...</p>
    </div>
</div>

Где gotoPageTwo - это функция, которая использует jQuery для перехода между элементами div. Это может быть просто $("div#pageOne").hide() и $("div#pageTwo").show() или вы можете добавить несколько плавных анимированных переходов для слегка улучшенного пользовательского опыта (только не переусердствуйте, так как слишком много анимаций могут быстро отвлечь).

Затем вы также будете использовать jQuery, чтобы AJAX-вызовы возвращались на сервер через некоторый интервал (короче времени ожидания вашего сеанса), чтобы сделать простой запрос. Этот простой запрос в фоновом режиме гарантирует, что сеанс пользователя останется в живых.

Answer 3

Это довольно простая вещь в JavaScript / jQuery. Что не так с загрузкой всей анкеты HTML и скрытием всех блоков, кроме того, который вы хотите показать? Это так же просто, как $(element).hide(); и $(element).show();.

Если HTML всей анкеты слишком большой, вы можете попробовать разделить каждый блок на его собственный HTTP-запрос , и JavaScript загружает его каждые 5 секунд (или около того) через Ajax. Таким образом, пользователь может сразу же приступить к заполнению анкеты, вместо того, чтобы ждать загрузки всего материала, и это также может быть одним из способов поддержать ваш сеанс.

Answer 4

Быстрый поиск в Google дал это - http://plugins.jquery.com/project/formwizard.

Что касается вашего второго вопроса, вы, возможно, можете реализовать страницу «keep-alive», на которую вы можете периодически отправлять запросы AJAX, используя setInterval.