i have already created dynamicaaly listview items by using webservice now i want to pass parameters when clicked on list view items
here is my code:
for first page:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
$(function() {
$(document).ready(function(){
$.getJSON("http://siliconsoftwares.in/store/storejson1.php",function(data) {
$.each(data.items, function(i,data){
$('#matches').children('ul').append('<li><a href="subcategory.html?cat_id=' + data.categories_id + '">'+data.categories_name+'</a></li>'
);
$("#resultlist").listview("refresh");
});
}
);
return false;
});
});
</script>
</head>
<body>
<div data-role="page" data-theme="a" id="mypage">
<div data-role="header">
<h1>hygo</h1>
</div>
<div data-role="content" id="matches">
<ul id="resultlist" data-role="listview" data-theme="f" data-inset="true" >
</ul>
</div>
<div data-role="footer">
<h4>footer</h4>
</div>
</div>
subcategory.html page coding:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
$("#myPage").live("pageshow",function(event){
// get your id from LINK and parse it to a variable
var json_list_callback = getUrlVars()[cat_id];
// verify the URL id
if (json_list_callback === '') {json_list_callback === ''} //or what value you want
// define your path to JSON file generated by the ID declared upper
var json_URL = 'http://siliconsoftwares.in/store/storesubcatjson.php?cat_id=' + json_list_callback;
// get the JSON data defined earlier and append to your LIST
$.getJSON(json_URL,function(data){
var entries = data;
//populate our list with our json data
$.each(entries,function(index,entry){
// i use dummy data here, you can have whatever you want in youre json
$("#myList").append(
'<li>' +
// remember that this "page.html?id=' + entry.json_id + '" will be the link where getUrlVars will get the id declared earlier in function
'<a href="page.html?id=' + entry.categories_id + '">' + entry.categories_name + '<\/a>' +
'<\/li>'
);
});
//must refresh listview for layout to render
$("#myList").listview("refresh");
});
});
//this function gets from URL the id, category, whatever you declare like this: getUrlVars()['id'] or getUrlVars()['category'] after last symbol of "?"
// you can define your own symbol with this function
function getUrlVars() {
var vars = [],
hash;
var hashes = window.location.href.slice(window.location.href.lastIndexOf('?') + 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;
}
</script>
</head>
<body>
<div data-role="page" id="myPage">
<div data-role="content" id="myContent">
<ul data-role="listview" data-inset="true" id="myList"></ul>
</div>
</div>
please tell me where i m wrong....i want to pass id of that category...u can check my first page here:
http://siliconsoftwares.in/html/hygo.html-check out this link then u 'l able to understand..