0

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.

Jono
  • 17,341
  • 48
  • 135
  • 217

1 Answers1

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/

Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • 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? – Jono Jul 12 '13 at 11:29
  • 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: http://stackoverflow.com/questions/14550396/jquery-mobile-markup-enhancement-of-dynamically-added-content/14550417#14550417 – Gajotres Jul 12 '13 at 11:33
  • 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. – Gajotres Jul 12 '13 at 11:34
  • Ahh ok so i basically have to manually set the style for the list item whilst i am adding it – Jono Jul 12 '13 at 11:38
  • Yes, examples can be found here: http://stackoverflow.com/questions/14550396/jquery-mobile-markup-enhancement-of-dynamically-added-content/14550417#14550417 , just look for a chapter related to a listview – Gajotres Jul 12 '13 at 11:39
  • Just a small update. my JS gets executed now and it is a mixture of teh solution you provided an a bug on the datePicker. If you was to add the following script to use a datepicker, the JS doesnt load for some reason. i will post the snippet of code that i use to define a datepicker. dont worry, that is a completely seperate topic that i need to investigate why my JS doesnt load when datepicker is used – Jono Jul 12 '13 at 11:57
  • Also, i tried applying the theme to the fieldCOntain and the input itself and it did not apply it to the actual text field box – Jono Jul 12 '13 at 12:07
  • Code doesnt work on an android webview but works fine on desktop. any advice? – Jono Jul 12 '13 at 16:50