jquery mobile changePage в форме отправки не работает должным образом - PullRequest
Новая
       3

jquery mobile changePage в форме отправки не работает должным образом

1 голос
/ 25 января 2012

Я пытаюсь изменить страницу формы, отправленной в Jquery, однако она не работает.Он скользит, чтобы показать ту же страницу, а не перейти к целевой странице.Ниже приведен код.Любые идеи, пожалуйста?Я попытался использовать "#mainpage", "index.html#mainpage", но результат все тот же.Ссылка: jsfiddle.net / 7yRph / 1 

<!DOCTYPE html> 
<html> 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Multi-page template</title> 
    <link rel="stylesheet" href="jquery.mobile-1.0.min.css" />
    <script src="jquery-1.6.4.min.js"></script>
    <script src="jquery.mobile-1.0.min.js"></script>
    <script type="text/javascript">
    $('#launchpage').live('pagecreate',function(event) { 
        $('#fhome').submit( function () {
            $.mobile.changePage("mainpage");
        });
    });
    </script>
</head> 
<body> 

<!-- PAGE: launchpage -->
<div data-role="page" id="launchpage">
    <div data-role="header">
        <h1 data-theme="g" >Personal Details</h1>
    </div><!-- /header -->

    <div data-role="content" >  
        <div class="content-primary">
        <form id="fhome" method="POST" >
            <div data-role="none">
                <p> Lets begin: </p>
            </div>
            <br/>           
            <div data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal" >
                    <legend>Are you providing information about yourself?</legend>
                        <label for="launchradioyes">Yes</label>
                        <input type="radio" name="radio-choice" id="launchradioyes" value="yes" />
                        <label for="launchradiono">No</label>
                        <input type="radio" name="radio-choice" id="launchradiono" value="no" />
                </fieldset>
            </div>
            <input type="submit" value="Next" data-theme="a" />
            <br/>
         </form>
    </div><!-- /content -->

    <div data-role="footer" data-theme="d">

    </div><!-- /footer -->
</div><!-- /launch page -->

<!-- PAGE: mainpage -->
<div data-role="page" id="mainpage">
    <div data-role="header">
        <h1>Testing page navigation II</h1>
    </div><!-- /header -->

    <div data-role="content" >  
        <div class="content-primary">
            <div data-role="none">
             <label for="idprimary">ID:</label>
             <input type="tel" name="idprimary" id="idprimary" value="" />
            </div>
            <br/>           
    </div><!-- /content -->

    <div data-role="footer" data-theme="d">
    </div><!-- /footer -->
</div><!-- /page one -->

</body>
</html>

Ответы [ 2 ]

6 голосов
/ 25 января 2012

Вам не хватает атрибута действия в теге формы. Это часто нарушает функциональность форм в браузерах. Попробуйте это: 

<form id="fhome" method="POST" action="mainpage">

Это не должно негативно повлиять на ваш код, так как вы все равно захватите действие отправки.

UPDATE

Кроме того, вам не хватает закрывающего тега </form> и еще одного закрывающего тега </div> после этого.

Вам нужно использовать кнопку отправки? Будет ли работать кнопка и соответствующее ей событие нажатия?

http://jsfiddle.net/shanabus/7yRph/3/

ОБНОВЛЕНИЕ 2 , работа с формой отправки

После разрешения закрывающих тегов добавьте вызов метода preventDefault и атрибут data-ajax="false", как указано здесь, в документе .

пример: http://jsfiddle.net/shanabus/7yRph/9/

2 голосов
/ 26 января 2012

Когда вы перехватываете submit, вы должны убедиться, что обработчик возвращает false (или вызывает preventDefault для объекта события), чтобы предотвратить поведение отправки по умолчанию.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...