Examples

Example 1 - Link

My content to replace

Make ajax request

					
						<a href="ajax/sample-content-1.html" id="example-1-link">Make ajax request</a>

						$("#example-1-link").ajaxify({
							reRender: "#example-1-content"
						});
					
				


Example 2 - Link with different response selector

Make ajax request

					
						<a href="ajax/sample-content-1.html" id="example-2-link">Make ajax request</a>

						$("#example-2-link").ajaxify({
							reRender: "#example-1-content",
							responseSelector: "#example-2-content"
						});
					
				


Example 3 - Link without reRender option

When no reRender area option is specified the ajax request still happens and is cached to plaudit.ajax.previousXHR

Make ajax request

					
						<a href="ajax/sample-content-1.html" id="example-3-link">Make ajax request</a>

						$("#example-3-link").ajaxify();
					
				


Example 4 - Link with callback

Make ajax request

					
						<a href="ajax/sample-content-1.html" id="example-4-link">Make ajax request</a>

						$("#example-4-link").ajaxify({
							callback: function(data) {
								console.log(data); // do something with the data
							}
						});
					
				


Example 5 - Span as ajax trigger

My content to replace

Make ajax request

					
						<span id="example-5-span">Make ajax request</span>

						$("#example-5-span").ajaxify({
							url: "ajax/sample-content-1.html",
							reRender: "#example-5-content",
							responseSelector: "#example-1-content"
						});
					
				


Example 6 - Form

					
						// Example 6 - Form
						$("#example-6-form").ajaxify({
							reRender: "#example-6-form"
						});
					
				

Required fields are Marked *


Example 7 - Submit a form with a link

					
						// Example 7 - Submit a form with a link
						$("#example-7-link").ajaxify({
							reRender: "#example-7-form",
							form: "#example-7-form"
						});
					
				

Required fields are Marked *

Submit the previous form with this link

Example 8 - Submit a form on change

This sets up all input fields on a form to use ajax

					
						// Example 8 - Rerender on change
						$("#example-8-form").ajaxify({
							reRender: "#example-8-form",
							event: "change"
						});
					
				

Required fields are Marked *

Example 9 - Submit a form on change of a specific fields

When used with a specific element only this element will trigger the ajax requet

					
						// Example 9 - Rerender on change of specific field
						$("#change-trigger").ajaxify({
							selector: "change-trigger",
							reRender: "#example-9-form",
							event: "change"
						});
					
				

Required fields are Marked *