Событие нажатия кнопки с использованием jQuery/JavaScript в PhoneGap 2.9 ничего не делает

Я разрабатываю мобильное приложение для Android, используя Phonegap 2.9 и Eclipse Juno. Я видел много сообщений, связанных с событиями нажатия кнопок с использованием Javascript и JQuery, и, похоже, ничего не работает. Я имею в виду, что когда я нажимаю кнопку, оповещение не появляется! Я также пробовал и <a href=..., и <input ..., и <button type="submit" ..., и ни один из них не работает для одного и того же .js.


Моя головная часть в файле .html такова:

 <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

    <title>Sign-Up</title>

    <link href='http://fonts.googleapis.com/css?family=Patrick+Hand|Permanent+Marker|Exo|Nunito|Limelight|Ubuntu|Montserrat|Audiowide|Architects+Daughter' rel='stylesheet' type='text/css'>

    <!-- import stylesheets -->
    <link rel="stylesheet" type="text/css" href="../css/sign-up.css">
    <link rel="stylesheet" type="text/css" href="../css/sign-up-eng-fonts.css">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
    <link rel="stylesheet" href="../jQuery-Mobile-Bootstrap-Theme-master/themes/Bootstrap.css">

    <!-- import js --> 
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>

    <script type="text/javascript" charset="utf-8" src="../jss/connect.js"></script>

    <script type="text/javascript" charset="utf-8" src="../jss/sign-up.js"></script>

 </head>

Моя текущая часть кода в файле .html, которая создает кнопку, такова:

                <div class="ui-body ui-body-b">
                    <fieldset class="ui-grid-a">
                        <div class="ui-block-a"><button type="submit" id="cancel" data-theme="d">Cancel</button></div>
                        <div class="ui-block-b">
                            <input type="button" value="Register" id="submitt" data-theme="a" /></div>
                            <!--<a href="#" data-inline="button" data-role="button" data-theme="a">Register</a>-->
                    </fieldset>
                </div>

connect.js содержит этот код:

document.addEventListener("deviceready", onDeviceReady, false);

    // PhoneGap is loaded and it is now safe to make calls PhoneGap methods
    //
    function onDeviceReady() {
        // checkConnection();

        document.addEventListener("offline", onOffline, false);
        document.addEventListener("online", onOnline, false);
    }

function onOffline() {
    navigator.notification.alert('Please enable your Wi-fi and re-open the application!', close_app, 'Wi-fi', 'Okay');
}

function close_app() {
    navigator.app.exitApp();
}

function onOnline() {
    }

и мой sign-up.js содержит это:

document.addEventListener("deviceready", onDeviceReady, false);

 function onDeviceReady() {

        document.getElementById('submitt').addEventListener('click', checkk, false);

            function checkk(){
                 navigator.notification.alert("I am here.", null, 'Here', 'Okay');
            }

    }

ПРОБЛЕМА: Когда я запускаю приложение и нажимаю кнопку, страница остается такой, какая она есть. Он даже не обновляет и не отображает предупреждение, которое я написал.


Когда я пробую другое решение с onclick="register() в файле sign-up.html и имею функцию register() в моем файле sign-up.js, LogCat Eclipse говорит: file:///android_asset/www/htmls/home.html: Line 1 : Uncaught ReferenceError: register is not defined. home.html — это первая страница приложения. Но кнопка регистрации находится в sign-up.html - только здесь я называю в заголовке sign-up.js (содержит register().)-


