Wednesday 28 August 2013

JQM-AutoComplete -Android emulator-working

Githup project
--------------
Rerefence link:=>href="https://github.com/commadelimited/autoComplete.js

JQM-AutoComplete -Android emulator-working
===========================================

<!DOCTYPE html>
<html>
<head>
<title>jQM Autocomplete</title>
<meta content="initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport" />
<meta name="viewport" content="width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="styles.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="jqm.autoComplete-1.5.2-min.js"></script>
<script src="code.js"></script>
</head>
<body>
<div data-role="page" id="mainPage">
<div data-role="header">
<h1>jQM Autocomplete</h1>
<div>
<select id="examples" data-mini="true" data-native-menu="false">
<option value="index.html">Remote Array</option>
<option value="complex.html">Remote Object</option>
<option value="array.html">Local Array</option>
<option value="local_complex.html">Local Object</option>
<option value="callback.html" selected="true">Callback</option>
<option value="callback-plus.html">Callback Plus</option>
<option value="search.html">Using Search Input</option>
</select>
</div>
</div>
<div data-role="content">
<h3>Callback Function</h3>
<p>
<input type="text" id="searchField" placeholder="Categories">
<ul id="suggestions" data-role="listview" data-inset="true"></ul>
</p>
<p>
<a href="https://github.com/commadelimited/autoComplete.js" data-role="button">Download the code</a>
</p>
</div>
</div>
<script>
$("#mainPage").bind("pageshow", function(e) {
var data = ['C', 'Clojure', 'Java', 'Scala', 'Objective-C', 'C++', 'PHP', 'C#', '(Visual) Basic', 'Python', 'Perl', 'JavaScript', 'Ruby', 'Visual Basic .NET', 'Transact-SQL', 'Lisp', 'Pascal', 'Bash', 'PL/SQL', 'Delphi/Object Pascal', 'Ada', 'MATLAB'];
$("#searchField").autocomplete({
target: $('#suggestions'),
source: data,
callback: function(e) {
var $a = $(e.currentTarget);
$('#searchField').val($a.text());
$("#searchField").autocomplete('clear');
},
link: 'target.html?term=',
minLength: 1
});
});
</script>
</body>
</html>

-------------------------------------------------
jqm auto complete .js file
-------------------------

