Friday 2 August 2013

JQM_phonegap_ajax_json_fetch_data_display_dropdownbox_listview_gridview

Fetch list of data from ajax-json-¬jquerymobile-phonegap
Display in drop down list,list view, grid view mobile phone

 index.html
-----------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title> Mobile Services</title>

<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
<script src="jquery.mobile/jquery-1.7.2.min"></script>
<script src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<script src="cordova-2.6.0.js"></script>
<script type="text/javascript">

$(document).ready(function(e) {

//alert("ready");
     $.ajax({
  url: 'http://192.168.1.36:9090/touch/listofholiday.php',
  type:"GET",
  headers: { "cache-control": "no-cache" },
   contentType: 'application/json; charset=utf-8',
   dataType: "json",
  cache:false,
  success: function(data) {
//alert(data);
//alert(data[0].datee);
//alert(data[0].publicholiday);
//alert(data[0].day);
 // $("#namelist option:not(:first)").remove();

  $.each(data, function(key, val) {

var datee= val.datee;
var holiday=val.publicholiday;
var day=val.day;

 $("#namelist").append($('<option>', { value : datee }).text(val.publicholiday));
$("#namelist2").append($('<li>',{ value:datee} ).text(val.publicholiday));
  // $("#namelist3").append($('<div>'),{ value:datee} ).text(val.publicholiday));

         $("#namelist3").append($('<div class=ui-block-a style="direction:ltr;width:130%;font-size:78%; " >').text(val.datee));
   $("#namelist4").append($('<div class=ui-block-a style="direction:ltr;width:130%;font-size:78%; " >').text(val.publicholiday));
  $("#namelist5").append($('<div class=ui-block-a style="direction:ltr;width:130%;font-size:78%; " >').text(val.day));
  // $("#earningsblockvalue").append($('<div class=ui-block-a style="direction:rtl; width:100%;font-size:78%;">').text(value['amount']));

 });
            count++;
            if(count==2){
            $.mobile.hidePageLoadingMsg();
            }
 
  $("#namelist").selectmenu('refresh');

 },
error:function(e){
 // navigator.notification.alert("Network Error for getting audit name",allertCallback,"Alert");
 $.mobile.hidePageLoadingMsg();
     }
 
});
});
</script></head>

<body >
<div data-role="page" id="home">
<div data-role="header" >
<div class="locl-page">

<img src="images/kaspon.gif" style="vertical-align: middle; >
<span style=""> Mobile HRMS Services </span>
</div>
<!--
  <a href="#" data-icon="home" data-iconpos="notext" id="logout" class="ui-btn-right">intro</a>-->
</div>
<div data-role="content">

<div align="center" >List of holidays for Current Year</div>
<!-- <div data-role="collapsible" data-theme="b" data-content-theme="d"
data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d"
data-inset="false">
<h2>list of holidays</h2>

<ul data-role="listitem" id="namelist2">

</ul>
</div>

<select id="namelist" data-content-theme="a">
    <option >Select One</option>
</select>
  -->
  <div class="ui-grid-b" style="margin-top: 10px;background: #E6E6FA">
    <div  class="ui-block-a"  style="width: 30%;" data-theme="b">Date</div>
    <div class="ui-block-b"  style="width: 40%;" data-theme="b">Holiday </div>
    <div class="ui-block-c"  style="width: 30%;" data-theme="b">Day </div>
</div>
 
  <div class="ui-grid-b" style="width:100%;">
    <div class="ui-block-a" id="namelist3" style="width: 30%;" data-theme="b"></div>
    <div class="ui-block-b" id="namelist4" style="width: 40%" data-theme="b"> </div>
    <div class="ui-block-c" id="namelist5" style="width: 30%" data-theme="b"> </div>
</div>

</body>
</html>




Server side code
------------------
Listofholidays.php 
===================
<?php
$con=mysqli_connect("localhost","root","","test");
if(mysqli_connect_errno())
{
echo "Failed to connect to MYSQL:".mysqli_connect_error();
}
$result=mysqli_query($con,"select datee,publicholiday,day from listofholiday WHERE YEAR = YEAR(CURDATE())");
if($result==true)
{
while($row = mysqli_fetch_assoc($result)){
     $json[] = $row;
}
echo json_encode($json);
}
else
{
$row_array['status']=0;
echo json_encode($row_array);
}
?>



Out put result
--------------
[{"datee":"1-Jan-13","publicholiday":"New Year","day":"Tuesday"},
{"datee":"14-Jan-13","publicholiday":"Pongal","day":"Monday"},
{"datee":"26-Jan-13","publicholiday":"Republic Day","day":"Saturday"},
{"datee":"14-Apr-13","publicholiday":"Tamil New Year","day":"Sunday"},
{"datee":"25-Dec-13","publicholiday":"Christmas","day":"Wednesday"}]



at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)