CODEWITHSUNDEEP
jqueryjquery-mobilecordovajquery-mobile-button
Jacek Kwiecień
Jacek Kwiecień

Reputation: 12659

Phonegap ( + jquery mobile) app works fine on browser but not on device

I have a very simple test phonegap + jquery mobile app. It's simple form. Code below:

    <!-- Styles -->
    <link type="text/css" rel="stylesheet" href="jquery-ui-mobile/jquery.mobile-1.3.1.min.css">

    <!-- jQuery and jQuery Mobile -->
    <script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
    <script src="jquery-ui-mobile/jquery.mobile-1.3.1.min.js"></script>

    <!-- Extra Codiqa features -->
    <script src="https://d10ajoocuyu32n.cloudfront.net/codiqa.ext.js"></script>

    <!-- Socket.IO -->
    <script src="socket.io/socket.io.js"></script>

</head>
<body>

    <div data-role="page" id="page1">
            <div id="register_button" data-role="button" data-transition="slide">
                Register
            </div>
    </div>
</body>

<script>
    $(document).on('pageinit','[data-role=page]',function(){
        $('#register_button').click(function(){
            $('#error_message_label').text('E-mail not set.');
            $('#error_message').show();
        });
    });
</script>

<!--<script src="js/user/register.js"></script>-->

The script seems not to be working on the device. Nothing happens when I click the button.

Upvotes: 1

Views: 2258

Answers (2)

Gajotres
Gajotres

Reputation: 57309

This should work:

  1. Move your script block inside a page div, like this:

    <div data-role="page" id="page1">
    <div id="register_button" data-role="button" data-transition="slide">
        Register
    </div>
    <script>
        $(document).on('pageinit','[data-role="page"]',function(){
            $('#register_button').click(function(){
                $('#error_message_label').text('E-mail not set.');
                $('#error_message').show();
            });
        });
    </script>            
</div>

  2. Also change your click handling so you final code will look like this:

    <div data-role="page" id="page1">
    <div id="register_button" data-role="button" data-transition="slide">
        Register
    </div>
    <script>
        $(document).on('pageinit','[data-role="page"]',function(){
            $(document).on('click','#register_button', function(){
                $('#error_message_label').text('E-mail not set.');
                $('#error_message').show();
            });
        });
    </script>            
</div>

EDIT :

Why should it be inside a page div was just a hunch. You didn't explain how you app works so it make me think. jQuery Mobile has one common problem that people usually don't know about, it simply is not described in official documentation. If you use several HTML files, only first HTML file will be fully loaded into the DOM, every other page will load only page div and jQuery Mobile will discard everything else. Read more about it here.

Other possibility was a problem with a click event. Problem is that click event sometimes if platform is slow will not be bound to the correct object. That's why I have used a delegated click binding. It will bind a click event to a document and later it will propagate it to correct element. Basically it doesn't matter if element exist in DOM or not, cause this kind of binding cares only about document object.

Upvotes: 4

theowi
theowi

Reputation: 820

Try the following code:

$(document).ready(function(){
    $('#register_button').on.('click',function(){
            $('#error_message_label').text('E-mail not set.');
            $('#error_message').show();
    });
}

Upvotes: 0

Related Questions