Hi guys.

This is the javascript that I am adding at the end of the page (as done by a nettuts+ tutorial):

2. <script>
3. // Variables
4. var html_sub_string;
5. var html_string;
6. 
   
7. $(document).ready(function () {     
8.      showList();
9.      
10. });    
11. 
    
12. function showList(){  
13. var db = openDatabase('LaurDB', '1.0', 'LaurDB', 2 * 1024 * 1024);
14. db.transaction(function (tx) {
15. tx.executeSql('SELECT * FROM laureates', [], function (tx, results) {
16.  var len = results.rows.length, i;
17.  for (i = 0; i < len; i++) {
18. html_sub_string = html_sub_string + '<li>' + results.rows.item(i).category + ' ' + results.rows.item(i).year + '<br>' + results.rows.item(i).name + '</li>';
19.  }  
20. });
21. });
23. $('<li data-role="list-divider">Results</li>' +  html_sub_string + ' <li data-role="list-divider">End Results</li>').appendTo('#listan'); 
24. }
25. 
    
26. </script>

However, I have 2 problems with this:

1/ I can't seem to get the vaule of html_sub_string out from the function that loops through the database. I thought that by defining it a Global variable it would be accessable from all functions? What am I doing wrong here?

2/ If I put this code at the bottom of the page the resulting list is halfway styled. It has rounded corners and has the "inset"-look but all colors are gone and the text is unstyled. 

If I instead put the code in a separate js-file and references it before jquery.mobile-1.0a3.min.js it actually styles correctly. 

While this list is being created on a separate page now I ultimately would like it to be created on the fly on the index-page through a onclick-even and when I tried it I got an unstyled list so that's why I still am wondering what is happening.

Thanks

/Björn