Search code examples
jqueryhybrid-mobile-appphonegaponsen-ui2

jquery click/touch events does not work on hybrid app bundled via phonegap

I have developed html + onsenui + jQuery app which is designated to be a hybrid android app (phonegap) but I am facing issues that the layout and click/touch events does not working.

Here is the code:

    <!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
  <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
  <script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>

  <script>
  function showModal() {
  var modal = document.querySelector('ons-modal');
  modal.show();
  var i = 1
  var myTimer = setInterval(function(){
        $("#message").html(i);
        if (i <= 30){
         i += 1;
        } 
    }, 1000);


  setTimeout(function() {
    modal.hide();
    clearInterval(myTimer);
    $("#message").html("");
    ons.notification.toast({message: "Now you are free to open/close again.", timeout: 2000});
  }, 30000);
}


$(function(){
$('#btn-outdoor-open').on("click touchend", function() { 

        $.ajax({
            url: 'http://localhost:5000/outer_door/2JkHmmbv4gA6mXLF',
            type: 'POST',
            success: function (result) {
                if (result["response"] == "Not Authorized"){
                    ons.notification.toast({message: result["response"], timeout: 1000});
                }
                else{
                    ons.notification.toast({message: result["response"], timeout: 1000});
                    ons.notification.toast({message: 'Switching on relay for outer doors..', timeout: 3000});
                    showModal();
                }
            },
            error: function(xhr, textStatus, errorThrown){
                ons.notification.toast({message: 'Failed', timeout: 3000});
            }
        });



});



$('#btn-indoor-open').on("click touchend", function() { 


        $.ajax({
            url: 'http://localhost:5000/inner_door/2JkHmmbv4gA6mXLF',
            type: 'POST',
            success: function (result) {
                if (result["response"] == "Not Authorized"){
                    ons.notification.toast({message: result["response"], timeout: 1000});
                }
                else{
                ons.notification.toast({message: result["response"], timeout: 1000});
                ons.notification.toast({message: 'Switching on relay for inner doors..', timeout: 3000});
                showModal();
                }

            },
            error: function(xhr, textStatus, errorThrown){
                ons.notification.toast({message: 'Failed', timeout: 3000});
            }
        });  


});

$('#btn-both-open').on("click touchend", function() { 


        $.ajax({
            url: 'http://localhost:5000/inner_door/2JkHmmbv4gA6mXLF',
            type: 'POST',
            success: function (result) {
                if (result["response"] == "Not Authorized"){
                    ons.notification.toast({message: result["response"], timeout: 1000});
                }
                else{
                    ons.notification.toast({message: result["response"], timeout: 1000});
                    ons.notification.toast({message: 'Switching on relay for inner doors..', timeout: 3000});
                    ons.notification.toast({message: '5 seconds delay before another switch', timeout: 3000});
                }
            },
            error: function(xhr, textStatus, errorThrown){
                ons.notification.toast({message: 'Failed', timeout: 3000})
            }
        });



        setTimeout(function(){

            $.ajax({
                url: 'http://localhost:5000/outer_door/2JkHmmbv4gA6mXLF',
                type: 'POST',
                success: function (result) {
                    if (result["response"] == "Not Authorized"){
                        ons.notification.toast({message: result["response"], timeout: 1000});
                    }
                    else{
                        ons.notification.toast({message: result["response"], timeout: 1000});
                        ons.notification.toast({message: 'Switching on relay for outer doors..', timeout: 3000});
                        showModal();
                    }
                },
                error: function(xhr, textStatus, errorThrown){
                    ons.notification.toast({message: 'Failed', timeout: 3000});
                }
            }); 

        }, 5000);


});

});

</script>

</head>



<body style="font-family: monospace;">
<ons-page>
    <div id="btn-outdoor-open" style="height: 33.33%; text-align: center; padding-top: 17%; background-color: #0F2043; color: white;">
        <h2>Outer</h2>
        <ons-ripple></ons-ripple>
    </div>

    <div id="btn-indoor-open" style="height: 33.33%; text-align: center; padding-top: 17%; background-color: #79CEDC;">
        <h2>Inner</h2>
        <ons-ripple></ons-ripple>
    </div>

    <div id="btn-both-open" style="height: 33.34%; text-align: center; padding-top: 17%; background-color: #D5A458;">
        <h2>Both</h2>
        <ons-ripple></ons-ripple>
    </div>

</ons-page>

    <ons-modal direction="up">
        <div style="text-align: center">
            <p>
                Operation takes 30 seconds to finish<br><br>
                <ons-icon icon="md-spinner" size="28px" spin></ons-icon><br><br>
                <span id="message"></span><br><br>
            </p>
        </div>
    </ons-modal>

</body>


</html>

Application should looks like this: appearance in onsenui tutorial tool

but if I bundle the app with phone gap it looks like this: actual appearance on mobile device

I suspect that the whole jquery code does not working on mobile, but in onsenui tutorial tool it works properly. Why the touching events and/or jQuery does not work on mobile device? Thank you

Solution

  • The problem was that I have only index.html, no project structure, config files etc.

    I tried to go to monaca cloud, created a minimal functional onsenui project, and replaced javascript code to mine, build apk with their tool, and now everything is working fine, layout is as expected, and tapping is also functional. Hope that helps to someone, who thinks that you can build apk from one html file, you need all the project structure to get it working!