Jquery functions working on web-browser but not on android device

Question

I have a Phonegap application that won't load some JQuery and Mobiscroll script . In the browser loads perfectly but when i build it with phonegap and test it on devices it doesnt show me the Data and Time scroller and also a button that adds some jSON.

I'm new to web app building and using phonegap so please don't go hard on me if i made a noob mistake...

I also tried ElLocoCocoLoco solution from Phonegap not calling device ready function and i got the same result. I think it has something to do with $(document).ready(function($) because when i delete the "$" in the function paramater it doesnt load also in web-browsers

The script is as follows

$(document).ready(function($) {
    var json = '[{"productsArray":[{"productName":"Wine","productPrice":"12 ","priceCurrency":"Dollar      ","productDescription":"   Very good   "}],"categoryName":"Drinks"},{"productsArray":[{"productName":"Steak","productPrice":"12 ","priceCurrency":"Dollar      ","productDescription":"   This is a very short description   "},{"productName":"Garlic","productPrice":"2 ","priceCurrency":"Dollar      ","productDescription":"   Dracula   "}],"categoryName":"Very good food"}]';
    var obj = JSON && JSON.parse(json) || jQuery.parseJSON(json);



    $('#addCategory').click(function () {
    for (var j = 0; j < obj.length ;j ++) { 
    var categoryHTML='<div data-role="collapsible" data-collapsed="true"><h2>'+ obj[j].categoryName +'</h2><ul data-role="listview" data-split-icon="plus" data-theme="a" data-split-theme="b" data-inset="true"  >';
    for (var i = 0; i < obj[j].productsArray.length ;i++) { 
        categoryHTML += ('<li>  <a href="#" onclick="showMe(\'cat-ex\')"> <h3>'+ obj[j].productsArray[i].productName +'</h3> \
                          <p><strong> '+ obj[j].productsArray[i].productDescription +'</strong> </p>\
                          <span class="ui-li-count"><strong>'+ obj[j].productsArray[i].productPrice +'</strong>LEI</span>   \
                          </a><a href="#" style="margin-top:0px;" onClick="alert(\'Comanda a fost plasata!\')" data-rel="popup" data-transition="pop">Plateste</a><br></li>');
    }
    categoryHTML += '</ul></div>';

    $('#menuHolder').append(categoryHTML).trigger("create");
    $('#menuHolder').find('div[data-role=collapsible]').collapsible();}
    });

        $('#demo').mobiscroll().date({
            theme: 'android-ics light',
            display: 'bottom',
            mode: 'scroller',
            onFocus: false,
            onTouch: true,
            invalid: [ 'w0', 'w6', '5/1', '12/24', '12/25' ]

        });    
        $('#show').click(function(){
            $('#demo').mobiscroll('show'); 
            return false;
        });


        $('#demo2').mobiscroll().time({
            theme: 'android-ics light',
            display: 'inline',

            mode: 'scroller',
            stepMinute: 15,
            headerText: false
        });    
        $('#show2').click(function(){
            $('#demo2').mobiscroll('show'); 
            return false;
        });


        $('#demo3').mobiscroll().select({
            theme: 'android-ics light',
            display: 'modal',
            animate: 'pop',
            mode: 'scroller',
            inputClass: 'i-txt',
            width: 200
        });
        $('#show3').click(function () {
            $('#demo3').mobiscroll('show'); 
            return false;
        });
        $('#clear').click(function () {
            $('#demo').val('');
            $('#demo2').val('');
            $('#demo3').val(1).change();
            $('#demo3'+'_dummy').val('');
            return false;
        });

        $('#demo').focus(function() {
            this.blur();
        });
        $('#demo2').focus(function() {
            this.blur();
        });
        $('#demo3').focus(function() {
            this.blur();
        });     
});

.ready() shouldn't be used in jQuery-Mobile, alternatively, use pageinit i.e. wrap your code with $(document).on('pageinit', function () { // code }); — Omar
– Omar, Commented Sep 20, 2013 at 13:45
@Omar when i use pageinit my script doesnt load at all even in the web browser. i also use prototype-1.7.1.js for toggling the visibility of some divs. if i dont use it like jQuery( document ).ready(function( $ ) it wont work at all... — Radu Turtoi
– Radu Turtoi, Commented Sep 22, 2013 at 19:25
use latest jqm 1.3.2 with jquery 1.9.1 link jquerymobile.com/blog/2013/07/19/announcing-jquery-mobile-1-3-2 — Omar
– Omar, Commented Sep 22, 2013 at 19:43
@Omar made it work. thank you for pointing me in the right direction — Radu Turtoi
– Radu Turtoi, Commented Sep 23, 2013 at 11:00
You're welcome and good luck :) add an answer so others can benefit. — Omar
– Omar, Commented Sep 23, 2013 at 11:53

Radu Turtoi · Accepted Answer · 2013-09-25 12:24:52Z

2

Made it work by changing the init with

jQuery(document).on('pageinit','#imenu', function () {

the click functions with

jQuery('#addCategory').live('tap', function () {

and all the selectors $ with jQuery because i had a conflict with another framework and now it works flawlessly on my device

answered Sep 25, 2013 at 12:24

Radu Turtoi

1891 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery functions working on web-browser but not on android device

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related