ASP.net and jQuery=Erxin.txt.bak

ASP.net and jQuery=Erxin

:jQuery Overview
>$, the jQuery function
>selectors
>events
>chaining
>effects
>DOM manipulation
>AJAX

:jQuery history
>open source project, http://ejohn.org, start in 2005
>current website, http://www.jquery.com
>full support by microsoft after vs 2008

:asp.net using jquery
>download jquery-version.min.js for client side
>download jquery-version.vsdoc.js for intelligent spelling
>run function when document is ready
	- pageLoad(){}, javascript function for asp.net automatic invoke after page loaded
	- alternative way is use $(function(){}); this Anonymous function will be called when the document is ready.
>load js libray
	- use asp.net script manager
	- use html styple reference style, only need to drag and drop the library into the page
>drag the wanted version of jquery library to the *.js file to reference the library in asp.net
>$ function usage
	- pass in css string to do a css selector
	- pass html string to manipulate, such as append to body
	- DOM element to bind events or set properties
	- function object(invoked on document ready)

:selectors
>how to find element
	- base on css syntax
	- find by id, class, element name and hierarchical position
	
:select pseudo-classes
>furthure refinement of selection
	- always start with colon, :
	- examples include :link, :visited, :odd 奇数, :even 偶数, :not, :first
		:visited, the element is visited by client

:working with attributes
>attr(), function
	- reads a property value from first match
	- set one or more properties on all matched elements
>class function
	- addclass()
	- removeclass()
	- toggleClass
	
:chaining
> jquery use a build pattern and it can call continues
$(function(){
	$("a").mouseover(function(){$(this).addClass("highlight");})
		  .mouseout(function(){$(this).removeClass("highlight");})
		  .filter(":even").addClass("evenrow").end()
		  .filter(":odd").addClass("oddrow").end()
		  .filter(":contains('sub_string')").attr("href", "attribute_value");
});
the function end() will reverst all the destructive filter to the original 
	
:effects
>basics
hide, show, toggle
>sliding
slideUp, slideDown, slideToggle
>fading
fadeIn, fadeOut, fadeTo
>custom animate function
	- $("section").hide();
	- $("#menu > p").click(function(){$(this).next().slideToggle("slow")});
	
:Server communication
>high level options
	- load(), load html from xmlHttp request to DOM element
	- get()
	- post()
	- getJSON()
	- ex.
		$("a").click(getInstructionInfo);
		function getInstructionInfo(event){
			var instructorName = $(this).text();
			$("#detail").load(URL, parameters);
			return true;
		}
>low level options
	- ajax
>using get() and post()
	- $.post(URL,
			 paramters,
			 callback(result){},
			 return_data_type_string
			);
	return data type could be JSON, html, text
>ajax error
$.ajax(
	{
		type:"POST",
		url:"getInstructureInfo.ashx",
		data:{"instructor":instructorName},
		timeout:5000, //ms
		success:function(result){},
		error:function(xhr, status, exception)
			{
				$("#detail").html
				(
					"There was a error.<br/>" + 
					"Status:" + status + "<br/>" +
					"XHR Status:" + xhr.statusText + "<br/>"
				);
			}
	}
);
>global ajax events
$("#id").ajaxComplete(function(event, xhr, options){...})
		.ajaxError
		.ajaxSend
		.ajaxStop
		.ajaxSuccess
>call wcf services
	- directly use asp.net ajax library to call wcf services
	- use mvc pattern and use xmlhttprequest to call the wcf services
		* requires wcf services enable webHttpBinding
		* the webservice will return JSON format data, if the data include datetime fields, it will get error as microsoft use different formate for datetime data.
		* use low level ajax method
		$.ajax(
			{
				type:"POST",
				url:url_to_wcf_file/wcf_method_string,
				data:JSON_format_parameters,
				timeout:5000,
				contentType:"application/json",
				dataFilter:parseJson, //use regex replace the datetime format data
				success:onSuccess
			}
		);
		function parseJson(data, type)
		{
			var dateRegEx = new RegExp('(^|[^\\\\])...');//copy from microsoft ajax library to convert datetime
			var exp = data.replace(dateRegEx, "$1new Date($2)");
			var result = eval('('+exp+')');
			return result.d;
		}
		function onSuccess(wcf_return_data)
		{
			...
		}
	
:jquery use could custom ui widget from jquery.com
:jquery plugins
>extend jquery
	jquery.log = {
		error:function(){},
		warning:function(){}
	}; //extend add a log element
	jQuery.fn.debug = function(){
		return this.each(function(){
			alert(this);
		});
	};//add a jquery function 
	$("#id").debug();	// call the new added jquery function
>microsoft ajax library