Full Stack Angular, React, Spring Boot Ganpathi: Nested Json retrival and json ,Jquery select options

Drop down box select in 3 level using JQM/PhoneGap
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>


<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/jqm-datebox.min.css" />
<script src="css/jquery-1.8.0.min.js"></script>
<script src="css/jquery.mobile-1.2.0.min.js"></script>
<script src="js/jqm-datebox.core.min.js"></script>
<script src="js/jqm-datebox.mode.calbox.min.js"></script>

<script type="text/javascript" src="cordova-2.7.0.js"></script>

<script type="text/javascript">
$(document).ready(function(e)
{
//alert(1);
$('#select-date option[value="-1"]').attr('selected',true);
$('#select-doctor option[value="-1"]').attr('selected',true);
$('#select-specialist option[value="-1"]').attr('selected',true);

$.ajax({
// url: url+"internaltracking.php",
url:'http://192.168.1.36:9090/hms/booking.php',
type:"GET",
// data:datavalue,
timeout: 10000,
headers: { "cache-control": "no-cache" },
contentType: 'application/json; charset=utf-8',
dataType: "json",
cache:false,
success: function(data) {
//alert(data);
//alert(data[0].spid);
//alert(data[0].spdesc);
//alert(data[0].day);
// $("#namelist option:not(:first)").remove();

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

var spid= val.spid;
var spdesc=val.spdesc;

$("#select-spcialist").append($('<option>', { value : spid }).text(val.spdesc));

// alert(spid);

});
// count++;
if(count==2){
$.mobile.hidePageLoadingMsg();
}

$("#namelist").selectmenu('refresh');

}, error:function(x, t, m)
{
if(t=="timeout") {
navigator.notification.alert("Your Data connection is too slow", alertCallback, "Alert");
} else {
navigator.notification.alert("Check Internet Connectivity", alertCallback, "Alert");
}
}
});

$("#select-spcialist").live('change',function()
{

var specid=$(this).attr('value');

datavalue='did='+specid;
//alert(datavalue);
$.ajax({
// url: url+"internaltracking.php",
url:'http://192.168.1.36:9090/hms/booking2.php',
type:"GET",
data:datavalue,
timeout: 10000,
headers: { "cache-control": "no-cache" },
contentType: 'application/json; charset=utf-8',
dataType: "json",
cache:false,
success: function(data) {
//alert(data);
//alert(data[0].did);
//alert(data[0].dname);
//alert(data[0].day);

$('#select-doctor option[value="-1"]').attr('selected',true);
$("#select-doctor option:not(:first)").remove();

$('#select-date option[value="-1"]').attr('selected',true);
$("#select-date option:not(:first)").remove();

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

var did= val.did;
var dname=val.dname;

$("#select-doctor").append($('<option>', { value : did }).text(val.dname));

// alert(spid);

});
$("#select-doctor").selectmenu('refresh');
$("#select-date").selectmenu('refresh');

// count++;
if(count==2){
$.mobile.hidePageLoadingMsg();
}

$("#namelist").selectmenu('refresh');

}, error:function(x, t, m)
{
if(t=="timeout") {
navigator.notification.alert("Your Data connection is too slow", alertCallback, "Alert");
} else {
navigator.notification.alert("Check Internet Connectivity", alertCallback, "Alert");
}
}
});
});

$("#select-doctor").live('change',function()
{

var dateid=$(this).attr('value');
// alert('date');
datavalue='dateid='+dateid;
//alert(datavalue);
$.ajax({
// url: url+"internaltracking.php",
url:'http://192.168.1.36:9090/hms/booking3.php',
type:"GET",
data:datavalue,
timeout: 10000,
headers: { "cache-control": "no-cache" },
contentType: 'application/json; charset=utf-8',
dataType: "json",
cache:false,
success: function(data) {
// alert(data);
// alert(data[0].appdateid);
// alert(data[0].appdate);
//alert(data[0].day);
$('#select-date option[value="-1"]').attr('selected',true);
$("#select-date option:not(:first)").remove();

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

var appdateid= val.appdateid;
var appdate=val.appdate;

$("#select-date").append($('<option>', { value : appdateid }).text(val.appdate));

// alert(spid);

});
$("#select-date").selectmenu('refresh');
// count++;
if(count==2){
$.mobile.hidePageLoadingMsg();
}

// $("#namelist").selectmenu('refresh');

}, error:function(x, t, m)
{
if(t=="timeout") {
navigator.notification.alert("Your Data connection is too slow", alertCallback, "Alert");
} else {
navigator.notification.alert("Check Internet Connectivity", alertCallback, "Alert");
}
}
});
});

});

</script>

<script>
//reset type=date inputs to text
$( document ).bind( "mobileinit", function(){
$.mobile.page.prototype.options.degradeInputs.date = true;
});
</script>

<script type="text/javascript">

