Почему моя страница PhoneGap требует перезагрузки, чтобы активировать метод ajax?

Я опытный программист, но новичок в программировании приложений для мобильных телефонов и только что изучил PhoneGap. У меня есть довольно простая страница, которую я собрал с помощью JQuery Mobile, PhoneGap и Jquery, но столкнулся с проблемой. Когда я нажимаю на ссылку href, чтобы загрузить страницу «новости», метод .ajax(), похоже, не выполняется. У меня есть это в традиционной готовой оболочке документа, и удаление, похоже, не помогает решить проблему, как я думал. Так что, может быть, я все облажался, но я не могу понять, почему он не срабатывает, ЕСЛИ вы не обновите страницу, тогда он работает нормально. Может быть вопрос новичка, но я чувствую, что я программист первого года.

Обновление: чтобы прояснить, в чем моя проблема, я тестирую в Firefox, и у меня есть настольное приложение PhoneGap, обслуживающее код. Когда я нажимаю кнопку «Новости», страница загружается, но элементы, добавленные Ajax, не отображаются. Если я нажму «Обновить» в браузере, страница перезагрузится и появятся элементы. Они никогда не отображаются на мобильном телефоне, если я не внесу изменения в код, который заставляет настольное приложение phonegap вызывать перезагрузку страницы на телефоне. Так что это всегда перезагрузка, которая вызывает это.

Вот мой код:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline' http://code.jquery.com; media-src *; img-src * data:"" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
    app.initialize();
</script>
<title>Hello World</title>
</head>

<body>
<div id="home" data-role="page">
    <div data-role="header" data-position="fixed">
        <h1>My App</h1>
    </div>
    <div role="main" class="ui-content">
        <a href="news.html" class="ui-btn ui-corner-all ui-shadow">News</a>
        <a href="#" class="ui-btn ui-corner-all ui-shadow">Gigs</a>
    </div>
    <div data-role="footer" data-position="fixed"> 
        <h4>Footer content</h4> 
    </div>
</div>


</body>

</html>

Вот новости.html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline' http://code.jquery.com; media-src *; img-src * data:" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

        var output = $('#news');

        $.ajax({
            url: 'http://xxxxxx.com/api/news/getnews',
            dataType: 'jsonp',
            cache : false,
            jsonp: 'jsoncallback',
            timeout: 5000,
            success: function(data, status){
                $.each(data, function(i,item){
                    var story = '<div data-role="collapsible"><h1>'+item.title+'</h1>'
                    + '<p>'+item.body+'<br><small>'
                    + item.date+'</small></p></div>';

                    output.append(story).enhanceWithin();
                });
            },
            error: function(){
                output.text('There was an error loading the data.');
            }
        });

    });    
</script>
<title>News</title>
</head>

<body>
<div id="home" data-role="page">
    <div data-role="header" data-position="fixed">
        <h1>News</h1>
    </div>
    <div role="main" class="ui-content" id="news">
        <div data-role="collapsible">
            <h1>Hi</h1>
            <p>Am I collapsible?</p>
        </div>
    </div>
    <div data-role="footer" data-position="fixed"> 
        <h4>Footer content</h4> 
    </div>
</div>
</body>

</html>

Может ли кто-нибудь сказать мне, почему ajax не будет выполняться, если я сначала не обновлю страницу? Заранее спасибо.


android cordova phonegap jquery-mobile
person pogeybait    schedule 09.05.2017    source источник
comment
При использовании кордовы или телефонной связи используйте «deviceready» вместо события jquery ready, оба они разные. document.addEventListener('deviceready', this.onDeviceReady, false); или $(document).on(deviceready)   -  person Chandra Sekhar Walajapet    schedule 09.05.2017
comment
Страница новостей по-прежнему требует обновления, чтобы ajax начал работать. Таким образом, устройство не помогло решить мою проблему.   -  person pogeybait    schedule 09.05.2017
comment
стоит попробовать: поместите вызов ajax в событие JQM pagecreate или, если вам нужно обновляться при каждом посещении страницы, внутри pageshow: События страницы jQuery Mobile — что, почему, где, когда и как?   -  person deblocker    schedule 09.05.2017
comment
@deblocker, нет, это тоже не помогло.   -  person pogeybait    schedule 09.05.2017
comment
Рекомендуется загружать все JS внутри head всех страниц и контролировать их с помощью событий pagecontainer, как упоминал @deblocker. Если вы все еще не хотите этого делать, поместите свой JS внутри страницы div.   -  person Omar    schedule 09.05.2017

Ответы (1)


arrow_upward
-1
arrow_downward

Я наконец-то понял. На странице news.html не должно было быть тегов html, заголовка или тела... просто содержимое тела. После избавления от этого jQuery mobile загрузил новую страницу в «шаблон», который уже был там.

Я пошел дальше и заменил событие jquery document onready на:

document.addEventListener("deviceready", function(){

так что теперь моя новая страница news.html выглядит так:

<div id="home" data-role="page">
    <script type="text/javascript">
        document.addEventListener("deviceready", function(){

            var output = $('#news');

            $.ajax({
                url: 'http://xxxxxx.com/api/news/getnews',
                dataType: 'jsonp',
                cache : false,
                jsonp: 'jsoncallback',
                timeout: 5000,
                success: function(data, status){
                    $.each(data, function(i,item){
                        var story = '<div data-role="collapsible"><h1>'+item.title+'</h1>'
                        + '<p>'+item.body+'<br><small>'
                        + item.date+'</small></p></div>';

                        output.append(story).enhanceWithin();
                    });
                },
                error: function(){
                    output.text('There was an error loading the data.');
                }
            });

        });    
    </script>
    <div data-role="header" data-position="fixed">
        <h1>News</h1>
    </div>
    <div role="main" class="ui-content" id="news">
        <div data-role="collapsible">
            <h1>Hi</h1>
            <p>Am I collapsible?</p>
        </div>
    </div>
    <div data-role="footer" data-position="fixed"> 
        <h4>Footer content</h4> 
    </div>
</div>

Это содержимое всей страницы. Я скажу, что после того, как я это исправил, я начал получать ошибки с моей Content-Security-Policy, и это совсем другой вопрос, но, похоже, теперь он работает и загружает ajax, как и предполагалось.

person pogeybait    schedule 09.05.2017
comment
небольшая подсказка: JQM управляет divвидимостью, просматривая data-role="page". Так что - может быть - у вас будут проблемы с двойным id="home". Или посмотрите документы для data-rel external- Проверьте это. - person deblocker; 09.05.2017