Full Stack Angular, React, Spring Boot Ganpathi: December 2013

Thursday 26 December 2013

Detect page Orientation change in phoneGap

Page orientation Change Phonegap:
---------------------------------------

work sometimes in cordova 2.7, Try with lower version will.

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
<script type="text/javascript" charset="utf-8">

function init() {
window.addEventListener("orientationchange", orientationChange, true);
}

function orientationChange(e) {
var orientation="portrait";
if(window.orientation == -90 || window.orientation == 90) orientation = "landscape";
document.getElementById("status").innerHTML+=orientation+"<br>";
}
</script>

</head>
<body onload="init();" >

<h2>Orientation Test</h2>
<div id="status"></div>

</body>
</html>

Friday 20 December 2013

PhoneGap ONLINE / OFFLINE image-alert functionality: Events API

PhoneGap ONLINE / OFFLINE image-alert functionality: Events API
====================================================

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>H M S on line / off line</title>
<link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>

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

<script>
$(document).ready(function () {
// $("p").text("The DOM is now loaded and can be manipulated.");

document.addEventListener("online", onOnline, false);
document.addEventListener("offline", onOffline, false);
});
/*
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

alert("device ready"); // No Use device ready funtion call. $doc.ready funtion call used before onDeveiceReady() call
} */

// Handle the online event
//
function onOnline() {
alert("Online ");
$("#neterrmsg").hide();
$(".indicatorimage").attr('src','jquery-mobile/images/online.png'); // green color button

}
function onOffline() {
alert("offline");
$("#neterrmsg").show();
$(".indicatorimage").attr('src','jquery-mobile/images/offline.png'); //Red color button
}
</script>
</head>
<body >

<div data-role="page">
<div data-role="header" align="center" data-theme="b">
<h1 style="display:inline-block;margin:10px auto" align="center">on/off-line</h1>
<img src="" style="width:30px;float:right;padding-top:5px" class="indicatorimage" class="ui-li-aside"></img>
</div>
<div data-role="content">
<B>ON LINE / OFF LINE DATA</B>

<div id="neterrmsg" class="ex_Alrt1">
<p data-translate="lbl_netmsg"><b>The application is currently in offline mode. An active network connection is required to continue. Please try again later when an active network connection is available.</b></p>
</div>
</div>
</body>
</html>

Thursday 19 December 2013

3by3 grid view in skill street JQURY MOBILE

html page:
=======
3x3 grid view in RWD:
------------------------
<link rel="stylesheet" href="homepage.css" />

</head>

<body>

<div data-role="page" data-theme="g">
<img src="images/logo.png" width="100%" height="70px"></img>

<div data-role="content" class="ui-content ui-body-d" role="main">

<div class="home-button"><a data-saf="places" href="pviewdoctors.html" rel="external" class="ui-link"><div class="icon update"></div><div class="title">View Doctors</div></a></div>

<div class="home-button"><a data-saf="collections" href="pprofile.html" rel="external" class="ui-link"><div class="icon profile"></div><div class="title">Profile</div></a></div>

<div class="home-button"><a href="pappoinment.html" rel="external" class="ui-link"><div class="icon asset"></div><div class="title">Appointment Request</div></a></div>

<div class="home-button"><a data-saf="magazine" href="plabrecords.html" rel="external" class="ui-link"><div class="icon requirement"></div><div class="title">Lab Records</div></a></div>

<div class="home-button"><a data-saf="news" href="pmedication.html" rel="external" rel="external" class="ui-link"><div class="icon news"></div><div class="title">Current Medication</div></a></div>

<div class="home-button disabled"><a href="pmedication.html" rel="external" class="ui-link"><div class="icon events"></div><div class="title">Patient History</div></a></div>

<div class="home-button"><a data-saf="favorites" href="pbilltrack.html" rel="external" class="ui-link"><div class="icon market"></div><div class="title">Bill Tracking</div></a></div>

<div class="home-button"><a href="features.html" rel="external"class="ui-link"><div class="icon contact"></div><div class="title">Emergency</div></a></div>

<div class="home-button"><a href="#" class="ui-link"><div class="icon about"></div><div class="title">Diet & Food</div></a></div>

</div>
</div>
</body>

homepage.css:
-------------

@charset "utf-8";
.home-button {
display: inline-block;
height: 100px;
margin: 0;
padding: 20px 0 0;
text-align: center;
vertical-align: top;
width: 32%;
}/* CSS Document */

.home-button .title, .category-button .title {
color: #333333;
display: inline-block;
font-size: 15px;
font-weight: bold;
overflow: hidden;
padding-top: 0;
text-shadow: 1px 1px 0 #EFEFEF;
width: 98%;
}
.ui-body-d .ui-link {
color: #2489CE;
font-weight: bold;
}
a {
text-decoration: none;
}
.ui-content {
border-width: 0;
overflow-x: hidden;
overflow-y: visible;
padding: 15px;
}

