Вопросы Теги

Мобильное приложение jQuery не работает на Android-приложении, созданном с помощью PhoneGap [duplicate]

Следующее описание взято из этой страницы :

Метод getElementsByClassName () возвращает коллекцию всех элементов в документе с указанным именем класса, так как объект NodeList.

Объект NodeList представляет собой набор узлов. К узлам можно обращаться по номерам индексов. Индекс начинается с 0.

Совет. Вы можете использовать свойство length объекта NodeList для определения количества элементов с указанным именем класса, затем вы можете прокручивать все элементы и извлекать нужную информацию .

blockquote>

Итак, поскольку параметр getElementsByClassName принимает имя класса.

Если это ваше тело HTML:

то var menuItems = document.getElementsByClassName('menuItem') вернет коллекцию (а не массив) из трех верхних

s, поскольку они соответствуют заданному имени класса.

Затем вы можете перебирать эти узлы (

s в этот случай) с помощью: 

for (var menuItemIndex = 0 ; menuItems.length ; menuItemIndex ++) {
   var currentMenuItem = menuItems[menuItemIndex];
   // do stuff with currentMenuItem as a node.
}

Подробнее о различиях между элементами и узлами см. в этой записи .

103
задан Coder_sLaY 8 June 2012 в 16:05
поделиться

9 ответов

Вы можете использовать отложенную функцию JQuery. 

var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();

document.addEventListener("deviceReady", deviceReady, false);

function deviceReady() {
  deviceReadyDeferred.resolve();
}

$(document).one("mobileinit", function () {
  jqmReadyDeferred.resolve();
});

$.when(deviceReadyDeferred, jqmReadyDeferred).then(doWhenBothFrameworksLoaded);

function doWhenBothFrameworksLoaded() {
  // TBD
}
172
ответ дан D_N 23 August 2018 в 00:05
поделиться
  • 1
    этот ответ должен получить больше голосов и быть отмечен как правильный. – memical 15 October 2012 в 18:06
  • 2
    Не могли бы вы подробнее рассказать? Как выглядит иерархия ссылок на файлы? благодаря – farjam 26 November 2012 в 23:55
  • 3
    Я не мог заставить это работать с jQM 1.3 и amp; PG 2.5 – fusion27 13 March 2013 в 15:38
  • 4
    Не могли бы вы добавить порядок загрузки скрипта, используя последнюю версию? – realtebo 20 March 2013 в 20:11
  • 5
    Для всех тех, кто говорит, что это не сработает - порядок объявления скрипта имеет значение. Сначала включите jquery, THEN THOD CODE внутри элемента скрипта, затем jquery mobile js. – Manish 18 May 2013 в 21:00

Я считаю, что нет необходимости использовать отложенную функцию. (Может быть, это не обязательно с новыми версиями телефонных разговоров?) У меня это есть в голове моего файла index.html, и все работает нормально. Я действительно думаю, что порядок включения jquery, phonegap и jquery mobile важен. 

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

    <!-- Adding jQuery -->
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

    <!-- Add Phonegap scripts -->
    <script type="text/javascript" src="phonegap.js"></script>

    <!-- Add jQuery mobile -->
    <link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" />
    <script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"></script>

    <title>MY TITLE</title>
</head>
2
ответ дан Allie Hoch Janoch 23 August 2018 в 00:05
поделиться

Чтобы использовать phonegap вместе с jQuery mobile, вам нужно использовать его так 

<head>
<title>Index Page</title>

<!-- Adding viewport -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no">

<!-- Adding jQuery scripts -->
<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>

<!-- Since jQuery Mobile relies on jQuery core's $.ajax() functionality,
 $.support.cors & $.mobile.allowCrossDomainPages must be set to true to tell
 $.ajax to load cross-domain pages. -->
<script type="text/javascript">
    $(document).bind("mobileinit", function() {
        $.support.cors = true;
        $.mobile.allowCrossDomainPages = true;
    });