function bookappoinment()
{

var sp=$('#select-spcialist option:selected').text();
var doc=$('#select-doctor option:selected').text();
var dat=$('#select-date option:selected').text();
var tim=$('#select-time option:selected').text();

/* alert(sp);
alert(doc);
alert(dat);
alert(tim); */

$("#bookconform").append('<table><tr><td> '+sp+'</td><td> '+doc+'</td><td> '+dat+'</td><td> '+tim+'</td></tr></table>');

//window.location="pdash.html";

}
</script>

</head>
<body>
<div data-role="page" id="pappoinment">
<div data-role="header" data-theme="b">
<a href="#" data-icon="back" data-rel="back" title="Go back"></a>
<img src="images/logo2.png" style="height:37px;alt="logo" class="center" />

</div>
<div data-role="content">
<p align="center" >Out Patient Appointment</p>
<style>
.center
{
display:block ;
margin-left:auto ;
margin-right:auto ;

}

#forgot{
vertical-align:middle;
}
/*.inset
{
margin: 0px auto;
max-width: 90%;
margin-top: 5px;
background:#CCC;
text-shadow:none;

font-size:14px;
border-radius: 0.6em 0.6em 0.6em 0.6em;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.7);
margin-bottom: 5px;
padding: 17px ;
padding-bottom: 8px;}
*/

</style>
<div class="inset" data-theme="b">

<form name="pregister" method="post" action="javascript():pbookappointment();">
<fieldset data-role="controlgroup" id="pdoctorspecality">
<div data-role="navbar" id="id99">
<ul>
<li><a href="#" class="ui-btn-active">Out Patient</a></li>
<li><a href="#">In Patient</a></li>

</ul>
</div>
<style>
#id99
{border:#333;
border-width:medium;}
</style>

<label>Speciality :</label>
<select name="select-native-5" id="select-spcialist">
<option value="-1">Select Speciality</option>

</select>

<label>Doctor Name</label>
<select name="select-native-6" id="select-doctor">

<option value="-1">Select Doctor</option>

</select>

<label>Prepared Date</label>
<select name="select-native-7" id="select-date">
<option value="-1">Select Date</option>

</select>

<label>Prepared Time</label>
<select name="select-native-7" id="select-time" onchange="bookappoinment()">

<option value="#">slot 1</option>
<option value="#">slot 2</option>
<option value="#">slot 3</option>
<option value="#">slot 4</option>
<option value="#">slot 5</option>
<option value="#">slot 6</option>
</select>
</fieldset>

<p>
<a href="#" data-rel="back" data-role="button" data-inline="true" style="background:DodgerBlue;color:white;">Back</a>

<a href="#dialog" data-rel="popup" data-position-to="window" data-role="button" data-transition="pop" data-inline="true" style="background:green;color:white;">Book Now</a>
<div data-role="popup" id="dialog" data-overlay-theme="a" data-theme="c">
<div data-role="header" data-theme="d">
<h1>Conform</h1>
</div>
<div data-role="content" data-theme="d">
<h3 id='bookconform'></h3>
<a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">No</a>
<a href="pdash.html" data-role="button" data-inline="true" data-rel="external" data-theme="b">Yes, Book it</a>
</div>
<div data-role="footer" data-theme="d">
<h1>Thanks...</h1>
</div>
</div>
<hr>

</p>

</form>
</div>
</div>

</div> 

</body>
</html>

==========================

result of php file
http://192.168.1.36:9090/hms/booking.php

[{"spid":"1","spdesc":"Ayurveda"},{"spid":"5","spdesc":"Cancer Care"},
{"spid":"6","spdesc":"Cardiac Surgery"},{"spid":"8","spdesc":"Cardiology"},
{"spid":"9","spdesc":"Dental,clinical, oral and Maxi"},
{"spid":"10","spdesc":"Emergency Medical Service"},
{"spid":"11","spdesc":"Ent "},{"spid":"12","spdesc":"Family Medicine"},
{"spid":"13","spdesc":"Gastroenterology"},
{"spid":"14","spdesc":"General Surgery"},
{"spid":"15","spdesc":"High Risk Pregnancy and Fetal "},
{"spid":"16","spdesc":"Neonatology"},
{"spid":"7","spdesc":"Obesity Clinic"},
{"spid":"3","spdesc":"Physiotherapy"},
{"spid":"4","spdesc":"Thoracic "},
{"spid":"2","spdesc":"Urology"}]

----------------------------------------------------------------------------------

result of php file
http://192.168.1.36:9090/hms/booking2.php

[{"did":"7","dname":"Dr. Aleyamma Joseph"}]

----------------------------------------------------------------------------------

result of php file
http://192.168.1.36:9090/hms/booking3.php

[{"appdateid":"7","appdate":"121 dec 2013"}]
---------------------------------------------------------------------------------

Full Stack Angular, React, Spring Boot Ganpathi

Monday 16 December 2013

Nested Json retrival and json ,Jquery select options

No comments:

Post a Comment

AWS - Solution Architect - SAA-C03 Certification Course & AWS Services