Dotnet: jquery

Showing posts with label jquery. Show all posts

Friday, 31 August 2012

Parsing JSON w/ @ symbol in it

To read the json response like bellow @ concatenated with attribute
'{ "@id": 1001, "@name": "Sony", "edu": "MCA" }'
Usually we do use alert(data.edu); to get the values but when @ is with attribute then use the bellow code

var attName = data['@id'];
alert(attName);

or

var att = '@name';
var attID = data[att];

alert(data.edu);

Tags: @ in json, @ symbol in json response, Parsing JSON with @ symbol in it.

Saturday, 10 March 2012

Updating div content in javascript using jquery

MyService.asmx code:

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
[WebMethod()]
public List<Result> Read()
{
    string Inpt = HttpContext.Current.Request.QueryString["Input"].ToString();//using this can get updated data from db
    List<Result> ResultColl = new List<Result>();
    Result r = new Result();
    r.LikeCount = "1";
    ResultColl.Add(r);
    return ResultColl;
}

public class Result
{
    private string _LikeCount;

    public string LikeCount
    {
        get{return _LikeCount;}
        set{_LikeCount=value;}
    }
}

ASPX Code

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function UpdatePartical() {
    $.ajax({
        type: "POST",
        url: "MyService.asmx/Read?Input=1",
        dataType: "json",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        success: function(json) {
            jQuery.each(json.d, function() {
                document.getElementById('div1').innerHTML = this["LikeCount"];
            });
        }
    });
}
</script>

Tag: Updating div content in javascript using jquery, using jquery with asmx,

Tuesday, 28 February 2012

input text box watermark effect using jquery

Saturday, 3 December 2011

jQuery Validations in asp.net sample code

Html Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryValidationSample.aspx.cs" Inherits="JqueryValidationSample" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery Validation Sample Page</title>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" />
<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<script language="javascript" type="text/javascript">
jQuery(document).ready(function(){
jQuery("#frmRegistration").validationEngine('attach', {promptPosition : "centerRight"});
});
function ValidatePage()
{
jQuery('#frmRegistration').validationEngine('validate');
if(jQuery('#frmRegistration').validationEngine('validate')==true)
{
document.getElementById('imgProcess').style.display='block';
return true;
}
else
return false;
}
</script>
</head>
<body>
<div id="imgProcess" runat="server" style="display:none;position:absolute;z-index:999;padding:184px 100px 150px 30px;background:black;opacity:0.4;">
<img alt="" src="Assets_ThickBox/loadingAnimation.gif" /></div>
<h2>Registration</h2>
<form id="frmRegistration" runat="server">
<p>
<label>Email:</label>
<asp:TextBox id="txt_Email" runat="server" class="validate[required,custom[email]] text-input"></asp:TextBox>
</p>
<p>
<label>Full Name:</label>
<asp:TextBox id="txt_FullName" runat="server" ></asp:TextBox>
</p>
<p>
<label>Username:</label>
<asp:TextBox id="txt_username" runat="server" class="validate[required]" ></asp:TextBox>
</p>
<p>
<label>Password:</label>
<asp:TextBox id="txt_Password" runat="server" TextMode="Password" class="validate[required]" ></asp:TextBox>
</p>
<p>
<label>Confirm Password:</label>
<asp:TextBox id="txt_Password0" runat="server" TextMode="Password"
class="validate[required,equals[txt_Password]]"></asp:TextBox>
</p>
<p>
<label></label>
<asp:CheckBox ID="chkagree" runat="server" />I agree to
<a href="#" target="_blank" >terms and condition</a>
</p>
<asp:Button ID="btnJoin" runat="server" Text="Register"
OnClientClick="javascript:return ValidatePage();" OnClick="btnJoin_Click" />
</form>
</body>
</html>

aspx.cs code:

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class JqueryValidationSample : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
imgProcess.Style.Add("display", "none");
}
}
protected void btnJoin_Click(object sender, EventArgs e)
{
//do your task
imgProcess.Style.Add("display", "none");
}
}

o/p:

Tag: Asp.net, c#, controls, csharp, development, dotnet, javascript, jquery, validation, vb

Thursday, 17 November 2011

Few jqGrid tips which I leant with my experience

Changing jqGrid Column Names Dynamically

jQuery("#list").jqGrid('setLabel', 'columnName', 'NewColumnName');

Hiding jqGrid Close Button from titlebar

Changing jqGrid title alignment

jQuery(".ui-jqgrid-title").replaceWith('<div style="text-align:center;padding:.3em .2em .2em .3em;"><span>'+jQuery(".ui-jqgrid-title").text()+'</span></div>');

Changing jqGrid Header-Column style

jQuery("#testGrid").jqGrid('setLabel','ColName','',{'text-align':'left'});

Removing jqGrid Pager Details

for center part : jQuery('#pagerdt_center').remove();
for view of rows: jQuery('#pagerdt_right').remove();
for entire pager: jQuery('#pagerdt').remove();

Remove ScroolBars for jqGrid

height: '100%', weight: '100%'

Changing jqGrid height based on jqGrid records

if(jQuery("#testGrid").jqGrid('getGridParam', 'records')<10)
jQuery("#testGrid").jqGrid('setGridHeight',500);
else
jQuery("#testGrid").jqGrid('setGridHeight','100%');

Changing jqGrid tr style based on column value

gridComplete: function(){
var ids = jQuery("#testGrid").jqGrid('getDataIDs');//fetches the row ids array
for(var i=0;i < ids.length;i++){
var _MyColumn = jQuery("#testGrid").jqGrid('getCell', ids[i], 'MyColumn'); //fetches the Column data
if(_read=='False'){
var trElement = jQuery("#"+ ids[i],jQuery('#testGrid'));
trElement.removeClass('ui-widget-content');//Remove the class then only you can add your class
trElement.addClass('newclass');
}
}
}
<style type="text/css">
.newclass{ background-color:red;}
</style>

Tag: addclass, alignment, change, Close, column, Dynamically, getDataIDs, gridcomplete, Header, jqgrid, jquery, learn, Pager, removeclass, ScroolBars, setGridHeight, setLabel, style, tips, titlebar