JavaScript not loading in onLoad (Android webView browser issue)

Question

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.

Gajotres · Accepted Answer · 2013-07-12 11:19:59Z

2

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/

edited Jul 12, 2013 at 11:19

answered Jul 12, 2013 at 11:13

Gajotres

57.3k16 gold badges106 silver badges132 bronze badges

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

8 Comments

Jono Over a year ago

Cool thanks. does the JS need to be in its seperate JS file? Also, do you have any idea why the default CSS doesnt get aplied to the new list items that are added via JS?

Gajotres Over a year ago

You can put it into a separate js file or with HTML, it depends on your preferences. I would use external js file, also dont forget to read second link I posted in my answer. It will tell you about the differences between an external file loading vs inside a HTML file. Regarding your second question take a look at my other answer: stackoverflow.com/questions/14550396/…

Gajotres Over a year ago

Basically dynamically added content must be manually enhanced with appropriate widget functions. In case of a listvoew it is a listview('refresh') no you already know that.

Jono Over a year ago

Ahh ok so i basically have to manually set the style for the list item whilst i am adding it

Gajotres Over a year ago

Yes, examples can be found here: stackoverflow.com/questions/14550396/… , just look for a chapter related to a listview

|

Collectives™ on Stack Overflow

JavaScript not loading in onLoad (Android webView browser issue)

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related