person Community    schedule 17.09.2014    source источник
comment
Я думал, что умру во время редактирования вашего кода... О вопросе: взгляните на это вопрос.   -  person Regent    schedule 17.09.2014
comment
Прошу прощения за редактирование. Просто у меня не было времени починить это самостоятельно, а интернет-соединение было ужасным. Сейчас проверю, хотя как я понял дело не в click event на кнопке. Я увижу логику в JavaScript. благодарю вас   -  person    schedule 17.09.2014
comment
К сожалению, я тоже отредактировал ваш код для форматирования. Это была боль :(. Пожалуйста, проверьте, правильно ли отформатирован код. Вам нужно использовать хороший РЕДАКТОР. WebStorm, возвышенный текст, Notepad++ и т. д. - хорошие редакторы для HTML и JS.   -  person frank    schedule 17.09.2014
comment
Я использую Sublime Text. Я никогда не буду публиковать что-то, пока полностью не отредактирую формат. спасибо и извините.   -  person    schedule 17.09.2014
comment
@marialena, а как насчет вопроса - помогает ли упомянутая ссылка?   -  person Regent    schedule 17.09.2014
comment
Я добавил несколько недостающих строк в свой файл config.xml, и теперь я вижу index.js, чтобы понять, как именно это работает.   -  person    schedule 17.09.2014
comment
@Regent ссылка в пользователе не работает, поэтому я обнаружил это . Это было очень полезно с различными типами уведомлений. Теперь я должен понять файл Javascript, написанный в вопросе, и то, как вы называете его в html, и попробуйте.   -  person    schedule 17.09.2014
comment
Что ж, да, документы — это то место, куда стоит заглянуть. Все, что я хотел сказать, это то, что вы, вероятно, не включили плагин уведомлений.   -  person Regent    schedule 17.09.2014
comment
Да, я добавил плагин, но я очень запутался с тем, какой код писать в Javascript file и в Html file. Я имею в виду, как вызвать, что кнопка была нажата? Я попробовал файл javascript по ссылке, которую вы мне прислали, но на моем экране не появляется сообщение. Я попробовал событие onclick(), и снова ничего не появилось.   -  person    schedule 17.09.2014


Ответы (1)


Мне наконец-то удалось решить мою проблему.
Это не имеет ничего общего с кнопкой. Проблема была в JavaScript.


  • Прежде всего, я изменил порядок вызовов JavaScript в home.html и sign-up.html.
    (1. JQuery из Интернета, 2. cordova.js, 3. connect.js, 4. все остальные JavaScript)
    home.html:

    <title>Guide-Me For-All</title>
    
    <link href='http://fonts.googleapis.com/css?family=Patrick+Hand|Permanent+Marker|Exo|Nunito|Limelight|Ubuntu|Montserrat|Audiowide|Architects+Daughter' rel='stylesheet' type='text/css'>
    
    <!-- import stylesheets -->
    <link rel="stylesheet" type="text/css" href="../css/home.css">
    <link rel="stylesheet" type="text/css" href="../css/home-eng-fonts.css">
    
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
    <link rel="stylesheet" href="../jQuery-Mobile-Bootstrap-Theme-master/themes/Bootstrap.css">
    
    <!-- import js --> 
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
    
    <script type="text/javascript" charset="utf-8" src="../cordova.js"></script>
    
    <script type="text/javascript" charset="utf-8" src="../jss/connect.js"></script>
    
    <script type="text/javascript" charset="utf-8" src="../jss/change_page.js"></script>
    
    <script src="../plugins/page-swipe-iscroll/iscroll.js"></script>
    <script src="../plugins/page-swipe-iscroll/scroll.js"></script>
    



  • In the home.html I changed the way I was navigating to another page to this:

                            <a href="#" data-role="button" data-theme="f" data-icon="heart" onclick="change_page();">Sign-Up Now!</a>
    

Это необходимо, потому что, как я читал в Google, лучше изменить страницу из JavaScript вместо <a href=".....".


  • Итак, я создал файл change_page.js. Его содержание указано выше:

document.addEventListener("deviceready", onDeviceReady, false);

// PhoneGap is ready
//
function onDeviceReady() {
    // Empty
}

// alert dialog dismissed
function alertDismissed() {
    // do something
}

// Show a custom alert
//
function change_page() {
    document.location.href = '../htmls/sign-up.html';
}

  • На моей странице sign-up я изменил кнопку на это:

                                <a href="#" onclick="register();" data-role="button" data-theme="a">Register</a>
    

  • В моем файле sign-up.js я написал этот код:

    document.addEventListener("deviceready", onDeviceReady, false);

    // PhoneGap is ready
    //
    function onDeviceReady() {
        // Empty
    }
    
    // alert dialog dismissed
    function alertDismissed() {
        // do something
    }
    
    // Show a custom alert
    //
    function register() {
        navigator.notification.alert(
            'hello!',  // message
            alertDismissed,         // callback
            'Game Over',            // title
            'Done'                  // buttonName
        );
    }
    

Итак, основной проблемой был способ перехода на следующую страницу, потому что JavaScript работал только на первой .html странице. Надеюсь, это поможет любому, у кого есть такая же проблема!

person Community    schedule 24.09.2014