/*
Name: autoComplete
Authors:
Andy Matthews: @commadelimited
Raymond Camden: @cfjedimaster

Website: http://andyMatthews.net
Version: 1.5.2
*/(function(e){"use strict";var t={method:"GET",icon:"arrow-r",cancelRequests:!1,target:e(),source:null,callback:null,link:null,minLength:0,transition:"fade",matchFromStart:!0,labelHTML:function(e){return e},onNoResults:function(){return},onLoading:function(){return},onLoadingFinished:function(){return},termParam:"term",loadingHtml:'<li data-icon="none"><a href="#">Searching...</a></li>',interval:0,builder:null,dataHandler:null,klass:null,forceFirstChoiceOnEnterKey:!0},n={},r=function(t,n,r){var s,o="";r.klass&&(o='class="'+r.klass+'"');if(r.builder)s=r.builder.apply(t.eq(0),[n,r]);else{s=[];if(n){r.dataHandler&&(n=r.dataHandler(n));e.each(n,function(t,n){e.isPlainObject(n)?s.push("<li "+o+" data-icon="+r.icon+'><a href="'+r.link+encodeURIComponent(n.value)+'" data-transition="'+r.transition+"\" data-autocomplete='"+JSON.stringify(n).replace(/'/g,"'")+"'>"+r.labelHTML(n.label)+"</a></li>"):s.push("<li "+o+" data-icon="+r.icon+'><a href="'+r.link+encodeURIComponent(n)+'" data-transition="'+r.transition+'">'+r.labelHTML(n)+"</a></li>")})}}e.isArray(s)&&(s=s.join(""));e(r.target).html(s).listview("refresh");r.callback!==null&&e.isFunction(r.callback)&&i(r);if(s.length>0)t.trigger("targetUpdated.autocomplete");else{t.trigger("targetCleared.autocomplete");r.onNoResults&&r.onNoResults()}},i=function(t){e("li a",e(t.target)).bind("click.autocomplete",function(e){e.stopPropagation();e.preventDefault();t.callback(e)})},s=function(e,t){t.html("").listview("refresh").closest("fieldset").removeClass("ui-search-active");e.trigger("targetCleared.autocomplete")},o=function(t){var i=e(this),u=i.attr("id"),a,f,l=i.jqmData("autocomplete"),c,h;Date.now||(Date.now=function(){return(new Date).valueOf()});t&&(t.keyCode===38?e(".ui-btn-active",e(l.target)).removeClass("ui-btn-active").prevAll("li.ui-btn:eq(0)").addClass("ui-btn-active").length||e(".ui-btn:last",e(l.target)).addClass("ui-btn-active"):t.keyCode===40?e(".ui-btn-active",e(l.target)).removeClass("ui-btn-active").nextAll("li.ui-btn:eq(0)").addClass("ui-btn-active").length||e(".ui-btn:first",e(l.target)).addClass("ui-btn-active"):t.keyCode===13&&l.forceFirstChoiceOnEnterKey&&(e(".ui-btn-active a",e(l.target)).click().length||e(".ui-btn:first a",e(l.target)).click()));if(l){a=i.val();if(l._lastText===a)return;l._lastText=a;if(l._retryTimeout){window.clearTimeout(l._retryTimeout);l._retryTimeout=null}if(!(!t||t.keyCode!==13&&t.keyCode!==38&&t.keyCode!==40))return;if(a.length<l.minLength)s(i,e(l.target));else{if(l.interval&&Date.now()-l._lastRequest<l.interval){l._retryTimeout=window.setTimeout(e.proxy(o,this),l.interval-Date.now()+l._lastRequest);return}l._lastRequest=Date.now();if(e.isArray(l.source)){var p=function(e){return e.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")};f=l.source.sort().filter(function(t){l.matchFromStart?(c,h=new RegExp("^"+p(a),"i")):(c,h=new RegExp(p(a),"i"));e.isPlainObject(t)?c=t.label:c=t;return h.test(c)});r(i,f,l)}else if(typeof l.source=="function")l.source(a,function(e){r(i,e,l)});else{var d={type:l.method,data:{},dataType:"json",beforeSend:function(t){if(l.cancelRequests){n[u]&&n[u].abort();n[u]=t}l.onLoading&&l.onLoadingFinished&&l.onLoading();if(l.loadingHtml){e(l.target).html(l.loadingHtml).listview("refresh");e(l.target).closest("fieldset").addClass("ui-search-active")}},success:function(e){r(i,e,l)},complete:function(){l.cancelRequests&&(n[u]=null);l.onLoadingFinished&&l.onLoadingFinished()}};if(e.isPlainObject(l.source)){l.source.callback&&l.source.callback(a,d);for(var v in l.source)v!=="callback"&&(d[v]=l.source[v])}else d.url=l.source;l.termParam&&(d.data[l.termParam]=a);e.ajax(d)}}}},u={init:function(n){var r=this;r.jqmData("autocomplete",e.extend({},t,n));var i=r.jqmData("autocomplete");return r.unbind("keyup.autocomplete").bind("keyup.autocomplete",o).next(".ui-input-clear").bind("click",function(){s(r,e(i.target))})},update:function(t){var n=this.jqmData("autocomplete");n&&this.jqmData("autocomplete",e.extend(n,t));return this},clear:function(){var t=this.jqmData("autocomplete");t&&s(this,e(t.target));return this},destroy:function(){var t=this.jqmData("autocomplete");if(t){s(this,e(t.target));this.jqmRemoveData("autocomplete");this.unbind(".autocomplete")}return this}};e.fn.autocomplete=function(e){if(u[e])return u[e].apply(this,Array.prototype.slice.call(arguments,1));if(typeof e=="object"||!e)return u.init.apply(this,arguments)}})(jQuery);

Thursday 8 August 2013

WCF Web service using Visual studio 2012. DB connection_stored procudure_getMethod

Creating WCF web service in C#.net using Visual studio 2012
===========================================================
Factor file: advance level- Get method -
-------------------------------------------------

Iservice1.cs --->Interface file
Service1.svc.cs --->service file
Web.Config .XML --->configuration file.

IService1.cs
---------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;

namespace WcfService1
{
// NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IService1" in both code and config file together.
[ServiceContract]
public interface IService1
{
[OperationContract]
[WebInvoke(Method="GET",
ResponseFormat = WebMessageFormat.Json,
BodyStyle = WebMessageBodyStyle.Wrapped,
UriTemplate = "logincheck/{pas}")]
string DoWork(string pas);

[OperationContract]
[WebInvoke(Method = "GET",
ResponseFormat = WebMessageFormat.Json,
BodyStyle = WebMessageBodyStyle.Wrapped,
UriTemplate = "userInfo/{UserName}/{Password}/{Country}/{Email}")]
string InsertUserDetails(string UserName,string Password,string Country,string Email);

[OperationContract]
[WebInvoke(Method = "GET",
ResponseFormat = WebMessageFormat.Json,
BodyStyle = WebMessageBodyStyle.Wrapped,
UriTemplate = "selectuserInfo/{username}")]
string getUser(string username);

// TODO: Add your service operations here

[OperationContract(Name = "postmethod")]
[WebInvoke(Method = "POST",
ResponseFormat = WebMessageFormat.Json,
RequestFormat = WebMessageFormat.Json,
BodyStyle = WebMessageBodyStyle.Bare,
UriTemplate = "postmethod/new")]

void CreateBooking(Booking booking);
}
[DataContract]
public class UserDetails
{
string username = string.Empty;
string password = string.Empty;
string country = string.Empty;
string email = string.Empty;

[DataMember]
public string UserName
{
get { return username; }
set { username = value; }
}
[DataMember]
public string Password
{
get { return password; }
set { password = value; }
}
[DataMember]
public string Country
{
get { return country; }
set { country = value; }
}
[DataMember]
public string Email
{
get { return email; }
set { email = value; }
}
}

// Use a data contract as illustrated in the sample below to add composite types to service operations.
[DataContract]
public class CompositeType
{
bool boolValue = true;
string stringValue = "Hello ";

[DataMember]
public bool BoolValue
{
get { return boolValue; }
set { boolValue = value; }
}

[DataMember]
public string StringValue
{
get { return stringValue; }
set { stringValue = value; }
}
}
[DataContract]
public class Booking
{
[DataMember]
public int BookingID { get; set; }

[DataMember]
public string BookingName { get; set; }

//[DataMember]
//public DateTime BookingStart { get; set; }

//[DataMember]
//public DateTime BookingEnd { get; set; }

[DataMember]
public int RoomID { get; set; }

}
}

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

Service1.svc.cs

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

using System;

using System.Collections.Generic;

using System.Linq;

using System.Runtime.Serialization;

using System.ServiceModel;

using System.ServiceModel.Web;

using System.Text;

using System.Data.SqlClient;

using System.Data;

using System.Web.Script.Serialization;

namespace WcfService1

{

// NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "Service1" in code, svc and config file together.

// NOTE: In order to launch WCF Test Client for testing this service, please select Service1.svc or Service1.svc.cs at the Solution Explorer and start debugging.

public class Service1 : IService1

{

Dictionary<string, string> dict = new Dictionary<string, string>();

public string DoWork(String msg)

{

return msg;

}

public void CreateBooking(Booking book)

{

//var newbooking = new Booking();

using (var conn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["Mycon"].ConnectionString))

{

using (var cmd = conn.CreateCommand())

{

conn.Open();

cmd.CommandText =

"insert into RegistrationTable(UserName, Password,Country,Email) values(@UserName, @Password,@Country,@Email)";

cmd.Parameters.AddWithValue("@UserName", book.UserName);

cmd.Parameters.AddWithValue("@Password",book.Password);

cmd.Parameters.AddWithValue("@Country", book.Country);

cmd.Parameters.AddWithValue("@Email", book.Email);

cmd.ExecuteNonQuery();

}

public string InsertUserDetails(string UserName, string Password, string Country, string Email)

{

string Message;

SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["Mycon"].ConnectionString);

con.Open();

SqlCommand cmd = new SqlCommand("webserviceinsert", con);

cmd.CommandType = CommandType.StoredProcedure;

cmd.Parameters.AddWithValue("@UserName", UserName);

cmd.Parameters.AddWithValue("@Password", Password);

cmd.Parameters.AddWithValue("@Country", Country);

cmd.Parameters.AddWithValue("@Email", Email);

int result = cmd.ExecuteNonQuery();

if (result == 1)

{

Message =UserName + " Details inserted successfully ";

}

else

{

Message = UserName + " Details not inserted successfully ";

}

con.Close();

return Message;

}

public string getUser(string username)

{

//string Message; string dd;

SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["Mycon"].ConnectionString);

SqlCommand cmd = new SqlCommand();

SqlDataReader reader;

cmd.CommandText = "SELECT * FROM RegistrationTable";

cmd.CommandType = CommandType.Text;

cmd.Connection = con;

con.Open();

try{

reader = cmd.ExecuteReader();

// Data is accessible through the DataReader object here.

if (reader.HasRows)

{

while (reader.Read())

{

dict.Add("UserName", reader["UserName"].ToString().Trim());

dict.Add("Password", reader["Password"].ToString().Trim());

dict.Add("Country", reader["Country"].ToString().Trim());

dict.Add("Email", reader["Email"].ToString().Trim());

break;

}

catch (Exception ex)

{

dict.Add("cmnt", "my" + ex.Message.ToString());

// return new JavaScriptSerializer().Serialize(dict);

}

con.Close();

return new JavaScriptSerializer().Serialize(dict);

}

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

Web.Config XML file

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

<?xml version="1.0"?>

</connectionStrings>

<system.web>

</system.web>

<system.serviceModel>

</security>

</binding>

</wsHttpBinding>

</bindings>

</service>

</services>

</behavior>

</endpointBehaviors>

</behavior>

</serviceBehaviors>

</behaviors>

</system.serviceModel>

<system.webServer>

<!--

To browse web app root directory during debugging, set the value below to true.

Set to false before deployment to avoid disclosing web app folder information.

-->

</system.webServer>

</configuration>

Move a table from one database to another database SQL Server

Move a table from one database to another database SQL Server
==============================================================
TYPE - 1
---------
If the databases are on same server then do it like this,\
-----------------------------------------------------------

select * into DB_2.T1 from DB_1.[dbo].[T1]

if you have databases on different servers than you have to create a linked server.

On second thought you can generate "create tables scripts" and run them on second database

TYPE -2
--------
SQL Server Management Studio -manual
-----------------------------------------------------------

In SQL Server Management Studio you have Import and Export Wizard :

Right click on db name(DB_2)
Tasks
Import Data
Choose data source (DB_1)
Choose destination (DB_2)
Choose copy data from one ore more tables
Choose your table (T1)
Finish

TYPE -3
--------
In object Explorer - use query analyser
-----------------------------------------------------------

With help of my office friends , this is the solution I figured out.

In object Explorer , go to source database and select table to move.

Right click , Script Table As -> CREATE TO -> New Query Editor Window. This opens query window with the SQL queries specifying schema , indexes , constraints on the table.

You can change table name in CREATE TABLE section and make other changes...

Change database name in first line USE <DATABASE> to Target database and execute the the query.

Thanks.

Mobile_PG_JQM_Tips_Tricks-Design

Development testing Mobile phonegap JQuery mobile Applcaiton :Desgining
-----------------------------------------------------------------------

For designing the application Use dreamweaver and make site.

with help of Android or iPAD connect via Wi-fi.

Particular IP type in device url will get tab desing application view.

Friday 2 August 2013

Spring Board / Grid View in JQM_Phonegap

GRID VIEW/SPRING ICON POSITION IN MOBILE APP

<head>
<style type="text/css">

/* icon menu css */
.iconList {margin-top: -10px !important;margin-left: 30px !important;} /* optional */
.iconList li {display: inline; float: left; width: 44%; min-width: 55px; max-width: 120px; padding: 0; border-width: 0 !important; background: none !important;}
.iconList li:first-child {border-width: 0 !important; border: 1px solid #ccc; border-top-right-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px;}
.iconList li:last-child {border-bottom-width: 0 !important; border-bottom-left-radius: 0px; -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px;}
.iconList li div.ui-btn-inner {width: auto; border-width: 0 !important;}
.iconList li a {margin-right: 0; padding: 0 10px 0 0 !important;}
.iconList li img {margin-right: 0; padding: 0.25em; width: 100%; position: static !important; float: none !important;}
.iconList li h3 {display: block; max-width: 80px; position: static !important; margin: 0 0 0 0.25em; padding-top: 0; font-size: 80%; font-weight: normal; text-align: center;width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-shadow: none;}

</style>

<head>

<body>

<div>
<ul data-role="listview" class="iconList">
<li data-icon="false"><a href="#profile"><img src="images/gngphoto.jpg" alt="one" /><h3>one</h3></a></li>
<li data-icon="false"><a href="#profile"><img src="images/gngphoto.jpg" alt="two" /><h3>Two</h3></a></li>
<li data-icon="false"><a href="#profile"><img src="images/gngphoto.jpg" alt="three" /><h3>Three</h3></a></li>
<li data-icon="false"><a href="#profile"><img src="images/gngphoto.jpg" alt="Four" /><h3>Four</h3></a></li>
<li data-icon="false"><a href="#profile"><img src="images/gngphoto.jpg" alt="Four" /><h3>Four</h3></a></li>
<li data-icon="false"><a href="#profile"><img src="images/gngphoto.jpg" alt="Four" /><h3>Four</h3></a></li>
</ul>

</div>
</body>

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

FULL EXAMPLE
------------

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0.min.js" type="text/javascript"></script>

<style type="text/css">

/* icon menu css */
.iconList {margin-top: -10px !important;margin-left: 30px !important;} /* optional */
.iconList li {display: inline; float: left; width: 44%; min-width: 55px; max-width: 120px; padding: 0; border-width: 0 !important; background: none !important;}
.iconList li:first-child {border-width: 0 !important; border: 1px solid #ccc; border-top-right-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px;}
.iconList li:last-child {border-bottom-width: 0 !important; border-bottom-left-radius: 0px; -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px;}
.iconList li div.ui-btn-inner {width: auto; border-width: 0 !important;}
.iconList li a {margin-right: 0; padding: 0 10px 0 0 !important;}
.iconList li img {margin-right: 0; padding: 0.25em; width: 100%; position: static !important; float: none !important;}
.iconList li h3 {display: block; max-width: 80px; position: static !important; margin: 0 0 0 0.25em; padding-top: 0; font-size: 80%; font-weight: normal; text-align: center;width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-shadow: none;}

</style>
</head>
<body>

<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#page2">Genral shift Attendence</a></li>
<li><a href="#page3">Camera API</a></li>
<li><a href="#getinfo">Corporate Information Services </a></li>
</ul>
<h1>Example</h1>
<p>Find Contacts</p>
</div>
<div data-role="footer">
<h4>Mobile HRMS</h4>
</div>
</div>

<div data-role="page" id="page2">
<div data-role="header" data-position="fixed">
<h1>Attendence </h1>
</div>
<div data-role="content">

<ul data-role="listview" data-inset="true">
<li><a href="#">
<img src="images/gngphoto.jpg">
<h2>Employee Full Name </h2>
<p>Employee Desgnation/ Employee Code</p></a>
</li>

<fieldset data-role="controlgroup" data-type="horizontal" style="text-align: center">
<div style="width: 600px; margin: 0 auto;">
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">In Time</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Out Time</label>
</div>
</fieldset>
<div class="ui-grid-a">
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">17-05-2013<br/>09:45 </div>

</div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">17-05-2013<br/>18:45 </div>

</div>
</div>

</ul>
<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-mini="true">
<div data-role="collapsible">
<h3>Daily Attadence report</h3>
<p><ul><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li></ul></p>
</div>
<div data-role="collapsible">
<h3>Monthly Attadence report</h3>
<p><ul><li>2</li><li>2</li><li>2</li><li>2</li><li>2</li></ul></p>
</div>
<div data-role="collapsible">
<h3>Annual Attadence report</h3>
<p><ul><li>3</li><li>3</li><li>3</li><li>3</li><li>3</li></ul></p>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div>
</div>

<div data-role="page" id="page3">
<div data-role="header">
<h1>Page Three</h1>
</div>
<div data-role="content">

<div>
<ul data-role="listview" class="iconList">
<li data-icon="false"><a href="#profile"><img src="images/gngphoto.jpg" alt="one" /><h3>one</h3></a></li>
<li data-icon="false"><a href="#profile"><img src="images/gngphoto.jpg" alt="two" /><h3>Two</h3></a></li>
<li data-icon="false"><a href="#profile"><img src="images/gngphoto.jpg" alt="three" /><h3>Three</h3></a></li>
<li data-icon="false"><a href="#profile"><img src="images/gngphoto.jpg" alt="Four" /><h3>Four</h3></a></li>
<li data-icon="false"><a href="#profile"><img src="images/gngphoto.jpg" alt="Four" /><h3>Four</h3></a></li>
<li data-icon="false"><a href="#profile"><img src="images/gngphoto.jpg" alt="Four" /><h3>Four</h3></a></li>
</ul>

</div>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>

<div data-role="page" id="getinfo">
<div data-role="header">
<h1>Corporate Directory</h1>
</div>
<div data-role="content">

<form name="corprategetdir" method="post" action="javascript:getinfo()">

Search By::
<div data-role="fieldcontain">
<label for="search-2"> Name :</label>
<input type="search" name="ename" id="ename" value="" />
</div>
<div data-role="fieldcontain">
<label for="search-2">Employee ID:</label>
<input type="search" name="eid" id="eid" value="" />
</div>


<input type="submit" value="Submit" data-inline="true"/>
<input type="reset" value="Reset Values" data-inline="true" data-theme="b" />


<ul data-role="listview" data-inset="true" data-theme="c">

<li data-icon="gear" id="mailid"><a href="#">Mail ID:</a></li>
<li data-icon="info" id="mobileno"><a href="#">Mobile No:</a></li>

</ul>

</form>

</div>

<div data-role="footer">
<h4>Mobile HRMS -7</h4>
</div>
</div>

</body>
</html>

Managging toolbar in JQM_phonegap

Managing toolbars

Manipulating toolbars is done primarily through the use of jQuery methods. Utility methods were also added by jQuery Mobile, as the navbar () method to facilitate the management of navigation bars. Navigation bars are associated with the standard navbar component.

Dynamically create a toolbar

We know that there are two types of toolbars: header (top of the window) and footer (bottom of the window). The dynamic creation of a toolbar will mainly concern those of footer type as header toolbars are usually included in the HTML of the window to allow navigation between windows using the Back button.

Dynamic creation of a footer toolbar

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<p> Window content </p>

</div>

</body>

</html>

var html = "";

html += "<div data-role=footer data-position=fixed>";

html += "<h1> Footer part </h1>";

html += "</div>";

$("#home").append (html);

</script>

http://the-jquerymobile-tutorial.org/images/jQueryMobile-en_html_m5afcc1ed.gif

Turning an HTML element into a jQuery Mobile toolbar

Look at the HTML generated by the previous program using Firebug:

http://the-jquerymobile-tutorial.org/images/jQueryMobile-en_html_m2e12121a.gif

The header toolbar has the ui-bar-a and ui-header CSS classes, while the footer toolbar has the ui-bar-a and ui-footer classes. The <h1> element included in each of them, now has the ui-title class to center the text on the display. Note that ui-bar-a class corresponds to the default theme (here "a" theme). If we indicated the data-theme attribute for one of the toolbars, the ui-bar-a class would be replaced by the corresponding class (eg ui-bar-e for the "e" theme).

Insert toolbars by Ajax

Rather than create the footer toolbar dynamically in the JavaScript code, insert it from the HTML code downloaded from the server by Ajax.

Insert a footer toolbar by Ajax

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<p> Window content </p>

</div>

</body>

</html>

$.ajax (

{

url : "action.php",

complete : function (xhr, result)

{

if (result != "success") return;

var response = xhr.responseText;

$("#home").append (response);

$("#home").fixHeaderFooter ();

}

});

</script>

Notice the call to fixHeaderFooter () method used on the <div> corresponding to the window. It allows to search for toolbars that have the data-position="fixed" attribute, and position them to the appropriate fixed locations (here at the bottom of the window).

action.php file

<?
$html = "";
$html .= "<div id=footer class='ui-bar-e ui-footer' data-position=fixed>";
$html .= "<h1 class=ui-title>Footer part</h1>";
$html .= "</div>";
echo utf8_encode ($html);
?>

The toolbar is described from the ui-bar-e and ui-footer CSS classes, while the data-position="fixed" attribute will be used by the fixHeaderFooter () method in JavaScript code. Similarly the<h1> element is described using the ui-title class, to center the content.

http://the-jquerymobile-tutorial.org/images/jQueryMobile-en_html_386c1ecd.gif

Insert navigation bars by Ajax

Change our footer toolbar so that it contains a navigation bar (navbar).

Insert a navigation bar in the footer toolbar by Ajax

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<p> Window content </p>

</div>

</body>

</html>

$.ajax (

{

url : "action.php",

complete : function (xhr, result)

{

if (result != "success") return;

var response = xhr.responseText;

$("#home").append (response);

$("#home").fixHeaderFooter ();

$("#navbar").navbar ();

}

});

</script>

The code is identical to the previous, except for using the navbar () method to transform the element that used it into a navigation bar.

action.php file

<?
$html = "";
$html .= "<div id=footer class='ui-bar-a ui-footer' data-position=fixed>";
$html .=   "<h1 class=ui-title>Footer part</h1>";
$html .=   "<div id=navbar>";
$html .=     "<ul>";
$html .=       "<li><a href=# data-icon=refresh>Refresh</a></li>";
$html .=       "<li><a href=# data-icon=info>Help</a></li>";
$html .=       "<li><a href=# data-icon=delete>Close</a></li>";
$html .=     "</ul>";
$html .=   "</div>";
$html .= "</div>";
echo utf8_encode ($html);
?>

The navigation bar is simply described in the traditional way in the HTML returned by the server.

http://the-jquerymobile-tutorial.org/images/jQueryMobile-en_html_2447240f.gif

If we remove the call to the navbar () method, the HTML is no longer transformed by jQuery Mobile and display becomes:

http://the-jquerymobile-tutorial.org/images/jQueryMobile-en_html_6b1694ad.gif

Manage events on toolbars

The toolbar is generally composed of buttons to perform actions. In the case of a navigation bar navbar, it is composed of <li> elements. You can use the click event (or the associated vclick virtual event) to handle clicks on these items.

Use the click event in a navigation bar

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<p> Window content </p>

</div>

<ul>

</ul>

</div>

</body>

</html>

$("li").bind ("click", function (event)

{

alert ($(this).find ("a").text ());

});

</script>

For example by clicking the second button from the navigation bar:

Customize toolbars

Consider the navigation bar above, in which we insert only three <li> elements to simplify the display. The HTML generated by jQuery Mobile displays like this in Firebug:

http://the-jquerymobile-tutorial.org/images/jQueryMobile-en_html_m9582fca.gif

The navigation bar has the ui-navbar class, in which each <li> element is defined in a table (in the jQuery Mobile sense). Each <li> item contains a <a> link corresponding to the button associated of ui-btn class. This link will have the ui-btn-active CSS class when it is clicked, and loses if another link is clicked.

Use these CSS classes to change the look of the navigation bar:

Styling navigation bars

<!DOCTYPE html>

<html>

<head>

<style type=text/css>

.ui-navbar a.ui-btn{

font-size : 16px;

}

.ui-navbar a.ui-btn.ui-btn-active{

font-style : italic;

background : red;

}

</style>

</head>

<body>

</div>

<p> Window content </p>

</div>

<ul>

</ul>

</div>

</body>

</html>

Methods managing fixed toolbars

To help us manage the toolbars of fixed type (those with the data-position="fixed" attribute), jQuery Mobile has created some methods to manage them.

Methods managing fixed toolbars

Method	Signification
$(selector) .fixHeaderFooter ();	Search toolbars with the data-position = "fixed" attribute in the descendants of the elements represented by the specified selector, and transforms them into fixed toolbars. This allows to dynamically create these toolbars (see an earlier example in this chapter)
$.mobile .fixedToolbars .setTouchToggleEnabled (enable)	Enables (if enable is true) or disables (if enable is false) the ability to display and hide fixed toolbars by clicking in the window. By default, clicking in the window displays or hides fixed toolbars present in it. To disable this default, use $.mobile .fixedToolbars .setTouchToggleEnabled (false).
$.mobile .fixedToolbars .show (immediately)	Allows you to reposition the fixed toolbars in the window, if the modification of the contents of the window has changed their position. The immediately parameter indicates whether repositioning occurs immediately (if true) or if it is done by a fade effect (if false, the default).
$.mobile .fixedToolbars .hide ()	Allows to hide the fixed toolbars in the window. They are redisplayed at the next click in the window (unless this function has been disabled by $.mobile .fixedToolbars .setTouchToggleEnabled (false).

Examples of manipulation of toolbars

Manage a tab system in a navigation bar

We want to display a different content in the window at every click of a button on the navigation bar. It therefore retains the same window, but different content for each selected button. This is equivalent to manage a system of tabs in the window.

Manage tabs in the navigation bar

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<p> Window content </p>

</div>

<ul>

</ul>

</div>

</body>

</html>

$("li").bind ("vclick", function (event)

{

var id = this.id;

if (id == "menu1") $("#home div:jqmData(role=content)")

.html ("<p> Content menu 1 </p>");

else if (id == "menu2") $("#home div:jqmData(role=content)")

.html ("<p> Content menu 2 </p>");

else if (id == "menu3") $("#home div:jqmData(role=content)")

.html ("<p> Content menu 3 </p>");

});

</script>

At each click on the buttons in the navigation bar, the contents of the window is changed. However, at the first display, no button is selected. To select one of them from the start, just simulate a click on this:

Simulate a click on the first button

$("div:jqmData(role=navbar)").bind ("navbarcreate", function (event)

{

$("li#menu1 a.ui-btn").trigger ("vclick");

});

Note that this treatment can only take place when the navigation bar was created (navbarcreate event), otherwise the <a> link of ui-btn class does not exist (because the HTML is not yet transformed by jQuery Mobile).

Manage the content of the tabs by Ajax

Rather than modifying the contents of the tabs from the HTML contained in the JavaScript code, retrieve the HTML code from the server by Ajax.

Retrieve the contents of the tabs by Ajax

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<p> Window content </p>

</div>

<ul>

</ul>

</div>

</body>

</html>

$("#home").bind ("pagecreate", function (event)

{

$("li#menu1 a.ui-btn").trigger ("vclick");

});

$("li").bind ("vclick", function (event)

{

var id = this.id;

$.ajax (

{

url : "action.php",

data : { menu : id },

complete : function (xhr, result)

{

if (result != "success") return;

var response = xhr.responseText;

$("#home div:jqmData(role=content)").html (response);

}

});

</script>

action.php file

<?
$menu = $_REQUEST["menu"];

$html = "";
if ($menu == "menu1")
  $html .=   "<p> Content menu 1 </p>";
else if ($menu == "menu2")
  $html .=   "<p> Content menu 2 </p>";
else if ($menu == "menu3")
  $html .=   "<p> Content menu 3 </p>";

echo utf8_encode ($html);
?>

Full Stack Angular, React, Spring Boot Ganpathi

Wednesday 28 August 2013

JQM-AutoComplete -Android emulator-working

Thursday 8 August 2013

WCF Web service using Visual studio 2012. DB connection_stored procudure_getMethod

Move a table from one database to another database SQL Server

Mobile_PG_JQM_Tips_Tricks-Design

Friday 2 August 2013

Spring Board / Grid View in JQM_Phonegap

Managging toolbar in JQM_phonegap

Managing toolbars

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