CODEWITHSUNDEEP
javascriptandroidjquery-mobile
Jono
Jono

Reputation: 18128

JavaScript not loading in onLoad (Android webView browser issue)

My javascript does not seem to load at all when i am using android's webview but loads fine on a desktop browser

Here is my html and script under one html file:

<script>

function initialiseFields(){
    var name = "John Smith";
    var staffId = "9877878";
    alert( 'initialiseFields' );

    $("#list").append('<li><h3>Additional Information:</h3><div data-role="fieldcontain"><input type="text" name="claimTitle" id=/"textFieldJourneyFrom" value="" /></div></li>');

    $('#list').listview('refresh');  
}

</script>



<body onLoad="initialiseFields();">
    <div data-role="content">
        <ul class="ui-li" data-role="listview" id="list" data-inset="true"  data-scroll="true">
        </ul>
</body>

Basically trying to execute the initialiseFields that displays an alert and add some field into the listView.

The alert and the listView never gets invoked/updated.

Edit: Also, whatever list item I add via javascript, it doesnt apply the default jquery mobile css style either. Any reason why?

Another Edit:

Solution is provided by the person i have accepted the answer, however a word of warning. if you are using a datepicker and its assets. the soltuons provided doesnt work i.e it doesnt load your JS for some strange reason:

<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.datepicker.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.button.min.css" rel="stylesheet" type="text/css">.

Also, i tried the above snippet of code by simply setting the theme and it managed to apply the theme on the text and header and background but on the actual field it does not apply it to the input field

$("#list").append('<li data-theme="c"><h3>Additional Information:</h3><div data-role="fieldcontain" data-theme="c"><input type="text" name="information" id=/"textFieldInformation value="" data-theme="c"/></div></li>');

edit 2:

Code was tested and working ok except for the theme of the input fields, however, my JS does not work at all on an android device.

Upvotes: 0

Views: 3329

Answers (1)

Gajotres
Gajotres

Reputation: 57309

When working with jQuery Mobile don't use inline javascript function initialization. Mainly because this problem could happen.

jQuery Mobile page is not a normal web page. Unlike classic web development jQuery Mobile will restyle whole page when it is initially loaded into the DOM. This will work fast on desktop browsers but it will take time to run on mobile browsers / web views (no matter is it Android or iOS). Because this restyling takes time this inline function will execute before content is full loaded/enhanced inside the DOM. This is also a reason why document ready should not be used with jQuery Mobile, because it will usually trigger before it can be useful.

To counter this problem you should use jQuery Mobile page events. They are specially created to cover page loading states from initial DOM loading up to final page show.

But to make it work you will need to change your HTML a bit. Your div with data-role="content" must be wrapped into a div with an attribute data-role="page", something like this:

<body>
    <div data-role="page" id="index">    
        <div data-role="content">
            <ul class="ui-li" data-role="listview" id="list" data-inset="true"  data-scroll="true">

            </ul>
        </div>
    </div>        
</body>

For page event to work you web app MUST have data-role="page" divs.Also your data-role="page" div must have an id, we will use this id to initialize your function.

Now to make it work just initialize your function like this:

$(document).on('pagebeforeshow', '#index', function(){ 
    initialiseFields();
});

If you want to find out more about page events read this ARTICLE, to be transparent it is my personal blog. One last thing, you need to know how jQuery Mobile handles multiple pages and javascript initialization so find more about it HERE.

You can test it here: http://jsfiddle.net/qhvne/2/embedded/result/

Upvotes: 2

Related Questions