Hello @all , for several days i try to create a nested-ist generated by jquerymobile from websql querys.
I can only master the code to show all parents and children in 1 single list.
However of course, i want to have each child to its parent.
I would appreciate any help.
The code i have so far is the following:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Tutorial</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script> $(document).bind("mobileinit", function(){$.extend( $.mobile , {ajaxFormsEnabled: false});}); </script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<script>
//Get the regular vars
var dbSize = 5 * 1024 * 1024; // 5MB
var db = openDatabase("Categories", "1.0", "Categories manager", dbSize);
var getCat = {};
//get the cat to add the cat from addCat
getCat.addCat = function(catName, catDes, pID) {
db.transaction(function (tx) {
var addedOn = new Date();
tx.executeSql("INSERT INTO categories(categories_name, categories_discription, parent_id, added_on) VALUES (?,?,?,?)", [catName, catDes, pID, addedOn]);
});
};
//get the cat to delete the cat
getCat.deleteCat = function(id) {
db.transaction(function(tx){
tx.executeSql("DELETE FROM categories WHERE categories_id=?", [id],init);
});
}
//load the cats to choose a cat
function loadCatOptions() {
var option_str='';
option_str += '<option value="0" data-placeholder="true">Choose categorie</option>';
option_str += '<option value="0">Top/ParentiD</option>';
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM categories', [], function (tx, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
var r = results.rows.item(i);
var catName = r.categories_name;
var catID = r.categories_id;
var pID = r.parent_id;
option_str += "<option value=" + r['categories_id'] + ">" + r['categories_name'] + "</option>";
}
$("#parent_id").html(option_str);
$("#parent_id").selectmenu('refresh', true);
});
});
}
//load the cats list
function loadCatList() {
var li_str ='';
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM categories', [], function (tx, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
var r = results.rows.item(i);
var catName = r.categories_name;
var catID = r.categories_id;
var pID = r.parent_id;
li_str += "<li id=\"" + i + "\"><h3><a href=\"index.html\">" + catName + "</a></h3><p>" + r.categories_discription + "</p><p>CategorieID: " + catID + " has parentID: " + pID + "</p><a href='javascript:void(0);' data-role='button' data-icon='delete' data-iconpos='notext' onclick='getCat.deleteCat(" + r.categories_id +");'></a>"
li_str += "</li>";
}
$("#catItems").html(li_str);
$("#catItems").listview('refresh');
});
});
}
//add a cat and transfer to getCat
function addCat() {
var categories_name = document.getElementById("categories_name");
var categories_discription = document.getElementById("categories_discription");
var parent_id = document.getElementById("parent_id");
getCat.addCat(categories_name.value,categories_discription.value,parent_id.value);
categories_name.value = "";
categories_discription.value = "";
parent_id.value = "";
}
</script>
</head>
<body>
<!-- /first page start -->
<div data-role="page" id="page1">
<div data-role="header" data-position="inline" data-backbtn="false">
<h1>Create categories tree</h1>
<a href="#page2" data-icon="gear" data-theme="b" class="ui-btn-right">Options</a>
</div><!-- /header -->
<div id="content" data-role="content">
<form method="post" onsubmit="addCat();" action="#page2">
<div data-role="fieldcontain">
<label for="parent_id" class="select">Choose a categorie:</label>
<select name="parent_id" id="parent_id">
</select>
</div>
<div data-role="fieldcontain">
<label for="categories_name">Categories name:</label>
<input type="text" id="categories_name" name="categories_name" placeholder="Give your categorie a name" value="" />
</div>
<div data-role="fieldcontain">
<label for="categories_discription">Categories description:</label>
<textarea cols="40" rows="8" id="categories_discription" name="categories_discription" placeholder="Give a categorie description"></textarea>
</div>
<input type="submit" data-icon="plus" data-inline="true" value="Add Categorie" class="submit">
</form>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div><!-- /footer -->
<script> loadCatOptions(); </script>
</div>
<!-- /first page end -->
<!-- /second page start -->
<div data-role="page" id="page2">
<div data-role="header">
<a href="#page1" data-icon="home" data-theme="b" class="ui-btn-left">Home</a>
<h1>Navigate Categories</h1>
</div><!-- /header -->
<div id="content2" data-role="content">
<ul id="catItems" data-role="listview">
</ul>
</div>
<!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
<script> loadCatList();</script>
</div>
<!-- /second page end -->
</body>
</html>