</script>

<!-- Adding Phonegap scripts -->
<script type="text/javascript" charset="utf-8"
    src="cordova/cordova-1.8.0.js"></script>

<!-- Adding jQuery mobile scripts & CSS -->
<link rel="stylesheet" href="jquerymobile/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript"
    src="jquerymobile/jquery.mobile-1.1.0.min.js"></script>

</head>
<script type="text/javascript">
    // Listener that will invoke the onDeviceReady() function as soon as phonegap has loaded properly
    document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
        navigator.splashscreen.hide();

        document.addEventListener("backbutton", onBackClickEvent, false); // Adding the back button listener    

    }
    </script>
<body>
<div data-role="page" id="something" data-ajax="false">
        <script type="text/javascript">
            $("#something").on("pageinit", function(e) {

            });

            $("#something").on("pageshow", function(e) {

            });

            $("#something").on("pagebeforeshow", function(e) {

            });
        </script>

        <div data-role="header">            
        </div>

        <div data-role="content">           
        </div>      
    </div>
</body>
7
ответ дан Coder_sLaY 23 August 2018 в 00:05
поделиться

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

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
        <title>InforMEA</title>
    </head>
    <body>
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            var dd = $.Deferred();
            var jqd = $.Deferred();
            $.when(dd, jqd).done(doInit);

            $(document).bind('mobileinit', function () {
                jqd.resolve();
            });
        </script>
        <script type="text/javascript" src="js/jquery.mobile-1.2.0.js"></script>
        <script type="text/javascript" src="cordova-2.2.0.js"></script>
        <script type="text/javascript">
            document.addEventListener('deviceready', deviceReady, false);
            function deviceReady() {
                dd.resolve();
            }

            function doInit() {
                alert('Ready');
            }
        </script>
    </body>
</html>
17
ответ дан Cristian Romanescu 23 August 2018 в 00:05
поделиться
  • 1
    Это сработало и для меня, но если я добавлю & lt; div id = & quot; test-index-page & quot; данная роль = & Quot; страница & Quot; & GT; & Lt; / дел & GT; на ту же страницу, когда тег html закрывается, страница не загружается, и я получаю ошибки. Я хочу начать использовать оба фреймворка, используя третий js-файл с точки, в которую загружены. Как мне это сделать? – Mustafa 16 August 2013 в 02:22
  • 2
    Конечно, я попробовал загрузить третий файл js с бизнес-логикой для моего приложения в doInit (), но это не сработало. Этот файл имеет логику привязки событий и объявления функций, например. $ (document) .delegate ('# fakhera-index-page', 'pageinit', function (event) {...}. Как я могу это сделать? – Mustafa 16 August 2013 в 02:24

Загрузка PhoneGap немного отличается от загрузки jQuery. jQuery больше работает как библиотека утилиты, поэтому вы включаете это, и он доступен для использования немедленно. С другой стороны, PhoneGap требует поддержки собственного кода для правильной инициализации, поэтому он не готов к использованию вскоре после включения в страницу.

Phonegap предлагает зарегистрировать и ждать события deviceready, выполняющего какой-либо собственный конкретный код . 

<!DOCTYPE html>
<html>
  <head>
    <title>PhoneGap Example</title>

    <script type="text/javascript" charset="utf-8" src="lib/jquery.min.js"></script>
    <script type="text/javascript">
        // jquery code here
    </script>
    <script type="text/javascript" charset="utf-8" src="lib/android/cordova-1.7.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    function onLoad(){
        document.addEventListener("deviceready", onDeviceReady, false);
    }

    // Cordova is ready
    function onDeviceReady() {
        // write code related to phonegap here
    }
    </script>
  </head>
  <body onload="onLoad()">
    <h1>Phonegap Example</h1>
  </body>
</html>

Для получения дополнительной информации проверьте doc