.home-button .favorites {
background-position: 0 -192px;
}
.home-button .icon {
background: url("logo.jpg") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 64px;
position: relative;
width: 64px;
}
.home-button .news {
background: url("images/dash4.png") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 64px;
position: relative;
width: 64px;
}
.home-button .profile {
background: url("images/patienticon.jpg") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 64px;
position: relative;
width: 64px;
}
.home-button .events {
background: url("images/events6.jpg") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 64px;
position: relative;
width: 64px;
}
.home-button .update {
background: url("images/updates.png") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 64px;
position: relative;
width: 64px;
}
.home-button .asset {
background: url("images/asset.png") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 64px;
position: relative;
width: 64px;
}
.home-button .requirement {
background: url("images/req5.png") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 64px;
position: relative;
width: 64px;
}
.home-button .market {
background: url("images/market1.png") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 64px;
position: relative;
width: 64px;
}
.home-button .contact {
background: url("images/contactus.png") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 64px;
position: relative;
width: 64px;
}
.home-button .about {
background: url("images/aboutus.png") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 64px;
position: relative;
width: 64px;
}
.ui-body-d .ui-content {
background: green;
padding: 10px;
}

Wednesday 18 December 2013

How to get JSON Key and Value?

Ref LINK http://stackoverflow.com/questions/7073837/how-to-get-json-key-and-value

I have written following code to get JSON result from webservice.

function SaveUploadedDataInDB(fileName) {
            $.ajax({
                type: "POST",
                url: "SaveData.asmx/SaveFileData",
                data: "{'FileName':'" + fileName + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    var result = jQuery.parseJSON(response.d);
                    //I would like to print KEY and VALUE here.. for example
                    console.log(key+ ':' + value)
                    //Addess : D-14 and so on..
                   }
            });
        }

Here is response from webservice: enter image description here

Please help me to print Key and it's Value

3 Answers

active oldest votes

up vote30down voteaccepted

It looks like you're getting back an array. If it's always going to consist of just one element, you could do this (yes, it's pretty much the same thing as Tomalak's answer):

$.each(result[0], function(key, value){
    console.log(key, value);
});

If you might have more than one element and you'd like to iterate over them all, you could nest $.each():

$.each(result, function(key, value){
    $.each(value, function(key, value){
        console.log(key, value);
    });
});


Method : 2


$.each(result, function(key, value) {
  console.log(key+ ':' + value);
}

Loop through javascript- STRINGFY

Loop through JavaScript object: stringfy
===================================

I have a JavaScript object like the following

var p =
{
"p1": "value1",
"p2": "value2",
"p3": "value3"
};

You can use the for-in loop as shown by others. However, you also want to make sure that the key you get is an actual property of an object, and doesn't come from the prototype:

for (var key in p) {
if (p.hasOwnProperty(key)) {
alert(key + " -> " + p[key]);
}
}

Would propose that you change the alert line just for clarity to alert(key + " -> " + JSON.stringify(p[key]));

----------------
Alternate method:

22
down vote
Under ECMAScript 5, you can combine Object.keys() and Array.prototype.forEach():

var obj = { first: "John", last: "Doe" };
// Visit non-inherited enumerable keys
Object.keys(obj).forEach(function(key) {
console.log(key);
});

Iterate through multiple rows in jquery using ajax, json, and php

How to iterate through multiple rows in jquery using ajax, json, and php
=================================================
REF LINK :
http://stackoverflow.com/questions/8449860/how-to-iterate-through-multiple-rows-in-jquery-using-ajax-json-and-php

I have a php page that returns json like this:

while ($row = oci_fetch_array($stid, OCI_ASSOC+OCI_RETURN_NULLS)) {
$rows[] = $row;
}
print json_encode($rows);

When I run the php page I get back something like:

[{"phone":"1234567"},{"phone":"1234567"}]

$.ajax({
url: 'test.php',
type: 'POST',
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function(response) {

$.each(response, function() {
$.each(this, function(key, value){
alert(key + " --> " + value);
});
});

}
});

});

I got that from another SO question. This will give me my keys and value in the alert. This was just for me to make sure everything works. I have searched but cannot figure out how to just get one value. Say I wanted the name, what do I put? I have tried:

success: function(response) {
var obj = $.parseJSON(response);
alert( obj.phone );
}

But since it is multiple rows it won't work unless I have, and it also fails when I have one row like this:

echo json_encode(array("phone" => "123")

3 Answers
============

The response variable is an array of objects. To access a single index in your response variable:

var phone = response[0].phone;//replace `0` with the index you want
If you end-up iterating through your response in a loop make sure to do it like this for the best performance:

var len = response.length;
for (var i = 0; i < len; i++) {
console.log(response[i].phone);
}
Check-out this jsperf to see how much faster this type of loop is than for(i in array): http://jsperf.com/for-in-tests

jquery $.each() for objects

jquery $.each() for objects
===================
method:1
----------
<script>
$(document).ready(function() {
var data = { "programs": [ { "name":"zonealarm", "price":"500" }, { "name":"kaspersky", "price":"200" } ] };
$.each(data.programs[0], function(key,val) {
alert(key+val);
});
});
</script>

method:2
---------
<script>
var data = { "programs": [ { "name":"zonealarm", "price":"500" }, { "name":"kaspersky", "price":"200" } ] };

$.each(data.programs, function(i) {
$.each(data.programs[i], function(key,val) {
alert(key+val);
})
});
</script>

method:3
----------

<script>
$.each(data.programs, function(i, currProgram) {
$.each(currProgram, function(key,val) {
alert(key+val);
})
});
</script>

method:4
----------
<script>
$(document).ready(function() {
var data = { "programs": [ { "name":"zonealarm", "price":"500" }, { "name":"kaspersky", "price":"200" } ] };
$.each(data.programs, function(key,val) {
alert(key+val);
});
});
</script>

Monday 16 December 2013

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"}]
---------------------------------------------------------------------------------