AjaxPanel

AjaxPanel is a jQuery plugin that provides a uniform way to update HTML elements, updating is based on jQuery's low-level AJAX implementation. However, AjaxPanel is easier to use with following features:

• Automatically intercept the submit event of Form elements and click event of A elements.
• Easily extend the updating procedure by overriding beforeUpdate or afterUpdate functions.
• More succinct usage.

Downloads & Files: Source Code, Try out a demonstration, Tutorial

Options

url

The default updating url

{url:"/home/menu"}

subscribers

subscribe events and binding the event handler

{
	subscribers:{
		"HelloWorld":function(data) {
			alert("Hello World!");
		}
	};
}
			

actionElement

Convert to ajax request's element

{actionElement:"A,FORM"}
			

Usage

1. Convert element to ajaxPanel and intercept the a, form action

$("select").ajaxPanel();

<div id="test" >
	<a href="/home/menu">Menu</a>
	<form action="/home/Login">
		<p>
		    <label for=" userName">UserName:</label>
		    <input name="userName" id=" loginName"></input>
		</p>
		<p>
		    <label for="password">Password:</label>
		    <input name="password" id="loginPassword"></input>
		</p>
		<p>
		    <input type="submit" value="Login" ></input>
		</p>
	</form>
</div>
			

$("#test").ajaxPanel({actionElement:"A,FORM"});

a) if user clicks the menu link£¬the framework could will ajax request to url "/home/menu" and return the result into <div id=¡±test¡±></div>

b) Convert to form sumbit to ajax request, and return the ajax result into <div id=¡±test¡±></div>

2. Update the specific ajaxPanel

var ajaxPanel1 = $(¡°test¡±).ajaxPanel({url:¡±/home/menu¡±});

update ajaxPanel with the default url

ajaxPanel1.updatePanel();

update ajaxPanel with the custom url

ajaxPanel1.updatePanel("/home/menu2");
ajaxPanel1.updatePanel("/home/menu2",{tabId:2},"POST");

3. use the subscribe/publish framework plug-in

$("select").ajaxPanel({
	url:¡±/home/menu¡±,
	subscribers:{
		"HelloWorld":null 
		"HelloWorld1":{
			url:¡±/home/menu2¡±,
			data:{tabId:2}
		},
		"HelloWorld2"¡±:function(){
			this.updataPanel();
		}
	}
});

publish events

$.publish("HelloWorld");
$.publish("HelloWorld1");
$.publish("HelloWorld2");