jQuery seems like not working after build with 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:

    0_1507748344471_0HSFoXW.png

    but if I bundle the app with phone gap it looks like this:

    0_1507748378982_akW9v73.png

    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? is there a possibility that CDN versions of jquery and onsenui does not work on mobile? why the layout looks different on actual mobile device?

    I’ll appreciate if someone could point me to right direction. Thank YOU!

    Edit: The clicking/touching, ripple effect not working as well on mobile device, but in dev tools in chrome it works as desired.



  • @py-radicz,

    I had somewhat of a similar issue with query mobile click and touch events responding.

    Instead of this (which is the old coding way):

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

    Write:

    $(document).on('"click touchend", "#btn-both-open", function(e) { 
        // code
    })
    

    Apply similar technique to other events as well.

    I suggest you also see (which I just found) :
    https://stackoverflow.com/questions/16375975/jquery-click-event-not-firing-in-jquerymobile

    As for the way it looks, it is possibly caused by not having the viewport meta tag:

    <meta name="viewport" content="width=device-width, initial-scale=1">
    

    Maybe you also need to add:

    <script type="text/javascript" src="components/loader.js"></script>
    

    A lot of weird stuff may happen if it’s missing.

    HTH,
    Jamal



  • Hello Jamal, firstly I want to thank you for response and then comes the worse part.

    I have tried the way of firing events like you have described, and also added view port meta tag, but tapping still not working and also layout remains the same, could you please advise where I can find loader.js? thanks in advance



  • Since you already created the app, add the <script> line to index.html header then configure your JS/CSS Components settings and make sure the first and second option are at least added.

    0_1507823306265_image.png

    Then in your project, you would have:

    0_1507823845709_image.png

    Also, you probably only need to the “click” event and remove the “touchend”.



  • it seems like I am skipping some steps here… All what I had was file index.html that I have uploaded to build.phonegap.com and it spits apk on me, while you have whole project structure in something that seems like desktop phonegap build app or something.



  • Oh! I am using Monaca Cloud IDE.



  • I’ll take a look at it, thank you for pointing out.



  • Thank you very much Jamal! it was so easy with monaca cloud IDE! I just choose minimum template for onsenui app, and add own html body and own js, and its working pretty neat now, you have saved hours of my time, thank you once again


Log in to reply