jQuery mobile: проблема с отправкой форм из-за переходов страниц - PullRequest
Новая
       1

jQuery mobile: проблема с отправкой форм из-за переходов страниц

2 голосов
/ 21 июня 2011

Я немного запутался с чем-то, что я пытаюсь сделать в jquery mobile. У меня на сайте около 5 страниц, и на каждой странице есть одна и та же веб-форма. Я написал скрипт, который обрабатывает форму, используя jquery ajax. Все это работает с index.html.

У меня есть файл page2 в моем index.html, который служит второй страницей моего веб-сайта, однако форма не работает.

У меня также есть страница page3.html. Когда я захожу на эту страницу, она имеет ту же форму, что и на моей домашней странице, но она не требует jquery js, как, например, я скрываю строки p.error с помощью jquery, она отлично работает на домашней странице, но не вообще не запускать на внутренней странице.

Есть ли способ это исправить? Какова общая рекомендация в jquery mobile, когда она имеет одинаковую точную форму на всем сайте? Сейчас я могу заставить веб-форму работать только на моей домашней странице.

Вот код с сайта, сначала js. 

$(document).ready(function() {
     $('.error').hide();

     $(function() {
     $(".button").click(function() {
     ... form validations go here ...
     ... using $.ajax({ type: "post", data: datastring }) ...

Я просто положил выдержку из кода js. Возможно, что функция document.read загружается только на домашнюю страницу, а затем все внутренние страницы теряют этот скрипт. Так, страницы, которые не являются index.htl, я должен по-другому вызвать мой скрипт формы?

Я оборачиваю каждую страницу в div следующим образом: 

<div id="container" data-role="page">... my page content code here ...</div>
<div id="page2" data-role="page">... my page content code here ...</div>

Каждая страница имеет одну и ту же форму, но когда я перехожу на страницу 2, форма проверяется, но она также конфликтует с другой формой, поэтому я не могу отправить ее, потому что она всегда будет видеть поля формы пустыми.

Каждая страница содержит ссылки на другие страницы. Когда я нажимаю, чтобы перейти на страницу, которая не является индексом или страницей 2, в форме ничего не работает (мои операторы p.error видны, нажмите кнопку "Отправить", чтобы отправить меня на страницу с ошибкой 405). Когда я отправляю форму с домашней страницы, все работает именно так, как ожидалось. Если я не выбираю что-то из выпадающего списка, он показывает мои фразы p.error. если я оставлю поле моего адреса электронной почты пустым, будет отображена фраза p.error для отображения сообщения об ошибке.

Я почти уверен, что проблема в том, как jquery mobile захватывает скрипты и загружает их в DOM, и я прочитал, что могу загрузить javascript только один раз на домашней странице. это правда?

Конечный результат, который я ищу, - это способ получить полностью функционирующую форму с проверкой формы на каждой странице сайта, будь то страница со сложными данными или страница с внешними данными, и я хочу сохранить все анимированных переходов.

Ответы [ 2 ]

3 голосов
/ 24 июня 2011

Давайте начнем с нуля.Оказывается, отправка формы Ajaxified по умолчанию, RTFM здесь .И это то, как вы обрабатываете это в jQuery.

Исходя из этого, я создал 2 страницы и кнопка "Отправить" отправляет только ту форму, в которой он находится, что вам и нужно!

Page1: 

<div data-role="page">
    <script type="text/javascript">
        $(document).ready(function () {    
            $("form").submit(function () { // important: form selector, not ID
                if (!confirm("Index submit?"))
                    return false;
            });
        });
    </script>
    <div data-role="header">
        <h1>Main Page</h1>
    </div><!-- /header -->

    <div data-role="content">
        <form id="form1" method="post" action="index.html">
            <p>Page content goes here.</p>
            <input type="submit" value="Submit" class="button" />
            <a href="otherpage.html">Other Page</a>
        </form>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

Страница 2: 

<div id="page2" data-role="page">
    <script type="text/javascript">
        $(document).ready(function () {
            $("form").submit(function () { // important: form selector, not ID
                if (!confirm("Other page submit?"))
                    return false;
            });
        });
    </script>
    <div data-role="header">
        <h1>Other Page</h1>
    </div><!-- /header -->

    <div data-role="content"> 
        <form id="form2" method="post" action="otherpage.html">  
            <p>Page content goes here.</p>
            <input type="submit" value="Submit" class="button" />
            <a href="index.html">Home Page</a> 
        </form>   
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

Попробуйте, заменив мой !confirm("Other page submit?") на ваш, если !IsFromValid(), и все будет хорошо!Если это сработает, ты должен мне пинту, приятель =)

0 голосов
/ 21 июня 2011

Я думаю, что я с тобой сейчас.По сути, мне удалось воспроизвести простой вызов jQuery, который работает при начальной загрузке страницы index.html, перестает работать, когда вы уходите и возвращаетесь на эту страницу, URL становится чем-то вроде index.html#index.html.

Это вызвано переходами страниц jQuery mobile AJAXified, которые имеют несколько упомянутых ограничений здесь (в разделе «Известные ограничения»), одним из которых является:

Любые уникальные активыссылки на страницы в jQuery Mobile-сайте должны быть размещены внутри элемента "page" (элемент с атрибутом data-role "page").Например, ссылки на стили и сценарии , относящиеся к конкретной странице, могут быть указаны внутри этого div.

Итак, в основном, вам нужно переместитьВаш JavaScript внутри <div data-role="page"></div>.Это сработало для меня.

...