Search code examples
jqueryjquery-mobilecordovajquery-mobile-button

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.

Solution

  • 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.