Почему форма на этой странице работает только один раз? - PullRequest
Новая
       45

Почему форма на этой странице работает только один раз?

2 голосов
/ 27 марта 2012

Вот форма в вопросе

Я новичок в jQuery Mobile, поэтому я подозреваю, что эта проблема связана с запусками JS jQuery Mobile.

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

РЕДАКТИРОВАТЬ: Вы можете ввести «тест» для примера запроса.

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Phone Price Look-up</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
        <style>
            /* App custom styles */
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
        </script>
        <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js">
        </script>
    </head>
    <body>
        <div data-role="page" id="page1">
            <div data-theme="a" data-role="header">
                <h3>
                    Price Finder
                </h3>
            </div>
            <div data-role="content">
                <div id="search-form-container">
                    <form name="search-form">
                        <div data-role="fieldcontain">
                            <fieldset data-role="controlgroup">
                                <label for="search_term">
                                    Enter Model Number:
                                </label>
                                <input id="search_term" placeholder="" value="" type="text" />
                            </fieldset>
                        </div>
                        <input id="search-form-submit" type="submit" data-theme="b" value="Submit" />
                    </form>
                </div>
            </div>
            <div data-theme="a" data-role="footer">
                <h2>
                    www.thephonerecyclers.com
                </h2>
            </div>
        </div>
        <script>
            $(document).ready(function() {
                $.mobile.ajaxLinksEnabled = false; // don't really know what this does.
                $('#search-form-submit').click(function() {
                    var searchTerm = $('#search_term').val();
                    $.ajax({
                        type: 'POST',
                        url: 'ajax/search.php',
                        data: {search_term: searchTerm},
                        success: function(response) {
                            response = JSON.parse(response);
                            if (!response.success) {
                                alert('no phone found');
                            } else {
                                var phoneInfo = JSON.parse(response.response);
                                alert(phoneInfo[0].manufacturer + ' ' + phoneInfo[0].name + ' (' + phoneInfo[0].model_no + ')' + '\n$' + phoneInfo[0].price);
                            }
                        },
                        error: function() {
                            //handle error
                            alert('error doing ajax, mate');
                        }
                    });
                });
            });
        </script>
    </body>
</html>

Ответы [ 3 ]

3 голосов
/ 28 марта 2012

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

Вместо определения обработчика кликов, как вы это сделали: 

$('#search-form-submit').click(function() {

Вы должны использовать функцию jQuery "on". Поскольку вы включаете более старую версию JQuery, используйте «живую» функцию, которая выполняет аналогичную цель: 

 $('#search-form-submit').live("click", function(){

При таком связывании события любой динамически создаваемый контент также должен быть включен обработчиком.

0 голосов
/ 27 марта 2012

Исправьте синтаксические ошибки в этой строке: 

alert(phoneInfo[0].manufacturer +' '+ phoneInfo[0].name +(+ +phoneInfo[0].model_no+ +)+ +'\n$'+ phoneInfo[0].price);

например: 

alert(phoneInfo[0].manufacturer+' '+phoneInfo[0].name+'('+phoneInfo[0].model_no+')'+'\n$'+phoneInfo[0].price);
0 голосов
/ 27 марта 2012

Ваше предупреждение в вашей функции успеха ajax содержит синтаксические ошибки, я думаю, это то, что мешает ему работать:

у вас есть: 

 alert(phoneInfo[0].manufacturer +' '+ phoneInfo[0].name +(+ +phoneInfo[0].model_no+ +)+ +'\n$'+ phoneInfo[0].price);

должно быть: 

 alert(phoneInfo[0].manufacturer +' '+ phoneInfo[0].name +'('+phoneInfo[0].model_no+')\n$'+ phoneInfo[0].price);
...