-1
ответ дан dhaval 23 August 2018 в 00:05
поделиться
  • 1
    Но проблема в том, что я хочу использовать материал phonegap в своем jquery-коде. В вашем примере весь код jquery будет запущен до того, как телефонная заправка будет даже загружена. Может быть, если я поместил весь код внутри функции onDeviceReady ()? Например: $ («форма»). Live («pageinit», function (event) {// здесь используется функция phonegapp}); – Juw 8 June 2012 в 10:31
  • 2
    если ваш #form является первой страницей, тогда вы не получите обратный вызов pageinit, поскольку слишком поздно – dhaval 8 June 2012 в 10:48

Чтобы ответить на ответ @ Jeffrey, я нашел гораздо более чистый способ, который скрывает разметку HTML до тех пор, пока JQM не закончит обработку страницы и не отобразит первый элемент страницы, так как я заметил, что 1/2 секундное мерцание без разметки перед JQM делает.

Вам нужно только скрыть всю разметку с помощью css ... PageShow () от JQM переключит видимость для вас. 




//snip
<style type="text/css">
.hide {
  display:none;
}
</style>

//snip - now the markup notice the hide class
<div id="page1" data-role="page" class="hide">
     //all your regular JQM / html form markup
</div>

//snip -- down to the end of /body
<script src="cordova-2.2.0.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script>
   document.addEventListener(
     'deviceready',
      function () {
         $(document).one("mobileinit", function () {
         //any JQM init methods

       });
      $.getScript('js/jquery.mobile-1.2.0.min.js');
   },
   false);
</script>

0
ответ дан Erik 23 August 2018 в 00:05
поделиться
  • 1
    попробовал ваше предложение, и это не сработало для меня. На странице JQM не отображается скрытая первая страница. Более того, стандартный html все еще отображается, прежде чем скрываться. В конечном итоге я сделал работу на основе решения Джеффри с небольшим изменением времени. см. мой комментарий ниже его ответа. – GeorgeW 23 February 2013 в 00:50

Как многие люди предлагали использовать отложенный вариант, это хороший вариант, если вам неважно, в каком порядке deviceready и mobileinit happe. Но в моем случае мне понадобилось несколько pageshow событий, когда приложение сначала загружены и mobileinit, и по расширению все события pageshow / pagebeforeshow / etc были полностью запущены до завершения deviceready, поэтому я не мог привязываться к ним правильно, используя отложенные на них. Это состояние гонки было не очень хорошим.

Что мне нужно было сделать, так это убедиться, что «mobileinit» не состоялся до тех пор, пока «deviceready» уже не был запущен. Поскольку mobileinit срабатывает сразу же при загрузке JQM, я решил использовать jQuery.getScript для его загрузки ПОСЛЕ deviceready. 

<script src="cordova-2.2.0.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/async.min.js"></script>
<script src="js/app.js"></script>
<script>
  document.addEventListener(
    'deviceready',
    function () {
      $('body').css('visibility', 'hidden');
      $(document).one("mobileinit", function () {
        app.init();
        $('body').css('visibility', '');
      });
      $.getScript('js/jquery.mobile-1.2.0.min.js');
    },
    false
  );
</script>

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

6
ответ дан Jeffrey Van Alstine 23 August 2018 в 00:05
поделиться
  • 1
    +1 на ваш ответ за это вдохновило меня решить мою проблему с некоторыми небольшими изменениями. Сначала переместите код body.hide () в первую строку onBodyLoad (); Во-вторых, переместите body.show () код после getScript (jQM_PATH); Потому что mobileInit () вызывается на каждом переходе страницы JQM. Не идеально. Надеюсь, это поможет другим. – GeorgeW 23 February 2013 в 00:54
  • 2
    Можете ли вы просто включить остальные ваши index.html – JGallardo 2 November 2013 в 23:52
  • 3
    Это не сработало для меня, потому что cordova удалял все файлы, которые не были включены с помощью тега <script>. – Chris Snow 21 February 2015 в 12:05

Следующие работали для меня на PG 2.3 и JQM 1.2, вкл. Плагин Facebook Connect: 

<head>
<script src="./js/jquery-1.8.2.min.js"></script>
<script>
    $.ajaxSetup({
        dataType : 'html'
    });

    var dd = $.Deferred();
    var jqd = $.Deferred();
    $.when(dd, jqd).done(function() {                

        FB.init({ appId: auth.fbId, nativeInterface: CDV.FB, useCachedDialogs: false });
    });

    $(document).bind('mobileinit', function () {
        jqd.resolve();
    });                        
</script>
<script src="./js/jquery.mobile-1.2.0.min.js"></script>
<script>
    $.mobile.loader.prototype.options.text = "loading";
    $.mobile.loader.prototype.options.textVisible = true;
    $.mobile.loader.prototype.options.theme = "a";
    $.mobile.loader.prototype.options.html = "";

    $.mobile.ajaxEnabled = false;
    $.mobile.allowCrossDomainPages = true;
    $.support.cors = true;       

    $('[data-role=page]').live('pagecreate', function(event) {                      
        tpl.renderReplace('login', {}, '#content-inner', function() {                   
            auth.init();
        });
    });
</script>
<script src="./js/cordova-2.3.0.js"></script>
<script src="./js/cdv-plugin-fb-connect.js"></script>
<script src="./js/facebook_js_sdk.js"></script>                     
<!--some more scripts -->
<script>        
    document.addEventListener('deviceready', function() {
        dd.resolve();
    }, false);                        
</script>  
<head>
0
ответ дан Jens Peters 23 August 2018 в 00:05
поделиться

Это работа для меня. база на дхавале, этот образец, когда я узнаю, используя sqlite 

<!DOCTYPE html>
<html>
 <head>
<title>Cordova Sqlite+Jquery</title>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.8.3.min.js"></script>   
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" charset="utf-8">`

// Call onDeviceReady when Cordova is loaded.
//
// At this point, the document has loaded but cordova-1.8.0.js has not.
// When Cordova is loaded and talking with the native device,
// it will call the event `deviceready`.
//
function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
}

// Populate the database 
//
function populateDB(tx) {
    tx.executeSql('DROP TABLE IF EXISTS DEMO');
    tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)');
    tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")');
    tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")');
}

