AJAX Load Content: Load HTML and submit forms using AJAX requests

Recommend this page to a friend!
     
  Info   Example   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 353 All time: 113 This week: 4Up
Version License JavaScript version Categories
ajax-load-content 1.0.4BSD License1.0HTML, AJAX, Forms
Description 

Author

Manuel Lemos

This object can load HTML and submit forms using AJAX requests.

It can send AJAX requests and optionally parse the responses to separate body data from header values encoded in JSON format.

The object can also replace page elements with retrieved HTML executing any JavaScript code contained in HTML SCRIPT tags.

It can also submit forms in the page using AJAX requests including uploading files contained in the form using XMLHTTPRequest 2 with FormData objects supported by modern browsers.

Picture of Manuel Lemos
  Performance   Level  
Name: Manuel Lemos <contact>
Classes: 11 packages by
Country: Portugal Portugal

Level 3 StarStarStar

Example

<!--
/*
 * testAJAXLoadContent.html
 *
 * @(#) $Id: testAJAXLoadContent.html,v 1.6 2014/07/08 04:29:15 mlemos Exp $
 *
 */
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test for Manuel Lemos' AJAX Load Content JavaScript Object</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
// --></style>
<script src="ajaxLoadContent.js" type="text/javascript"></script>
<script type="text/javascript"><!--

var submitInput = "submit";

function SubmitViaAJAX()
{
	var loadContent, success;

	/*
	 *  Create a ajaxLoadContent object
	 */
	loadContent = new ML.content.ajaxLoadContent();
	
	/*
	 *  Tell the object to parse the AJAX response and
	 *  retrieve the out of band header information.
	 */
 
	loadContent.jsonResponseHeader = true;

	success = loadContent.submitForm('subscription_form', submitInput,

		/*
		 *  Callback function in case it succeeded to get the response
		 */ 
		function(lc, response) {
			var element;

			/*
			 * Get the page element to insert the result
			 * from the response header element
			 */
			element = response.header.element;

			/*
			 * Insert the HTML code in the feedback element
			 * and execute any JavaScript code it contains.
			 */
			lc.loadCode(element, response.body);
		},

		/*
		 *  Callback function in case it failed to get the response
		 */ 
		function(lc)
		{
			alert(lc.error);
		}
	);

	/*
	 *  If it failed to send the AJAX request,
	 *  return false to fallback to regular form submission
	 */
	if(!success)
	{
		alert('Error: ' + loadContent.error);
		return false;
	}
	return true;
}

// --></script>
</head>
<body>
<center><h1>Test for Manuel Lemos' AJAX Load Content JavaScript Object</h1></center>
<hr />
<form method="POST" action="testAJAXLoadContent.php" id="subscription_form" onsubmit="return !SubmitViaAJAX();">
<div id="feedback" style="text-align: center;"></div>
<br />
<div id="wholeform">
<center><table summary="Form table" border="1" bgcolor="#c0c0c0" cellpadding="2" cellspacing="1">
<tr>
<td bgcolor="#000080" style="border-style: none;"><font color="#ffffff"><b>Form class test</b></font></td>
</tr>

<tr>
<td style="border-style: none;"><center><table summary="Input fields table">

<tr>
<th align="right"><label for="email" accesskey="E"><u>E</u>-mail address</label>:</th>
<td><input type="text" name="email" maxlength="100" onchange="new_value=value; if(new_value.toLowerCase) new_value=new_value.toLowerCase() ;  if(new_value!=value) value=new_value ;" id="email" accesskey="E" /></td>
</tr>

<tr>
<th align="right"><label for="credit_card_number" accesskey="n">Credit card <u>n</u>umber</label>:</th>
<td><input type="text" name="credit_card_number" size="20" id="credit_card_number" accesskey="n" /></td>
<td>[Optional]</td>
</tr>

<tr>
<th align="right"><label for="credit_card_type" accesskey="y">Credit card t<u>y</u>pe</label>:</th>
<td><select name="credit_card_type" id="credit_card_type" size="1">
<option value="pick" selected="selected">Pick a credit card type</option>
<option value="unknown">Unknown</option>
<option value="mastercard">Master Card</option>
<option value="visa">Visa</option>
<option value="amex">American Express</option>
<option value="dinersclub">Diners Club</option>
<option value="carteblanche">Carte Blanche</option>
<option value="discover">Discover</option>
<option value="enroute">enRoute</option>
<option value="jcb">JCB</option>
</select></td>
<td></td>
</tr>

<tr>
<th align="right">
<label for="user_name" accesskey="P"><u>P</u>ersonal name</label>:</th>
<td><input type="text" name="user_name" maxlength="60" id="user_name" accesskey="P" /></td>
<td></td>
</tr>

<tr>
<th align="right">
<label for="age" accesskey="A"><u>A</u>ge</label>:</th>
<td><input type="text" name="age" id="age" accesskey="A" /></td>
<td></td>
</tr>

<tr>
<th align="right">
<label for="weight" accesskey="W"><u>W</u>eight</label>:</th>
<td><input type="text" name="weight" id="weight" accesskey="W" /></td>
<td></td>
</tr>

<tr>
<th align="right">
<label for="home_page" accesskey="o">H<u>o</u>me page</label>:</th>
<td><input type="text" name="home_page" id="home_page" accesskey="o" /></td>
<td></td>
</tr>

