In the last few days I am facing always some problem with phonegap and jquery. I need to build phonebook application with list and filter and link on user details. Therefore I have few questions.
At first I had problem with getting data from a web server (I used PHP script to return json data and made an ajax request) than I had to configure it to work with cross domain and that went fine ( I am storing data also in the local device database). Is this the right approach?
After that I wanted to make a new html page for the user details. Everything went fine until I added new javascript file in this new html page. Javascript didnt work, I dont know for what reason. I even made the basic hello page and included js file and just one line like alert(hello); in it and still nothing. Like all js files are only loaded in index.html and not in any other page. My code for this was (userdetail.js):
document.addEventListener("deviceready", onDeviceReady, false); var db = null; // Cordova is ready // function onDeviceReady() { console.log("opening database"); db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000); console.log("database"); //db.transaction(getUser, errorCB); alert("hello"); }and for html page:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,width=device-width" /> <title>Hello</title> </head> <body> <div id="userPage" data-role="page"> <div data-role="content">hallo <div id="userDetail"></div> </div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript" src="js/userdetail.js"></script> <script type="text/javascript"> app.initialize(); </script> </body> </html>and still didnt get it working. Than I decided, well I will make everything just in one page with javascript. Am I missing something here? I didnt even get the console.log info. I am redirecting the user with this part (links are made with javascript and appended to index.html page in this part):
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --> <meta name="viewport" content="width=device-width, user-scalable=no" /> <!-- <link rel="stylesheet" type="text/css" href="css/index.css" /> --> <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css" /> <title>Hello World</title> </head> <body> <div id="userListPage1" data-role="page"> <div data-role="header" data-theme="b" data-position="fixed" style="overflow:hidden;"> <h1> </h1> <a href="#" class="ui-btn ui-icon-recycle ui-btn-icon-notext ui-corner-all ui-btn-right"></a> <!-- <div id="custom-border-radius"> <a href="#mypanel" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all ui-btn-left">No text</a> </div> --> <div data-role="navbar" data-iconpos="bottom"> <ul> <li><a href="#" class="ui-btn-active ui-nodisc-icon ui-state-persist" data-icon="home" data-theme="a"></a></li> <li><a href="#userListPage2" class="ui-nodisc-icon ui-alt-icon" data-icon="shop" data-theme="a"></a></li> <li><a href="#userListPage3" class="ui-nodisc-icon ui-alt-icon" data-icon="user" data-theme="a"></a></li> </ul> </div> </div> <div data-role="content" > <ul id="userList1" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true"> </ul> </div> <div data-role="footer" data-theme="b" data-position="fixed"> <h1>Private</h1> </div> <!-- <div data-role="panel" id="mypanel" data-position="left" data-display="push" data-corners="false" data-theme="b" data-overlay-theme="a"> <ul data-role="listview"> <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li> <li><a href="#panel-fixed-page2">Accordion</a></li> <li><a href="#panel-fixed-page2">Ajax Navigation</a></li> <li><a href="#panel-fixed-page2">Autocomplete</a></li> </ul> </div> --> </div> <div id="userListPage2" data-role="page"> <div data-role="header" data-theme="b" data-position="fixed" style="overflow:hidden;"> <h1> </h1> <a href="#" class="ui-btn ui-icon-recycle ui-btn-icon-notext ui-corner-all ui-btn-right"></a> <div data-role="navbar" data-iconpos="bottom" > <ul> <li><a href="#userListPage1" class="ui-nodisc-icon ui-alt-icon" data-icon="home" data-theme="a"></a></li> <li><a href="#" class="ui-btn-active ui-nodisc-icon ui-state-persist" data-icon="shop" data-theme="a"></a></li> <li><a href="#userListPage3" class="ui-nodisc-icon ui-alt-icon" data-icon="user" data-theme="a"></a></li> </ul> </div> </div> <div data-role="content"> <ul id="userList2" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true"> </ul> </div> <div data-role="footer" data-theme="b" data-position="fixed"> <h1>Companies</h1> </div> </div> <div id="userListPage3" data-role="page"> <div data-role="header" data-theme="b" data-position="fixed" style="overflow:hidden;"> <h1> </h1> <a href="#" class="ui-btn ui-icon-recycle ui-btn-icon-notext ui-corner-all ui-btn-right"></a> <div data-role="navbar" data-iconpos="bottom" > <ul> <li><a href="#userListPage1" class="ui-nodisc-icon ui-alt-icon" data-icon="home" data-theme="a"></a></li> <li><a href="#userListPage2" class="ui-nodisc-icon ui-alt-icon" data-icon="shop" data-theme="a"></a></li> <li><a href="#" class="ui-btn-active ui-nodisc-icon ui-state-persist" data-icon="user" data-theme="a"></a></li> </ul> </div> </div> <div data-role="content"> <ul id="userList3" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true"> </ul> </div> <div data-role="footer" data-theme="b" data-position="fixed"> <h1>Organisations</h1> </div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript" src="js/userlist.js"></script> <script type="text/javascript"> app.initialize(); </script> </body> </html>and here is the js that generates userList1 from above
function querySuccess(tx, results) { var len = results.rows.length; console.log("TELEFONBOOK table: " + len + " rows found."); $('#userList1 li').remove(); $('#userList2 li').remove(); $('#userList3 li').remove(); for (var i=0; i<len; i++){ //append the users to userlist, show the data if(results.rows.item(i).typ == "p"){ $('#userList1').append('<li><a href="user_details.html?id=' + results.rows.item(i).id + '"> ' + results.rows.item(i).nachname + ' ' + results.rows.item(i).vorname + '<p>' + results.rows.item(i).strasse + ' ' + results.rows.item(i).strasse_nr + '</p></a></li>'); }else if(results.rows.item(i).typ == "f"){ $('#userList2').append('<li><a href="user_details.html?id=' + results.rows.item(i).id + '"> ' + results.rows.item(i).nachname + ' ' + results.rows.item(i).vorname + '<p>' + results.rows.item(i).strasse + ' ' + results.rows.item(i).strasse_nr + '</p></a></li>'); }else if(results.rows.item(i).typ == "o"){ $('#userList3').append('<li><a href="user_details.html?id=' + results.rows.item(i).id + '"> ' + results.rows.item(i).nachname + ' ' + results.rows.item(i).vorname + '<p>' + results.rows.item(i).strasse + ' ' + results.rows.item(i).strasse_nr + '</p></a></li>'); } console.log("Row = " + i + " ID = " + results.rows.item(i).id + " Data = " + results.rows.item(i).data); } $('#userList1:visible').listview('refresh'); $('#userList2:visible').listview('refresh'); $('#userList3:visible').listview('refresh'); }Here is the user_details.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,width=device-width" /> <title>Hello</title> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript" src="js/userdetails.js"></script> <script type="text/javascript"> app.initialize(); </script> </head> <body> <div id="userPage" data-role="page"> <div data-role="content">hallo <div id="fullName"></div> </div> <div data-role="footer" data-theme="b" data-position="fixed"> <h1>Privat</h1> </div> </div> </body> </html>and here is the userdetails.js
var id = getUrlVars()["id"]; // Wait for Cordova to load // document.addEventListener("deviceready", onDeviceReady, false); var db = null; // Cordova is ready // function onDeviceReady() { console.log("opening database"); db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000); console.log("database"); db.transaction(getUser, errorCB); alert("hello"); } // Query the database // function getUser(tx) { var sql = "SELECT * FROM TELEFONBOOK WHERE id=:id"; tx.executeSql(sql, [id], getUserSuccess); } // Query the success callback // function getUserSuccess(tx, results) { var user = results.rows.item(0); $('#fullName').text(user.nachname + ' ' + user.vorname); alert("hallo"); } // Transaction error callback // function errorCB(err) { alert("Error processing SQL: "+err); } //function to get the id value function getUrlVars() { alert("test"); var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); for(var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]] = hash[1]; } return vars; }After that, my final question. I made in the index.html page listview like this:
<div data-role="content"> <ul id="userList3" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true"> </ul> </div>and now I am facing a problem every time I click on the filter field. I get a top border and bottom border white line. For example (notice the white line between two red lines when i click in the filter field):
I dont know is this really normal when using phonegap and jquery mobile to have so many problems. But any help or advice would really help. Thank you.
UPDATE
2.After really hard searching and testing, I found the solution here Pageshow not triggered after changepage
3.I have managed to find the problem. In the jquery mobile css change the ui-footer-fixed.ui-fixed-hidden to
ui-footer-fixed.ui-fixed-hidden{bottom:-1px;padding-bottom:1px}
and same for the header:
ui-header-fixed.ui-fixed-hidden{top:-1px;padding-top:1px}
