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");