<tr>
<th align="right">
<label for="alias" accesskey="s">Acce<u>s</u>s name</label>:</th>
<td><input type="text" name="alias" maxlength="20" id="alias" accesskey="s" /></td>
<td></td>
</tr>

<tr>
<th align="right">
<label for="password" accesskey="d">Passwor<u>d</u></label>:</th>
<td><input type="password" name="password" id="password" accesskey="d" /></td>
<td rowspan="2"></td>
</tr>

<tr>
<th align="right">
<label for="confirm_password" accesskey="C"><u>C</u>onfirm password</label>:</th>
<td><input type="password" name="confirm_password" id="confirm_password" accesskey="C" /></td>
</tr>

<tr>
<th align="right">
<label for="reminder" accesskey="r">Password <u>r</u>eminder</label>:</th>
<td><input type="text" name="reminder" id="reminder" accesskey="r" /></td>
<td></td>
</tr>

<tr>
<th align="right" valign="top"><label for="interests" accesskey="I"><u>I</u>nterests</label>:</th>
<td><select name="interests[]" multiple="multiple" id="interests" size="4">
<option value="arts">Arts</option>
<option value="business">Business</option>
<option value="computers">Computers</option>
<option value="education">Education</option>
<option value="entertainment">Entertainment</option>
<option value="health">Health</option>
<option value="news">News</option>
<option value="politics">Politics</option>
<option value="sports">Sports</option>
<option value="science">Science</option>
<option value="other" selected="selected">Other</option>
</select></td>
<td></td>
</tr>

<tr>
<th colspan="3">When approved, receive notification by:</th>
</tr>

<tr>
<th align="right">
<label for="email_notification" accesskey="m">E-<u>m</u>ail</label>:</th>
<td><input type="checkbox" name="notification[]" value="email" id="email_notification" accesskey="m" /></td>
<td rowspan="2"></td>
</tr>

<tr>
<th align="right">
<label for="phone_notification" accesskey="h">P<u>h</u>one</label>:</th>
<td><input type="checkbox" name="notification[]" value="phone" id="phone_notification" accesskey="h" /></td>
</tr>

<tr>
<th colspan="3">Subscription type:</th>
</tr>

<tr>
<th align="right">
<label for="administrator_subscription" accesskey="i">Adm<u>i</u>nistrator</label>:</th>
<td><input type="radio" name="subscription_type" value="administrator" id="administrator_subscription" accesskey="i" /></td>
<td rowspan="3"></td>
</tr>

<tr>
<th align="right">
<label for="user_subscription" accesskey="U"><u>U</u>ser</label>:</th>
<td><input type="radio" name="subscription_type" value="user" id="user_subscription" accesskey="U" /></td>
</tr>

<tr>
<th align="right">
<label for="guest_subscription" accesskey="G"><u>G</u>uest</label>:</th>
<td><input type="radio" name="subscription_type" value="guest" id="guest_subscription" accesskey="G" /></td>
</tr>

<tr>
<th align="right">
<label for="toggle" accesskey="b">Toggle <u>b</u>utton</label>:</th>
<td><input type="button" name="toggle" value="On" id="toggle" accesskey="b" /></td>
<td >&nbsp;</td>
</tr>

<tr>
<th align="right">
<label for="upload" accesskey="f">Upload <u>f</u>ile</label>:</th>
<td><input type="file" name="upload" id="upload" accesskey="f" /></td>
<td >&nbsp;</td>
</tr>

<tr>
<td colspan="3" align="center"><hr /></td>
</tr>

<tr>
<th align="right">
<label for="agree" accesskey="t">Agree with the <u>t</u>erms</label>:</th>
<td><input type="checkbox" name="agree" value="Yes" id="agree" accesskey="t" /></td>
<td ></td>
</tr>

<tr>
<td colspan="3" align="center"><hr /></td>
</tr>

<tr>
<td colspan="3" align="center"><input type="submit" name="submit" value="Regular submit button" onclick="submitInput='submit'" /></td>
</tr>

<tr>
<td colspan="3" align="center"><input type="image" name="image" src="http://files.phpclasses.org/graphics/add.gif" alt="Submit subscription" id="button_subscribe" accesskey="u" align="top"  onclick="submitInput='image'"/> Image Submit button</td>
</tr>

<tr>
<td colspan="3" align="center"><button type="submit" name="button" id="button_subscribe_with_content" accesskey="c" onclick="submitInput='button'"><img align="top" src="http://files.phpclasses.org/graphics/add.gif" style="border-width: 0px;" alt="Submit button with content"/> Submit button with <u>c</u>ontent</button><input type="hidden" name="doit" value="1"/></td>
</tr>

</table></center>
</td>
</tr>
</table></center>
</div></form>
</body>
</html>

  Files folder image Files (3)  
File Role Description
Plain text file ajaxLoadContent.js Class AJAX content loader object
Accessible without login Plain text file testAJAXLoadContent.html Example AJAX content loader example page
Accessible without login Plain text file testAJAXLoadContent.php Data AJAX content loader example response script

Downloadajax-load-content-2014-10-28.zip 6KB
Downloadajax-load-content-2014-10-28.tar.gz 5KB
 Version Control Unique User Downloads Download Rankings  
 100%
Total:353
This week:0
All time:113
This week:4Up
User Comments (1)
Nice
8 years ago (Farhadur Rahim)		52%StarStarStar
 

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.