// Query the database
//
function queryDB(tx) {
    tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB);
}

// Query the success callback
//
function querySuccess(tx, results) {
    var len = results.rows.length;
    //console.log("DEMO table: " + len + " rows found.");
    $('#result').html("DEMO table: " + len + " rows found.");
    var listval = '';
    for (var i=0; i<len; i++){
        //console.log("Row = " + i + " ID = " + results.rows.item(i).id + " Data =  " + results.rows.item(i).data);
         listval += '<li>'+ results.rows.item(i).data + '[' + results.rows.item(i).id + '] </li>';
    }

    $('#listItem').html(listval);

}

// Transaction error callback
//
function errorCB(err) {
    console.log("Error processing SQL: "+err.code);
}

// Transaction success callback
//
function successCB() {
    var db = window.openDatabase("Database", "1.0", "PhoneGap Demo", 200000);
    db.transaction(queryDB, errorCB);
}

// Cordova is loaded and it is now safe to make calls Cordova methods
//
function onDeviceReady() {
    // Now safe to use the Cordova API
    //alert('ready');
    var db = window.openDatabase("Database", "1.0", "PhoneGap Demo", 200000);
    db.transaction(populateDB, errorCB, successCB);
    //$('#result').html('hello');
}

</script>
  </head>
 <body onload="onLoad()">
  <div>result:</div><div id="result"></div>
  <ul id="listItem">
  </ul>
 </body>
 </html>
1
ответ дан Ztuons Ch 23 August 2018 в 00:05
поделиться
Другие вопросы по тегам:

Похожие вопросы: