tag:blogger.com,1999:blog-78127303962182560962024-02-08T16:34:51.786+05:30JQuerySareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.comBlogger35125tag:blogger.com,1999:blog-7812730396218256096.post-20308875263857630452012-07-04T15:44:00.002+05:302012-07-06T14:37:16.637+05:30.map function<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
The .map() method is particularly useful for getting or setting the value of a collection of elements.<br />
<a href="http://api.jquery.com/jQuery.map/" target="_blank">JQuery.map()</a> can be used when to save as array<br />
<br />
var ArrayVal = $('input[name="textbox1[]"]').map(function () { return $(this).val() }).get().join(',');<br />
//the ArrayVal will be comma seperated string<br />
<br />
//on retreival part deftn<br />
jQuery.map( arrayOrObject, callback( value, indexOrKey ) )<br />
<br />
$.each(ArrayVal, function (key, value) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>alert("key :"+key + " val : " + value);<br />
});<br />
<br />
<br />
<table><br />
<tr><td><span style="background-color: white;"><input type="text" id="txt1" name="textbox1[]" /></span><span style="background-color: white;"></td></tr></span><br />
<tr><td><span style="background-color: white;"><input type="text" id="txt2" name="textbox1[]" /></span><span style="background-color: white;"></td></tr></span><br />
<tr><td><span style="background-color: white;"><input type="text" id="txt3" name="textbox1[]" /></span><span style="background-color: white;"></td></tr></span><br />
<tr><td><span style="background-color: white;"><input type="text" id="txt4" name="textbox1[]" /></span><span style="background-color: white;"></td></tr></span><br />
</table><br />
<br />
the input type can be either text, checkbox, radio, etc</div>Sareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.com0tag:blogger.com,1999:blog-7812730396218256096.post-47278820280288886652012-06-15T14:40:00.002+05:302012-07-06T14:40:23.797+05:30Radio button change function<div dir="ltr" style="text-align: left;" trbidi="on">
/*<br />
if there exist a group of <a href="http://www.w3schools.com/html/" target="_blank">html</a> radio button having same name attribute their click or change can be determined as follows<br />
*/<br />
$("input:radio[name=Test]").change(function () { <br />
var value = $(this).val();<br />
});<br />
<br />
Inside body tag<br />
<br />
<input type="radio" name="Test" value="1"/><br />
<input type="radio" name="Test" value="2"/><br />
<input type="radio" name="Test" value="3"/></div>Sareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.com0tag:blogger.com,1999:blog-7812730396218256096.post-81202824263192794812012-06-12T18:18:00.000+05:302012-07-06T14:42:20.207+05:30EXPANDING COLLAPSING DIV<div dir="ltr" style="text-align: left;" trbidi="on">
/*<br />
if there a situation that need to have arrange div as blocks/bricks structure then follow this<br />
*/<br />
<br />
STEP1:<br />
<link href="../Script/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" /> <br />
<script src="../Script/jquery.min.js" type="text/javascript"></script><br />
STEP2:<br />
<br />
<script type="text/javascript"><br />
$(document).ready(function () {<br />
$("#expanderHead").click(function () {<br />
$("#expanderContent").slideToggle();<br />
if ($("#expanderSign").text() == "+") {<br />
$("#expanderSign").html("−")<br />
}<br />
else {<br />
$("#expanderSign").text("+")<br />
}<br />
});<br />
});<br />
</script><br />
STEP3:<br />
<br />
<div id="expanderHead" style="cursor: pointer; background-color: Gray; width: 250px;padding-left:10px" class="ui-corner-all"><br />
EXPANDING COLLAPSING DIV <span id="expanderSign" style="color: Black;font-size:larger"><b>+</b></span><br />
</div><br />
<div id="expanderContent" style="display: none;padding-left:30px"><br />
content<br /><br />
content<br /><br />
content<br /><br />
content<br /><br />
content<br /><br />
</div><br />
<br /></div>Sareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.com0tag:blogger.com,1999:blog-7812730396218256096.post-13472419344304404812012-06-12T16:48:00.002+05:302012-07-06T14:51:55.616+05:30Expand Collapse (toogle) div<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
/*<br />
if there a situation that need to have arrange div as blocks/bricks structure then follow this<br />
*/<br />
<br />
STEP1:<br />
<script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js</a>" type="text/javascript"></script><br />
STEP2:<br />
<div class="divHeading"><br />
Heading 1<br />
</div><br />
<div class="divContent"><br />
contents here 1<br />
</div><br />
<div class="divHeading"><br />
Heading 2<br />
</div><br />
<div class="divContent"><br />
contents here 2<br />
</div><br />
<br />
STEP3:<br />
.divHeading {<br />
margin: 1px;<br />
color: #fff;<br />
padding: 3px 10px;<br />
cursor: pointer;<br />
position: relative;<br />
background-color:#c30;<br />
}<br />
.divContent {<br />
padding: 5px 10px;<br />
background-color:#fafafa;<br />
}<br />
<br />
STEP4:<br />
<script type="text/javascript"><br />
$(document).ready(function() {<br />
$(".divContent").hide();<br />
//toggle the componenet with class msg_body<br />
$(".divHeading").click(function()<br />
{<br />
$(this).next(".divContent").slideToggle(500);<br />
});<br />
});<br />
</script></div>Sareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.com0tag:blogger.com,1999:blog-7812730396218256096.post-23929815254229209842012-05-30T09:40:00.007+05:302012-05-30T09:40:57.942+05:30File Upload<div dir="ltr" style="text-align: left;" trbidi="on">
PAGE1.aspx<br /> <img src="../images/upload-new.png" title="Upload New Documents" id="TestNewUpload" <br />style="cursor:pointer; margin-left:870px;" href="PAGE2.aspx"/><br /><br /><br />$("#TestNewUpload").live('click', function (e) {<br /><br /> var page = $(this).attr("href")<br /> page += "?ID=" + TestID + "&Type =" +1;<br /> var $dialog = $('<div></div>')<br /> .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')<br /> .dialog({<br /> autoOpen: false,<br /> modal: true,<br /> height: 450,<br /> width: 600,<br /> title: "Upload document",<br /> buttons: {<br /> "Close": function () {<br /> $dialog.dialog('close');<br /> }<br />
},<br /> close: function (event, ui) {<br /> }<br /> });<br /> $dialog.dialog('open');<br /> e.preventDefault();<br /> }); <br /><br />PAGE1 END<br /><br />PAGE2.aspx<br /><form id="form1" runat="server"><br /> <div><br /> <asp:ScriptManager ID="ScriptManager1" runat="server"><br /> </asp:ScriptManager><br /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"><br /> <Triggers><br /> <asp:PostBackTrigger ControlID="btnUpload" /><br /> </Triggers><br /> <ContentTemplate><br /> <div id="divUpload" runat="server"><br /> <table><br /> <tr><td>Title</td><td><br />
<asp:TextBox ID="txtTitle" runat="server" MaxLength="99"></asp:TextBox><br /> </td></tr><br /> <tr><td>Document</td><br /> <td><asp:FileUpload ID="fuTestUploads" runat="server" /></td></tr> <br /> <tr><td></td><br /> <td><br /> <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" /><br /> </td></tr><br /> </table><br /> </div><br /> <div id="divMessage" runat="server" class="centered"><br /> <center><br /> <span style="font-weight:bold; font-size:15px;"> Document uploaded successfully! </span><br /> </center><br /> <br /><br /> <asp:LinkButton ID="lbtnUploadMore" runat="server" <br /> onclick="lbtnUploadMore_Click">Upload More</asp:LinkButton><br /> </div><br /> </ContentTemplate><br /> </asp:UpdatePanel><br /> <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"><br /> <ProgressTemplate><br /> <div class="centered"><br /> <img src="../images/ajax-loader.gif" alt="" /><br /> &nbsp; Please wait...<br /> </div><br /> </ProgressTemplate><br /> </asp:UpdateProgress><br /> </div><br /> </form><br /><br />//ASPX.CS<br />using System;<br />using System.Collections.Generic;<br />using System.Linq;<br />using System.Web;<br />using System.Web.UI;<br />using System.Web.UI.WebControls;<br />using System.Security.AccessControl;<br /><br />namespace TESTUI<br />{<br /> public partial class PAGE2: System.Web.UI.Page<br /> {<br /> protected void Page_Load(object sender, EventArgs e)<br /> {<br /> if (!IsPostBack)<br /> {<br /> divMessage.Visible = false;<br /> trDiscipline.Visible = false;<br /> int RegulationType = Convert.ToInt32(Request.QueryString["RegulationType"].ToString());<br /> if (RegulationType == 3)<br /> {<br /> trDiscipline.Visible = true;<br /> }<br /> }<br /> }<br /><br /> private void DisplayMessage(string msg)<br /> {<br /> string strText = "alert('" + msg + "')";<br /> string myScript = String.Format(strText);<br /> ScriptManager.RegisterStartupScript(this, this.GetType(), "MyScript", myScript, true);<br /> }<br /><br /> protected void btnUpload_Click(object sender, EventArgs e)<br /> {<br /> if (!fuTestUploads.HasFile)<br /> {<br /> return;<br /> }<br /> int TestID = Convert.ToInt32(Request.QueryString["TestID"].ToString());<br /> int Type = Convert.ToInt32(Request.QueryString["Type"].ToString());<br /> <br /><br /> string Title = txtDocumentTitle.Text;<br /> string FileName = System.IO.Path.GetFileName(fuTestUploads.FileName);<br /> string Extension = System.IO.Path.GetExtension(fuTestUploads.PostedFile.FileName);<br /> int Size = fuTestUploads.PostedFile.ContentLength;<br /><br /> ServiceReference1.OFRTWCFServiceClient Proxy = new ServiceReference1.OFRTWCFServiceClient();<br /><br /> int FileID = Proxy.AddDocument(Title, Type, FileName, Extension, Size, TestID);<br /><br /> if (FileID != 0)<br /> {<br /> string path = Server.MapPath( "~/files/" + FileID.ToString());<br /> <br /> //DirectorySecurity scr = new DirectorySecurity(AppDomain.CurrentDomain.BaseDirectory.ToString(), AccessControlSections.All);<br /> System.IO.Directory.CreateDirectory(path);<br /> fuRegulationsUploads.PostedFile.SaveAs(path + "/" + fuTestUploads.PostedFile.FileName);<br /> txtDocumentTitle.Text = string.Empty;<br /> divUpload.Visible = false;<br /> divMessage.Visible = true;<br /> }<br /> }<br /><br /> protected void lbtnUploadMore_Click(object sender, EventArgs e)<br /> {<br /> divUpload.Visible = true;<br /> divMessage.Visible = false;<br /> }<br /> }<br />}<br />PAGE2 END</div>Sareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.com4tag:blogger.com,1999:blog-7812730396218256096.post-17754979188358103692012-05-29T17:31:00.001+05:302012-05-29T17:31:07.416+05:30File Download<div dir="ltr" style="text-align: left;" trbidi="on">
To download a file<br />
1. Create a new aspx page and code as follows<br /><br /><br />//TEST.ASPX<br /><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestFileDownload.aspx.cs" Inherits="TESTUI.TestFileDownload" %><br /><br /><br />//TEST.ASPX.CS<br />using System;<br />using System.Collections.Generic;<br />using System.Linq;<br />using System.Web;<br />using System.Web.UI;<br />using System.Web.UI.WebControls;<br />using System.Net;<br />using System.IO;<br />using System.Threading;<br /><br />namespace TestUI<br />{<br /> public partial class TestFileDownload: System.Web.UI.Page<br /> {<br /> protected void Page_Load(object sender, EventArgs e)<br /> {<br /> string FileId = Request.QueryString["FileID"].ToString();<br /> string FileName = Request.QueryString["FileName"].ToString();<br /> <br /> string path = Server.MapPath( "~/files/" + FileId + "/" + FileName);<br /><br /> fileDownload(FileName, path);<br /><br /> }<br /><br /> private void fileDownload(string fileName, string fileUrl)<br /> {<br /> Page.Response.Clear();<br /> bool success = ResponseFile(Page.Request, Page.Response, fileName, fileUrl, 1024000);<br /> if (!success)<br /> Response.Write("Downloading Error!");<br /> Page.Response.End();<br /><br /> }<br /> public static bool ResponseFile(HttpRequest _Request, HttpResponse _Response, string _fileName, string _fullPath, long _speed)<br /> {<br /> try<br /> {<br /> FileStream myFile = new FileStream(_fullPath, FileMode.Open, FileAccess.Read, FileShare.ReadWrite);<br /> BinaryReader br = new BinaryReader(myFile);<br /> try<br /> {<br /> _Response.AddHeader("Accept-Ranges", "bytes");<br /> _Response.Buffer = false;<br /> long fileLength = myFile.Length;<br /> long startBytes = 0;<br /><br /> int pack = 10240; //10K bytes<br /> int sleep = (int)Math.Floor((double)(1000 * pack / _speed)) + 1;<br /> if (_Request.Headers["Range"] != null)<br /> {<br /> _Response.StatusCode = 206;<br /> string[] range = _Request.Headers["Range"].Split(new char[] { '=', '-' });<br /> startBytes = Convert.ToInt64(range[1]);<br /> }<br /> _Response.AddHeader("Content-Length", (fileLength - startBytes).ToString());<br /> if (startBytes != 0)<br /> {<br /> _Response.AddHeader("Content-Range", string.Format(" bytes {0}-{1}/{2}", startBytes, fileLength - 1, fileLength));<br /> }<br /> _Response.AddHeader("Connection", "Keep-Alive");<br /> <br /> _Response.ContentType = "application/octet-stream";<br /> _Response.ClearContent();<br /> _fileName = _fileName.Replace(" ", "");<br /> _Response.AddHeader("Content-Disposition", "attachment;filename=" + _fileName);<br /><br /> br.BaseStream.Seek(startBytes, SeekOrigin.Begin);<br /> int maxCount = (int)Math.Floor((double)((fileLength - startBytes) / pack)) + 1;<br /><br /> for (int i = 0; i < maxCount; i++)<br /> {<br /> if (_Response.IsClientConnected)<br /> {<br /> _Response.BinaryWrite(br.ReadBytes(pack));<br /> Thread.Sleep(sleep);<br /> }<br /> else<br /> {<br /> i = maxCount;<br /> }<br /> }<br /> }<br /> catch<br /> {<br /> return false;<br /> }<br /> finally<br /> {<br /> br.Close();<br /> myFile.Close();<br /> }<br /> }<br /> catch<br /> {<br /> return false;<br /> }<br /> return true;<br /> }<br /> }<br />}<br />
<br />
<br />
<br />2. Pass Parameters ie FileID and FileName to download<br />
<br />
var FileID = 1;<br />
var FileName = "TestFileName";<br />
FileName = FileName.replace(/&/g, "%26");<br />
<br />
window.open('../TestFileDownload.aspx?FileID=' + FileID + '&FileName=' + FileName, '_blank');</div>Sareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.com0tag:blogger.com,1999:blog-7812730396218256096.post-48208994481051156462012-05-29T17:20:00.002+05:302012-06-27T12:48:23.737+05:30Open a new page as Popup<div dir="ltr" style="text-align: left;" trbidi="on">
var page = "../TestPage.aspx";<br />
page += '?ID=' + TestID + '&ProjID=' + Pid ;<br />
<br />
var $dialog = $('<div></div>')<br />
.html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')<br />
.dialog({<br />
autoOpen: false,<br />
modal: true,<br />
height: 700,<br />
width: 1200,<br />
title: "Upload Documents For " + Upload,<br />
buttons: {<br />
"Close": function () {<br />
GetDetails();<br />
$dialog.dialog('close');<br />
}<br />
},<br />
close: function (event, ui) {<br />
GetDetails();<br />
}<br />
});<br />
$dialog.dialog('open');<br />
e.preventDefault();<br />
<br />
<br />
<br />
//Call this on a button click </div>Sareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.com2tag:blogger.com,1999:blog-7812730396218256096.post-69382996041967389982012-05-29T17:10:00.001+05:302012-05-29T17:13:55.270+05:30Delegate<div dir="ltr" style="text-align: left;" trbidi="on">
$("#divTest").delegate('table select', 'change', function () {<br />
var tempddl1 = $(this).parent().find("select option:selected").eq(0).text();<br />
var tempddl2 = $(this).parent().find("select option:selected").eq(1).text(); <br />
alert("do something");<br />
});<br />
<br />
<br />
<div id="divTest"><br />
<table><tr><td><br />
<select><br />
<option>One</option><br />
<option>Two</option><br />
</select><br />
Some seperation <br />
<select><br />
<option>One1</option><br />
<option>Two1</option><br />
</select><br />
<br />
</td></tr></table><br />
<br />
<table><tr><td><br />
<select><br />
<option>One</option><br />
<option>Two</option><br />
</select><br />
Some seperation<br />
<select><br />
<option>One1</option><br />
<option>Two1</option><br />
</select><br />
</td></tr></table><br />
</div><br />
<br />
<br />
//to do an action on the change of any SELECT inthe parent DIV<br />
//use delegate</div>Sareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.com0tag:blogger.com,1999:blog-7812730396218256096.post-26070927704621444592012-05-25T16:04:00.006+05:302012-05-25T16:04:59.269+05:30Clone Function<div dir="ltr" style="text-align: left;" trbidi="on">
1. USE JS<br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script><br />
<br />
2. INSIDE DOCUMENT.READY<br />
//START 2 <br />
//NEW CLONED ELEMENT ADDED ON CLICKING <br />
$("#imgAdd").click(function () {<br /> $("#tblTest").find("tr:last").after($("#tblTest").find("tr:last").clone());<br />
//IF YOU WANT TO FILL NEWILY CLONED THING WITH A TEXT<br /> //$("#tblTest").find("tr:last").find("input:text").val("hello test");<br /> });<br />// REMOVING LAST ADDED ITEM<br />
$("#imgRemove").click(function () {<br /> if ($("#tblTest").find("tr:first").nextAll().length >= 1) {<br /> $("#tblTest").find("tr:last").remove();<br /> }<br /> });<br />
//END 2<br />
//IF TO REMOVE ALL CLONED ELEMENTS USE<br />
//$("#tblTest").find("tr:first").remove();<br />
<br />
<br />
3. ON THE BODY TAG<br />
<table id="tblTest"><br /> <tr><br /> <td><br /> Your text here &nbsp;<input type="text" /> </td><br /> </tr><br /> </table><br /> <img alt="" src="../Images/add.gif" id="imgAdd"/><br /> <img alt="" src="../Images/remove.png" id="imgRemove"/></div>Sareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.com0tag:blogger.com,1999:blog-7812730396218256096.post-61562834882869040382012-05-25T13:30:00.001+05:302012-06-28T09:43:04.003+05:30Multiple Scroll<div dir="ltr" style="text-align: left;" trbidi="on">
1. USE THE JS FILE<br />
<script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js</a>" type="text/javascript"></script><br />
<br />
2. DOCUMENT.READY<br />
<br />
<script type="text/javascript" language="javascript"><br />
$(document).ready(function () {<br />
$("#cbxScroll").click(function () {<br />
if ($('#cbxScroll').attr('checked')) { <br />
window.setInterval("checkScroll(document.getElementById('divLeft'), document.getElementById('divRight'))", 1);<br />
}<br />
else {<br />
window.setTimeout('location.reload()', 10);<br />
}<br />
});<br />
});<br />
<br />
// Multiple Scroll - START<br />
var lastSeen = [0, 0];<br />
function checkScroll(div1, div2) {<br />
if (!div1 || !div2) return;<br />
var control = null;<br />
if (div1.scrollTop != lastSeen[0]) control = div1;<br />
else if (div2.scrollTop != lastSeen[1]) control = div2;<br />
if (control == null) return;<br />
else div1.scrollTop = div2.scrollTop = control.scrollTop;<br />
lastSeen[0] = div1.scrollTop;<br />
lastSeen[1] = div2.scrollTop;<br />
}<br />
// Multiple Scroll - END<br />
</script><br />
<br />
3. INSIDE BODY TAG<br />
<br />
<div id="divScroll" style="margin-left: 1100px"><br />
<input id="cbxScroll" type="checkbox" />Enable Multiple Scroll<br />
</div><br />
<br />
<div style="width: 1100px;"><br />
<div id="divLeft" style="width: 500px; height: 100px; border: groove gray; float: left;<br />
overflow: scroll"><br />
ssss<br /><br />
aaaa<br /><br />
cccc<br /><br />
dddd<br /><br />
zzzz<br /><br />
eeee<br /><br />
qqqq<br /><br />
xxxx<br />
</div><br />
<div id="divRight" style="width: 500px; height: 100px; border: groove gray; float: left;<br />
margin-left: 10px; overflow: scroll"><br />
ssss<br /><br />
aaaa<br /><br />
cccc<br /><br />
dddd<br /><br />
zzzz<br /><br />
eeee<br /><br />
qqqq<br /><br />
xxxx<br />
</div><br />
</div> <br />
<br /></div>Sareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.com0tag:blogger.com,1999:blog-7812730396218256096.post-42077702829123018682012-05-14T10:35:00.001+05:302012-05-14T11:27:14.204+05:30ul-li style<div dir="ltr" style="text-align: left;" trbidi="on">
<ul><br />
<li>One</li> <br />
<li>Two</li><br />
<li>Three</li> <br />
</ul><br />
<ul style="text-align: left;">
<li>One</li>
<li>Two</li>
<li>Three </li>
</ul>
<br />
if to remove these bullets, add style<br />
ul<br />
{<br />
list-style-type: none; <br />
}<br />
<br />
One<br />
Two<br />
Three<br />
<br />
To arrange these in vertical<br />
li<br />
{<br />
float:left; <br />
} </div>Sareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.com0tag:blogger.com,1999:blog-7812730396218256096.post-38333740338961505472012-03-28T16:58:00.003+05:302012-06-28T09:41:22.259+05:30Converting to XML Format Variable<div dir="ltr" style="text-align: left;" trbidi="on">
Suppose there exists a lot of Checkboxes, for saving all we can convert values to an XML format and pass to DB<br />
<br />
<div id="divTest"><br />
<table><br />
<tr><br />
<td><br />
<input type="checkbox" value="1"/>One<br />
</td><br />
<td><br />
<input type="checkbox" value="2"/>Two<br />
</td><br />
</tr><br />
<tr><br />
...................<br />
...................<br />
</tr><br />
<br />
</table><br />
</div><br />
<br />
--------------------------------<br />
<br />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /><br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script><br />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script><br />
<br />
<script type="text/javascript" language="javascript"><br />
$(document).ready(function () {<br />
<br />
$("btnSave").click(function(){<br />
var TestXML = "<STHome>";<br />
$("#divTest").find("input:checkbox").each(function () {<br />
if ($(this).attr("checked")) {<br />
TestXML = TestXML + "<Home>";<br />
TestXML = TestXML + "<ID>" + $(this).val() + "</ID>"; <br />
TestXML = TestXML + "<TestValue>" + "" + "</TestValue>"; <br />
TestXML = TestXML + "</Home>";<br />
}<br />
});<br />
TestXML = STHomeXML + "</STHome>";<br />
$.ajax({<br />
type: "POST",<br />
url: "TestPage.aspx/InsertDetails",<br />
dataType: "json",<br />
data: "{'TestID':'" + TestID + "','TestXML':'" + TestXML + "'}",<br />
contentType: "application/json; charset=utf-8",<br />
success: function (result) {<br />
alert("save successfully");<br />
}<br />
});<br />
});//Button Click end<br />
<br />
});//document.ready end<br />
</script><br />
<br />
<br />
------------<br />
<br />
and pass this "TestXML" variable to aspx.cs<br />
Go to <a href="http://sareeshmg.blogspot.com/">sareeshmg.blogspot.com</a><br />
post name : XML Insert</div>Sareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.com0tag:blogger.com,1999:blog-7812730396218256096.post-8341614125413033032012-03-27T18:24:00.002+05:302012-03-28T16:27:19.994+05:30Validations<div dir="ltr" style="text-align: left;" trbidi="on">
USE Jquery files<br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script><br />
<br />
<br />
<br />
//Check the Full Name,dot and space are allowed <br />
function Validate_NameFull(Name) {<br />
reg = new RegExp("^[a-zA-Z .]*$");<br />
var Result = true;<br />
if (!(Name.match(reg))) {<br />
Result = false;<br />
}<br />
return Result;<br />
<br />
}<br />
//Check the First Name,space not allowed<br />
function Validate_NameFirst(Name) {<br />
reg = new RegExp("^[a-zA-Z]*$");<br />
var Result = true;<br />
if (!(Name.match(reg))) {<br />
Result = false;<br />
}<br />
return Result;<br />
}<br />
//Check Number valid or not<br />
function Validate_Number(Number) {<br />
var reg = new RegExp("^[0-9]*$");<br />
var Result = true;<br />
if (!(Number.match(reg))) {<br />
Result = false;<br />
}<br />
return Result;<br />
}<br />
function Validate_Email(Email) {<br />
var pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;<br />
var Result = true;<br />
if (!(Email.match(pattern))) {<br />
Result = false;<br />
}<br />
return Result;<br />
}<br />
function Validate_Phone(Phone) {<br />
var pattern = /^[0-9 + -]*$/;<br />
var Result = true;<br />
if (!(Phone.match(pattern))) {<br />
Result = false;<br />
}<br />
return Result;<br />
}<br />
function Validate_Mobile(Mobile) {<br />
var pattern = /^([9]{1})([234789]{1})([0-9]{8})$/;<br />
var Result = true;<br />
if (!(Mobile.match(pattern))) {<br />
Result = false;<br />
}<br />
return Result;<br />
}<br />
function Validate_Date(Date) {<br />
var pattern = /^\d{1,2}\-\d{1,2}\-\d{4}$/;<br />
var Result = true;<br />
if (!(Date.match(pattern))) {<br />
Result = false;<br />
}<br />
return Result;<br />
}<br />
function Validate_Website(Web) {<br />
<br />
var pattern = /^www+\.([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;<br />
<br />
var Result = true;<br />
if (!(Web.match(pattern))) {<br />
Result = false;<br />
}<br />
return Result;<br />
}<br />
<br />
function isNumberKey(evt) {<br />
var charCode = (evt.which) ? evt.which : event.keyCode<br />
if (charCode > 31 && (charCode < 43 || charCode > 57))<br />
return false;<br />
<br />
return true;<br />
}<br />
function isQuotesKey(evt) {<br />
var charCode = (evt.which) ? evt.which : event.keyCode<br />
if (charCode == 39 || charCode == 96 || charCode == 34 || charCode == 58 || charCode == 59 || charCode == 126)<br />
return false;<br />
<br />
return true;<br />
}<br />
<br />
<br />
---------------<br />
EG:<br />
<input type="text" id="txtPrimaryNo" onkeypress="return isNumberKey(event)" /> </div>Sareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.com0tag:blogger.com,1999:blog-7812730396218256096.post-13811541705055947812012-03-27T18:22:00.003+05:302012-03-27T18:22:50.971+05:30Query String<div dir="ltr" style="text-align: left;" trbidi="on">
EG : <br />
url : http://www.sareeshmg.blogspot.com?id=2"<br />
<br />
<br />
<script language="javascript" type="text/javascript"><br /> function getQueryParams(qs) {<br /> qs = qs.split("+").join(" ");<br /> var params = {};<br /> var tokens,<br /> re = /[?&]?([^=]+)=([^&]*)/g;<br /> while (tokens = re.exec(qs)) {<br /> params[decodeURIComponent(tokens[1])]<br /> = decodeURIComponent(tokens[2]);<br /> }<br /> return params;<br /> }<br />
<br /> var $_GET = getQueryParams(document.location.search);<br />
<br />//To Capture query string value at aspx page use like this <br />
var TestID = $_GET['id'];<br />
<br />
</script><br />
<br />
---------------------<br />
ON Code behind aspx.cs page<br />
to capture query string ID<br />
<br />
int TestID = Convert.ToInt32(Request.QueryString["id"].ToString());<br />
<br /></div>Sareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.com0tag:blogger.com,1999:blog-7812730396218256096.post-9265141722877638432012-03-27T18:15:00.000+05:302012-03-27T18:15:05.771+05:30Enter Key event<div dir="ltr" style="text-align: left;" trbidi="on">
$("#txtPassword").keyup(function (event) {<br />
if (event.keyCode == 13) { <br />
$("#btnSignIn").click(); <br />
} <br />
});</div>Sareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.com0tag:blogger.com,1999:blog-7812730396218256096.post-39792870502663585702012-03-27T15:40:00.003+05:302012-03-27T15:59:26.712+05:30Open a new Page on another or same tab<div dir="ltr" style="text-align: left;" trbidi="on">
To open in a new tab <br />
window.open('TestPage.aspx', '_blank');<br />
OR<br />
window.open('TestPage.aspx', '_blank',, "width=400,height=200,menubar=no,toolbar=no" ); <br />
<br />
<br />
<br />
To open in the same tab<br />
window.location = "TestPage.aspx";</div>Sareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.com0tag:blogger.com,1999:blog-7812730396218256096.post-45692764256879990052012-03-02T10:44:00.001+05:302012-05-25T13:30:58.249+05:30Jquery checkbox Groups (Select one checkbox from a group)<div dir="ltr" style="text-align: left;" trbidi="on">
$(document).ready(function() { <br />
<br />
$(".selector input.testcheck").click(function () {<br />
var test = $(this).val();<br />
<br />
if ($(this).attr("checked")) { <br />
$(".selector input.testcheck[value!=" + test + "]").attr('checked', false);<br />
$(".selector input.testcheck[value=" + test + "]").attr('checked', true);<br />
}<br />
else {<br />
$(this).removeAttr("checked")<br />
} <br />
});<br />
<br />
});<br />
---------------------------------- <br />
<div class="selector"><br />
<input type="checkbox" name="cbxtest" value="1" class="testcheck"/>YES <br />
<input type="checkbox" name="cbxtest" value="2" class="testcheck"/>NO<br />
</div></div>Sareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.com0tag:blogger.com,1999:blog-7812730396218256096.post-89362869768429983232012-02-23T10:58:00.001+05:302012-06-28T09:44:13.260+05:30Slider Control<div dir="ltr" style="text-align: left;" trbidi="on">
<script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js</a>" type="text/javascript"></script> <script src="<a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js</a>" type="text/javascript"></script><br />
<link href="../Scripts/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" /><br />
<br />
<script type="text/javascript" language="javascript"><br />
$(document).ready(function () {<br />
$("#txtTest").text("0");<br />
$(function () {<br />
$("#sliderTest").slider({<br />
range: "max",<br />
min: 0,<br />
max: 10,<br />
value: 0,<br />
slide: function (event, ui) {<br />
$("#txtTest").text(ui.value);<br />
<br />
if (ui.value > 4) {<br />
alert("hi");<br />
}<br />
else {<br />
alert("hi123");<br />
}<br />
}<br />
});<br />
});<br />
});<br />
</script><br />
<br />
<br />
--------------<br />
<br />
<div id="sliderTest"></div><br />
<br /><br />
<label id="txtTest"></label></div>Sareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.com0tag:blogger.com,1999:blog-7812730396218256096.post-73980220348505662022012-02-22T18:26:00.001+05:302012-02-22T18:26:26.022+05:30Prevent Cut Copy Paste<div dir="ltr" style="text-align: left;" trbidi="on">
$('#txtNotes').bind('cut copy paste', function (event) {<br /> event.preventDefault();<br /> });</div>Sareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.com0tag:blogger.com,1999:blog-7812730396218256096.post-38232685776934794122012-02-22T16:29:00.000+05:302012-02-22T18:20:08.071+05:30TextArea remaining characters showing<div dir="ltr" style="text-align: left;" trbidi="on">
--------------------------------------------------------- <br />
TYPE : 1<br />
---------------------------------------------------------<br />
<br />
<script type="text/javascript" language="javascript"><br />
<br />
function textCounter(field, countfield, maxlimit) {<br />
if (field.value.length > maxlimit) {<br />
field.value = field.value.substring(0, maxlimit);<br />
alert('Textarea value can only be 20 characters in length.');<br />
return false;<br />
}<br />
else {<br />
countfield.value = maxlimit - field.value.length;<br />
}<br />
}<br />
</script><br />
<br />
<br />
<br />
<br />
<textarea rows="10" cols="80" id="txtNotes" style="resize: none" onkeypress="textCounter(this,this.form.counter,20);"></textarea><br />
<input type="text" name="counter" maxlength="5" size="3" value="20" onblur="textCounter(this.form.counter,this,20);" /><br />
chars remaining <br />
<br />
<br />
-----------------------------------------------------------------------<br />
TYPE : 2<br />
-----------------------------------------------------------------------<br />
<br />
<span style="color: blue; font-family: Courier New; font-size: 10pt;">function</span><span style="color: black; font-family: Courier New; font-size: 10pt;"> countDown(control, maxLen, counter, typeName) {<br />
</span><span style="color: blue; font-family: Courier New; font-size: 10pt;">var</span><span style="color: black; font-family: Courier New; font-size: 10pt;"> len = control.value.length;<br />
</span><span style="color: blue; font-family: Courier New; font-size: 10pt;">var</span><span style="color: black; font-family: Courier New; font-size: 10pt;"> txt = control.value;<br />
</span><span style="color: blue; font-family: Courier New; font-size: 10pt;">var</span><span style="color: black; font-family: Courier New; font-size: 10pt;"> span = document.getElementById(counter);<br />
span.style.display = '';<br />
span.innerHTML = (maxLen - len) + ' characters remaining';<br />
</span><span style="color: blue; font-family: Courier New; font-size: 10pt;">if</span><span style="color: black; font-family: Courier New; font-size: 10pt;"> (len >= (maxLen - 10)) {<br />
span.style.color = 'red';<br />
</span><span style="color: blue; font-family: Courier New; font-size: 10pt;">if</span><span style="color: black; font-family: Courier New; font-size: 10pt;"> (len > maxLen) {<br />
control.innerHTML = txt.substring(0, maxLen);<br />
span.innerHTML = (maxLen - control.value.length) + ' characters remaining';<br />
alert(typeName + ' text exceeds the maximum allowed!');<br />
}<br />
} </span><span style="color: blue; font-family: Courier New; font-size: 10pt;">else</span><span style="color: black; font-family: Courier New; font-size: 10pt;"> {<br />
span.style.color = '';<br />
}<br />
}</span><br />
<br />
<br />
<br />
<br />
<span style="color: black; font-family: Courier New; font-size: 10pt;"><span style="color: blue;"> </span></span><span style="color: blue; font-family: Courier New; font-size: 10pt;"><</span><span style="color: maroon; font-family: Courier New; font-size: 10pt;">textarea </span><span style="color: magenta; font-family: Courier New; font-size: 10pt;"></span><span style="color: red; font-family: Courier New; font-size: 10pt;">id</span><span style="color: blue; font-family: Courier New; font-size: 10pt;">="Description"</span><span style="color: magenta; font-family: Courier New; font-size: 10pt;"> </span><span style="color: red; font-family: Courier New; font-size: 10pt;"><b>onkeyup</b></span><span style="color: blue; font-family: Courier New; font-size: 10pt;"><b>="countDown(this, 255, 'desc', 'Description');"</b></span><span style="color: blue; font-family: Courier New; font-size: 10pt;">></</span><span style="color: maroon; font-family: Courier New; font-size: 10pt;">textarea</span><span style="color: blue; font-family: Courier New; font-size: 10pt;">></span><span style="color: black; font-family: Courier New; font-size: 10pt;"> </span><br />
<span style="color: black; font-family: Courier New; font-size: 10pt;"><br /></span><br />
<span style="color: blue; font-family: Courier New; font-size: 10pt;"><</span><span style="color: maroon; font-family: Courier New; font-size: 10pt;">SPAN</span><span style="color: magenta; font-family: Courier New; font-size: 10pt;"> </span><span style="color: red; font-family: Courier New; font-size: 10pt;">id</span><span style="color: blue; font-family: Courier New; font-size: 10pt;">="desc"</span><span style="color: magenta; font-family: Courier New; font-size: 10pt;"> </span><span style="color: red; font-family: Courier New; font-size: 10pt;">style</span><span style="color: blue; font-family: Courier New; font-size: 10pt;">="DISPLAY: none"></span><span style="color: black; font-family: Courier New; font-size: 10pt;">255 characters remaining</span><span style="color: blue; font-family: Courier New; font-size: 10pt;"></</span><span style="color: maroon; font-family: Courier New; font-size: 10pt;">SPAN</span><span style="color: blue; font-family: Courier New; font-size: 10pt;">></span><br />
<br />
<br />
<br />
<br />
-----------------------------------------------------------------<br />
TYPE : 3<br />
-----------------------------------------------------------------<br />
<br />
<script type="text/javascript" language="javascript"><br /> var len = 0;<br /> var characterLimit = 3492;<br /><br /> $(document).ready(function () {<br /><br /><br /> //check for max length of a textarea START<br /> $("#divremainingChar").hide();<br /> $("#txtNotes").keydown(function (event) {<br /> len = $("#txtNotes").val().length;<br /> len += 1;<br /><br /> var charactersRemaining = characterLimit - len;<br /><br /> if (len >= characterLimit) {<br /> // Allow only backspace and delete<br /> if (event.keyCode == 46 || event.keyCode == 8) {<br /><br /> }<br /> else {<br /> event.preventDefault();<br /> }<br /> }<br /> $("#divremainingChar").show();<br /> $('#remainingCharacters').html(charactersRemaining);<br /> });<br /> //check for max length of a textarea END<br /><br /></script><br /><br /><br /><br /> <textarea cols="100" rows="10" id="txtNotes"></textarea><br /> <br /><br /> <div style="color:Gray" id="divremainingChar"> <span id="remainingCharacters" ></span> characters remaining. </div></div>Sareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.com0tag:blogger.com,1999:blog-7812730396218256096.post-4841754562184757992012-02-22T16:27:00.000+05:302012-05-29T17:22:14.945+05:30Setting up Maxlength for TEXTAREA<div dir="ltr" style="text-align: left;" trbidi="on">
TYPE : 1 <br />
<br />
<script type="text/javascript" language="javascript"> <br />
function SetMaxLength(Object, MaxLen) {<br />
return (Object.value.length <= MaxLen);<br />
}<br />
</script><br />
<br />
<br />
<textarea rows="10" cols="80" id="txtNotes" style="resize: none" onkeypress="return SetMaxLength(this, 15);"></textarea><br />
<br />
//style="resize: none" will make textarea fixed size<br />
-----------------------------------------------------<br />
<br />
TYPE : 2<br />
<br />
<br />
function textLimit(field, maxlen) {<br />
if (field.value.length > maxlen) {<br />
while (field.value.length > maxlen) {<br />
field.value = field.value.replace(/.$/, '');<br />
}<br />
alert('Maximum limit exceeded!');<br />
}<br />
}<br />
<br />
<br />
<textarea rows="10" cols="80" id="txtNotes" style="resize: none" onkeypress="textLimit(this,20)"></textarea></div>Sareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.com0tag:blogger.com,1999:blog-7812730396218256096.post-42076724966438080602012-02-22T11:54:00.000+05:302012-05-16T11:51:08.130+05:30To find radio button text and value<div dir="ltr" style="text-align: left;" trbidi="on">
$("#btnTest").click(function () {<br /><br /> $("#divTestFunction").find("table").find("tr").each(function () {<br /> $(this).find("input:radio").each(function () {<br /> if ($(this).attr("checked") == true) { <br /> alert(jQuery.trim($(this).parent().text()));<br /> }<br /> });<br /> });<br /> });<br />
<br />
-----------------------------------------<br />
<br />
<div id="divTestFunction"><br /> <table><br /> <tr><br /> <td><br /> </td><br /> <td><br /> <input type="radio" name="rbtnTest" />Demo Text<br /> </td><br /> </tr><br /> </table><br /> </div><br /> <input type="button" id="btnTest" value="Test" /></div>Sareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.com0tag:blogger.com,1999:blog-7812730396218256096.post-34111324271207233502012-01-17T15:23:00.000+05:302012-01-17T15:24:57.611+05:30To get select radiobutton value using its name<div dir="ltr" style="text-align: left;" trbidi="on">Use like this<br />
<br />
<pre class="default prettyprint"><code><span class="pln">$</span><span class="pun">(</span><span class="str">'</span></code><code><span class="pln">input:radio[name=radReason]</span></code><code><span class="str">'</span><span class="pun">).change</span><span class="pun">(function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
var</span><span class="pln">Selval </span><span class="pun">=</span><span class="pln"> $("input:radio[name=radReason]:checked").val();</span><span class="pun"></span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span></code></pre></div>Sareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.com0tag:blogger.com,1999:blog-7812730396218256096.post-25937871876893544622012-01-13T14:26:00.000+05:302012-01-13T14:27:19.001+05:30Hide/Remove dialogbox close button in title<div dir="ltr" style="text-align: left;" trbidi="on">closeOnEscape: false,<br />
open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); },<br />
<br />
------------------ <br />
$("#popUpOne").dialog({<br />
autoOpen: false,<br />
height: 660,<br />
width: 740,<br />
modal: true,<br />
closeOnEscape: false,<br />
open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); },<br />
buttons: {<br />
"SAVE": function () {<br />
SaveFunction();<br />
},<br />
CANCEL: function () {<br />
$(this).dialog("close");<br />
}<br />
},<br />
close: function () {<br />
allFields.val("").removeClass("ui-state-error");<br />
}<br />
});</div>Sareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.com0tag:blogger.com,1999:blog-7812730396218256096.post-88273189448286007232012-01-11T12:29:00.000+05:302012-01-11T12:29:40.496+05:30Auto Complete textbox<div dir="ltr" style="text-align: left;" trbidi="on">------------------------ASPX PAGE-------------------------------- <br />
var AutoTestID = 0;<br />
$(document).ready(function(){<br />
<br />
<br />
$("#txtTestName").autocomplete({<br />
source: function (request, response) {<br />
TestID= 0;<br />
$.ajax({<br />
url: "ReferalIntakeOrg.aspx/GetPatientNameAutoSugg",<br />
data: "{ 'TestName': '" + request.term + "','PhoneNo':'"+ $("#txtPrimaryNo").val()+"'}",<br />
dataType: "json",<br />
type: "POST",<br />
contentType: "application/json; charset=utf-8",<br />
dataFilter: function (data) { return data; },<br />
success: function (data) {<br />
response($.map(data.d, function (item) {<br />
return {<br />
label: item.Name,<br />
value: item.Name,<br />
Id: item.Id<br />
}<br />
}))<br />
}<br />
});<br />
},<br />
minLength: 1,<br />
select: function (event, ui) {<br />
AutoTestID= ui.item.Id;<br />
FillTestDetails(AutoTestID);<br />
}<br />
});<br />
}); //document.ready ends here<br />
<br />
<br />
<br />
<br />
--------------ASPX.CS PAGE----------------<br />
[WebMethod]<br />
public static List<AutoFillItem> GetPatientNameAutoSugg(string PatientName, string PrimaryContactNo)<br />
{<br />
List<AutoFillItem> list = new List<AutoFillItem>();<br />
ServiceReference1.TestWCFServiceClient oITestWCFService = new ServiceReference1.TestWCFServiceClient();<br />
DataSet ds = oITestWCFService.GetTestNameAutoSugg(TestName, PhoneNo);<br />
<br />
foreach (DataRow tr in ds.Tables[0].Rows)<br />
{<br />
AutoFillItem item = new AutoFillItem();<br />
item.Id = tr[0].ToString();<br />
item.Name = tr[1].ToString();<br />
<br />
list.Add(item);<br />
}<br />
return list.ToList();<br />
}<br />
<br />
------------------------ADD A CLASS AutoFillItem.cs------------------<br />
//declare our needs<br />
public string Id;<br />
public string Name;</div>Sareesh MGhttp://www.blogger.com/profile/11652074898744416764noreply@blogger.com0