%META:TOPICINFO{author="TWikiContributor" date="1162505056" format="1.1" version="1.2"}%
---+!! !TWikiAjaxContrib Examples

*Code examples and demos for TWikiAjaxContrib.*

<!-- Dependencies -->
<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/YahooUserInterfaceContrib/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/YahooUserInterfaceContrib/build/connection/connection.js"></script>
<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiJavascripts/twikilib.js"></script>
<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiJavascripts/twikiArray.js"></script>
<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiJavascripts/twikiHTML.js"></script>
<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiAjaxContrib/twikiAjaxRequest.compressed.js"></script>
<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/BehaviourContrib/behaviour.compressed.js"></script>
<!-- Additional script for this page -->
<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiJavascripts/twikiForm.js"></script>

%TOC{title="On this page:"}%

---++ Default loading indicator

Because TWiki files are served along dynamic urls we cannot use a static url for the indicator; instead we create HTML with a path to our own default loading incidator.

<blockquote>
<verbatim>
twiki.AjaxRequest.setDefaultIndicatorHtml(
	"<img src='%PUBURL%/%TWIKIWEB%/TWikiAjaxContrib/indicator.gif' alt='' />"
	);
</verbatim>
</blockquote>

<script type="text/javascript">
// <![CDATA[
twiki.AjaxRequest.setDefaultIndicatorHtml(
	"<img src='%PUBURL%/%TWIKIWEB%/TWikiAjaxContrib/indicator.gif' alt='' />"
	);
// ]]>
</script>

We can <a href="#" id="retrieve_loading_indicator">retrieve the loading indicator</a>:
<div id="loadingIndicatorContainer"></div>

<blockquote>
<verbatim>
twiki.AjaxRequest.getDefaultIndicatorHtml();
</verbatim>
</blockquote>

<script type="text/javascript">
// <![CDATA[
function showLoadingIndicator () {
	insertHtml(twiki.AjaxRequest.getDefaultIndicatorHtml(), "loadingIndicatorContainer");
}
var myrules = {
	'#retrieve_loading_indicator' : function(el) {
		el.onclick = function() {
			showLoadingIndicator();
			return false;
		}
	}
};
Behaviour.register(myrules);
// ]]>
</script>


---++ Loading directly

%TWISTY{id="autoload" mode="div" showlink=" Show example code" hidelink=" Hide example code"
showimgleft="%ICONURLPATH{code}%" 
hideimgleft="%ICONURLPATH{code}%"}%
<blockquote>
<verbatim>
function autoLoad () {
	twiki.AjaxRequest.load(
		"AUTOLOAD",
		{
			container:"autoLoadContainer",
			url:"%PUBURL%/%TWIKIWEB%/TWikiAjaxContribExamples/test_hamlet.html?"
		});
}
addLoadEvent(autoLoad);
</verbatim>
</blockquote>
%ENDTWISTY%

---+++!! Demo

<div>
	Autoload
	<div id="autoLoadContainer" style="width:300px; height:300px; overflow:auto; padding:10px; border:1px solid #999;"></div>
</div>

<script type="text/javascript">
// <![CDATA[
function autoLoad () {
	twiki.AjaxRequest.load(
		"AUTOLOAD",
		{
			container:"autoLoadContainer",
			url:"%PUBURL%/%TWIKIWEB%/TWikiAjaxContribExamples/test_hamlet.html?"
		});
}
addLoadEvent(autoLoad);
// ]]>
</script>



---++ Page parts / Named Sections

%TWISTY{id="namedsections" mode="div" showlink=" Show example code" hidelink=" Hide example code"
showimgleft="%ICONURLPATH{code}%" 
hideimgleft="%ICONURLPATH{code}%"}%
<blockquote>
<verbatim>
function showNewTopicForm(el) {

	// load javascript
	var javascriptUrl = "%SCRIPTURL{"view"}%/%TWIKIWEB%/WebTopicCreator?skin=text"
				+ ";section=" + "javascriptfunctions";
				
	twiki.AjaxRequest.load("NEWTOPICFORM_JS",
		{
			url:javascriptUrl,
			type:"script",
			cache:true
		});
		

	var containerId = "newTopicFormContainer";
	
	// remove old container if any
	twiki.HTML.deleteElementWithId(containerId);
	
	var topicName = el.innerHTML.split("<")[0];
	var newContainer = twiki.HTML.insertAfterElement(
		el,
		'div',
		'',
		{
			"id":containerId,
			"style":
				{
					"margin":"0 0 .5em 0"
				}
		}
	);
	var url = "%SCRIPTURL{"view"}%/%TWIKIWEB%/WebTopicCreator?skin=text"
				+ ";section=" + "newtopicform"
				+ ";newtopic=" + topicName
				+ ";parent=" + "<nop>%TOPIC%";
	twiki.AjaxRequest.load("NEWTOPICFORM",
		{
			container:containerId,
			url:url
		});
}
var myrules = {
	'.twikiNewLink a' : function(el) {
		el.onclick = function() {
			showNewTopicForm(el.parentNode);
			return false;
		}
	}
};
Behaviour.register(myrules);
</verbatim>
</blockquote>
%ENDTWISTY%

---+++!! Demo

%ICON{hand}% Click on the "new topic link question mark" at =DoesNotExist= in the text below to retrieve the "Create new topic" form (located at WebTopicCreator):

<div style="background:#FFEFF1; padding:.5em;">
Good now, sit down, and tell me, he that knows,
Why this same strict and most observant watch
So nightly toils the subject of the land, DoesNotExist
And why such daily cast of brazen cannon,
And foreign mart for implements of war;
Why such impress of shipwrights, whose sore task
Does not divide the Sunday from the week;
What might be toward, that this sweaty haste
Doth make the night joint-labourer with the day:
Who is't that can inform me?
</div>

<script type="text/javascript">
// <![CDATA[
function showNewTopicForm(el) {

	// load javascript
	var javascriptUrl = "%SCRIPTURL{"view"}%/%TWIKIWEB%/WebTopicCreator?skin=text"
				+ ";section=javascriptfunctions";
				
	twiki.AjaxRequest.load("NEWTOPICFORM_JS",
		{
			url:javascriptUrl,
			type:"script",
			cache:true
		});
		

	var containerId = "newTopicFormContainer";
	
	// remove old container if any
	twiki.HTML.deleteElementWithId(containerId);
	
	var topicName = el.innerHTML.split("<")[0];
	var newContainer = twiki.HTML.insertAfterElement(
		el,
		'div',
		'',
		{
			"id":containerId,
			"style":
				{
					"margin":"0 0 .5em 0"
				}
		}
	);
	var url = "%SCRIPTURL{"view"}%/%TWIKIWEB%/WebTopicCreator?skin=text"
				+ ";section=" + "newtopicform"
				+ ";newtopic=" + topicName
				+ ";parent=" + "<nop>%TOPIC%";
	twiki.AjaxRequest.load("NEWTOPICFORM",
		{
			container:containerId,
			url:url
		});
}
var myrules = {
	'.twikiNewLink a' : function(el) {
		el.onclick = function() {
			showNewTopicForm(el.parentNode);
			return false;
		}
	}
};
Behaviour.register(myrules);
// ]]>
</script>

---++ Plugins vs. Skins

%TWISTY{id="example_plugins_vs_skins" mode="div" showlink=" Show example code" hidelink=" Hide example code"
showimgleft="%ICONURLPATH{code}%" 
hideimgleft="%ICONURLPATH{code}%"}%

<blockquote>
<verbatim>
var Plugin = {
	init:function () {
		twiki.AjaxRequest.setProperties("SEARCHRESULTS",
  			{
  				container:"searchResultsPluginContainer",
      			url:"%PUBURL%/%TWIKIWEB%/TWikiAjaxContribExamples/test_hamlet.html?"
   			});
	},
	loadSearchResultsButton:function () {
		// For testing try to use the earlier defined container
		// if all is well, this should not succeed
		twiki.AjaxRequest.setProperties("SEARCHRESULTS",
  			{
      			container:"searchResultsPluginContainer"
   			});
		twiki.AjaxRequest.load("SEARCHRESULTS");
	}
}
Plugin.init();


var Template = {
	init:function () {
		twiki.AjaxRequest.setProperties("SEARCHRESULTS",
  			{
      			container:"searchResultsTemplateContainer"
   			});
		twiki.AjaxRequest.lockProperties("SEARCHRESULTS", "container");
	}
}
Template.init();


var myrules = {
	'#loadSearchResultsButton' : function(el) {
		el.onclick = function() {
			Plugin.loadSearchResultsButton();
			return false;
		}
	}
};
Behaviour.register(myrules);
</verbatim>
</blockquote>
%ENDTWISTY%

---+++!! Demo
<div style="margin:1em 0;">
<input id="loadSearchResultsButton" class="twikiButton" type="button" value="Load contents" />
<br />
<div style="float:left; margin:1em 1em 0 0;">
	Plugin container
	<div id="searchResultsPluginContainer" style="width:300px; height:300px; overflow:auto; padding:10px; border:1px solid #999;"></div>
</div>
<div style="float:left; margin:1em 1em 0 0;">
	Template container
	<div id="searchResultsTemplateContainer" style="width:300px; height:300px; overflow:auto; padding:10px; border:1px solid #999;"></div>
</div>
<br class="twikiClear" />
</div>

<script type="text/javascript">
// <![CDATA[
var Plugin = {
	init:function () {
		twiki.AjaxRequest.setProperties("SEARCHRESULTS",
  			{
  				container:"searchResultsPluginContainer",
      			url:"%PUBURL%/%TWIKIWEB%/TWikiAjaxContribExamples/test_hamlet.html?"
   			});
	},
	loadSearchResultsButton:function () {
		// For testing try to use the earlier defined container
		// if all is well, this should not succeed
		twiki.AjaxRequest.setProperties("SEARCHRESULTS",
  			{
      			container:"searchResultsPluginContainer"
   			});
		twiki.AjaxRequest.load("SEARCHRESULTS");
	}
}
Plugin.init();


var Template = {
	init:function () {
		twiki.AjaxRequest.setProperties("SEARCHRESULTS",
  			{
      			container:"searchResultsTemplateContainer"
   			});
		twiki.AjaxRequest.lockProperties("SEARCHRESULTS", "container");
	}
}
Template.init();


var myrules = {
	'#loadSearchResultsButton' : function(el) {
		el.onclick = function() {
			Plugin.loadSearchResultsButton();
			return false;
		}
	}
};
Behaviour.register(myrules);
// ]]>
</script>


---++ Caching results

%TWISTY{id="example_caching" mode="div" showlink=" Show example code" hidelink=" Hide example code"
showimgleft="%ICONURLPATH{code}%" 
hideimgleft="%ICONURLPATH{code}%"}%

<blockquote>
<verbatim>
function writeContent () {
	twiki.AjaxRequest.load(
		"CACHEDRESULTS",
		{
			container:"cachedContentContainer",
			url:"%SCRIPTURL{view}%/%TWIKIWEB%/WikiSyntaxSummary?skin=text",
			cache:true
		});
}

function clearCache () {
	twiki.AjaxRequest.clearCache("CACHEDRESULTS");
}

var myrules = {
	'#example_caching_demoshow' : function(el) {
		var oldOnClick = el.onclick;
		el.onclick = function() {
			writeContent();
			oldOnClick();
			return false;
		}
	},
	'#clearCacheButton' : function(el) {
		el.onclick = function() {
			clearCache();
			return false;
		}
	}
};
Behaviour.register(myrules);
</verbatim>
</blockquote>
%ENDTWISTY%


---+++!! Demo

%TWISTY{id="example_caching_demo" mode="div" showlink="Show (cached)" hidelink="Hide"
showimgleft="%ICONURLPATH{toggleopen-small}%" 
hideimgleft="%ICONURLPATH{toggleclose-small}%"}%
<div id="example_caching_demo_contents">
	<div id="cachedContentContainer" style="width:600px; padding:10px; border:1px solid #999;"></div>
	<p><input id="clearCacheButton" class="twikiButton" type="button" value="Clear cache" /></p>
<br />
</div>
%ENDTWISTY%

<script type="text/javascript">
// <![CDATA[
function writeContent () {
	twiki.AjaxRequest.load(
		"CACHEDRESULTS",
		{
			container:"cachedContentContainer",
			url:"%SCRIPTURL{view}%/%TWIKIWEB%/WikiSyntaxSummary?skin=text",
			cache:true
		});
}

function clearCache () {
	twiki.AjaxRequest.clearCache("CACHEDRESULTS");
}

var myrules = {
	'#example_caching_demoshow' : function(el) {
		var oldOnClick = el.onclick;
		el.onclick = function() {
			writeContent();
			oldOnClick();
			return false;
		}
	},
	'#clearCacheButton' : function(el) {
		el.onclick = function() {
			clearCache();
			return false;
		}
	}
};
Behaviour.register(myrules);
// ]]>
</script>



---++ Custom loading indicator

%TWISTY{id="customloadingindicator" mode="div" showlink=" Show example code" hidelink=" Hide example code"
showimgleft="%ICONURLPATH{code}%" 
hideimgleft="%ICONURLPATH{code}%"}%
<blockquote>
<verbatim>
var indicatorHtml = "<div style=\"background-color:red; color:white; padding:.5em;\">Loading...<\/div>";

twiki.AjaxRequest.setProperties("CUSTOM_CONTAINER",
	{
		container:"customIndicatorContainer",
		url:"%PUBURL%/%TWIKIWEB%/TWikiAjaxContribExamples/test_hamlet.html?",
		indicator:indicatorHtml
	});
   			
function loadWithCustomIndicatorButton () {
	twiki.AjaxRequest.load("CUSTOM_CONTAINER");
}

var myrules = {
	'#loadWithCustomIndicatorButton' : function(el) {
		el.onclick = function() {
			loadWithCustomIndicatorButton();
			return false;
		}
	}
};
Behaviour.register(myrules);
</verbatim>
</blockquote>
%ENDTWISTY%

---+++!! Demo

<input id="loadWithCustomIndicatorButton" class="twikiButton" type="button" value="Load contents" />
<br />
<div style="margin:1em 0 0 0;">
	<div id="customIndicatorContainer" style="width:300px; height:300px; overflow:auto; padding:10px; border:1px solid #999;"></div>
</div>

<script type="text/javascript">
// <![CDATA[
var indicatorHtml = "<div style=\"background-color:red; color:white; padding:.5em;\">Loading...<\/div>";

twiki.AjaxRequest.setProperties("CUSTOM_CONTAINER",
	{
		container:"customIndicatorContainer",
		url:"%PUBURL%/%TWIKIWEB%/TWikiAjaxContribExamples/test_hamlet.html?",
		indicator:indicatorHtml
	});
   			
function loadWithCustomIndicatorButton () {
	twiki.AjaxRequest.load("CUSTOM_CONTAINER");
}

var myrules = {
	'#loadWithCustomIndicatorButton' : function(el) {
		el.onclick = function() {
			loadWithCustomIndicatorButton();
			return false;
		}
	}
};
Behaviour.register(myrules);
// ]]>
</script>



---++ HTML processing

%TWISTY{id="htmlprocessing" mode="div" showlink=" Show example code" hidelink=" Hide example code"
showimgleft="%ICONURLPATH{code}%" 
hideimgleft="%ICONURLPATH{code}%"}%
<blockquote>
<verbatim>
twiki.AjaxRequest.setProperties(
	"HTML_DATA",
	{
		url:"%SCRIPTURL{view}%/%TWIKIWEB%/WikiSyntaxSummary?skin=text",
		handler:"handleHtml",
		scope:this,
		container:"cachedHtmlProcessingContentContainer",
		cache:true
	});
	
function handleHtml (inId, inHtml) {

	// example 1: wrap in styled container
	var processedHtml = "<h2>Processed text:<\/h2>" + 
		"<div style=\"font-style:italic;\">" +
		inHtml +
		"<\/div>";
	var element = twiki.HTML.setHtmlOfElementWithId(inId, processedHtml);
		
	// example 2: style list elements
	var attributes = {
    		"class":"twikiSmall twikiGrayText",
    		"style":
    			{
    				"fontSize":"20px",
    				"backgroundColor":"#444",
    				"borderLeft":"5px solid red",
					"margin":"0 0 1em 0"
    			}
    	};
	twiki.HTML.setNodeAttributesInList(element.getElementsByTagName('ul'), attributes);
	
	// example 3: reverse texts
	reverseNodeTextsInList(element.getElementsByTagName('p'));

	// return HTML to be cached
	return twiki.HTML.getHtmlOfElementWithId(inId);
}

function reverseNodeTextsInList (inNodeList) {
	var i, ilen = inNodeList.length;
	for (i=0; i<ilen; ++i) {	
		var node = inNodeList[i];
		if (node && node.nodeType == 3) {
			node.data = reverseText(node.data);
		}
		if (node && node.nodeType == 1) {
			node.firstChild.data = reverseText(node.firstChild.data);
		}
	}
}

function reverseText (inText) {
	if (!inText) return '';
	var outText = "";
	var i, ilen = inText.length;
	for (i=0; i<ilen; ++i) {
		outText = inText.substring(i, i+1) + outText;
	}
	return outText;
}

function loadHtmlContent () {
	twiki.AjaxRequest.load("HTML_DATA");
}

function clearHtmlCache () {
	twiki.AjaxRequest.clearCache("HTML_DATA");
}

var myrules = {
	'#example_htmlProcessing_caching_demoshow' : function(el) {
		var oldOnClick = el.onclick;
		el.onclick = function() {
			loadHtmlContent();
			oldOnClick();
			return false;
		}
	},
	'#clearHtmlProcessingCacheButton' : function(el) {
		el.onclick = function() {
			clearHtmlCache();
			return false;
		}
	}
};
Behaviour.register(myrules);
</verbatim>
</blockquote>
%ENDTWISTY%

---+++!! Demo

%TWISTY{id="example_htmlProcessing_caching_demo" mode="div" showlink="Show (cached)" hidelink="Hide"
showimgleft="%ICONURLPATH{toggleopen-small}%" 
hideimgleft="%ICONURLPATH{toggleclose-small}%"}%
<div id="example_caching_demo_contents">
	<div id="cachedHtmlProcessingContentContainer" style="width:600px; padding:10px; border:1px solid #999;"></div>
	<p><input id="clearHtmlProcessingCacheButton" class="twikiButton" type="button" value="Clear cache" /></p>
<br />
</div>
%ENDTWISTY%

<script type="text/javascript">
// <![CDATA[
twiki.AjaxRequest.setProperties(
	"HTML_DATA",
	{
		url:"%SCRIPTURL{view}%/%TWIKIWEB%/WikiSyntaxSummary?skin=text",
		handler:"handleHtml",
		scope:this,
		container:"cachedHtmlProcessingContentContainer",
		cache:true
	});
	
function handleHtml (inId, inHtml) {

	// example 1: wrap in styled container
	var processedHtml = "<h2>Processed text:<\/h2>" + 
		"<div style=\"font-style:italic;\">" +
		inHtml +
		"<\/div>";
	var element = twiki.HTML.setHtmlOfElementWithId(inId, processedHtml);
		
	// example 2: style list elements
	var attributes = {
    		"class":"twikiSmall twikiGrayText",
    		"style":
    			{
    				"fontSize":"20px",
    				"backgroundColor":"#444",
    				"borderLeft":"5px solid red",
					"margin":"0 0 1em 0"
    			}
    	};
	twiki.HTML.setNodeAttributesInList(element.getElementsByTagName('ul'), attributes);
	
	// example 3: reverse texts
	reverseNodeTextsInList(element.getElementsByTagName('p'));

	// return HTML to be cached
	return twiki.HTML.getHtmlOfElementWithId(inId);
}

function reverseNodeTextsInList (inNodeList) {
	var i, ilen = inNodeList.length;
	for (i=0; i<ilen; ++i) {
		var node = inNodeList[i];
		if (node && node.nodeType == 3) {
			node.data = reverseText(node.data);
		}
		if (node && node.nodeType == 1) {
			node.firstChild.data = reverseText(node.firstChild.data);
		}
	}
}

function reverseText (inText) {
	if (!inText) return '';
	var outText = "";
	var i, ilen = inText.length;
	for (i=0; i<ilen; ++i) {
		outText = inText.substring(i, i+1) + outText;
	}
	return outText;
}

function loadHtmlContent () {
	twiki.AjaxRequest.load("HTML_DATA");
}

function clearHtmlCache () {
	twiki.AjaxRequest.clearCache("HTML_DATA");
}

var myrules = {
	'#example_htmlProcessing_caching_demoshow' : function(el) {
		var oldOnClick = el.onclick;
		el.onclick = function() {
			loadHtmlContent();
			oldOnClick();
			return false;
		}
	},
	'#clearHtmlProcessingCacheButton' : function(el) {
		el.onclick = function() {
			clearHtmlCache();
			return false;
		}
	}
};
Behaviour.register(myrules);
// ]]>
</script>



---++ XML data handling

%TWISTY{id="xmldata" mode="div" showlink=" Show example code" hidelink=" Hide example code"
showimgleft="%ICONURLPATH{code}%" 
hideimgleft="%ICONURLPATH{code}%"}%
<blockquote>
<verbatim>
twiki.AjaxRequest.setProperties(
	"COUNTRIES",
	{
		url:"%PUBURL%/%TWIKIWEB%/TWikiAjaxContribExamples/test_cities.xml?",
		handler:"processCountryData",
		scope:this,
		type:"xml",
		container:"countriesContainer"
	});
	
function processCountryData (inContainerId, inXml) {
	var countries = [];
	var elems = inXml.getElementsByTagName("country");
	if (elems) {
		for (var i=0; i<elems.length; i++) {
			countries[i] = elems[i].getAttribute("name");
		}
		countries.sort();
	}
	var outText = "";
	var ilen = countries.length;
	if (ilen == 0) return;
	
	for (var i=0; i<ilen; ++i) {
		outText += "<li>" + countries[i] + "<\/li>"
	}
	outText = "<ul>" + outText + "<\/ul>";
	twiki.HTML.setHtmlOfElementWithId(inContainerId, outText);
}


function showCountries () {
	twiki.AjaxRequest.load("COUNTRIES");
}

var myrules = {
	'#loadXmlDataButton' : function(el) {
		el.onclick = function() {
			showCountries();
			return false;
		}
	}
};
Behaviour.register(myrules);
</verbatim>
</blockquote>
%ENDTWISTY%

---+++!! Demo

<input id="loadXmlDataButton" class="twikiButton" type="button" value="Load XML data" />
<br />
<div style="margin:1em 0 0 0;">
	<div id="xmlDataContainer" style="width:300px; height:300px; overflow:auto; padding:10px; border:1px solid #999;">Countries</div>
</div>

<script type="text/javascript">
// <![CDATA[
twiki.AjaxRequest.setProperties(
	"COUNTRIES",
	{
		url:"%PUBURL%/%TWIKIWEB%/TWikiAjaxContribExamples/test_cities.xml?",
		handler:"processCountryData",
		scope:this,
		type:"xml",
		container:"xmlDataContainer"
	});
	
function processCountryData (inContainerId, inXml) {
	var countries = [];
	var elems = inXml.getElementsByTagName("country");
	if (elems) {
		for (var i=0; i<elems.length; i++) {
			countries[i] = elems[i].getAttribute("name");
		}
		countries.sort();
	}
	var outText = "";
	var ilen = countries.length;
	if (ilen == 0) return;
	
	for (var i=0; i<ilen; ++i) {
		outText += "<li>" + countries[i] + "<\/li>"
	}
	outText = "<ul>" + outText + "<\/ul>";
	twiki.HTML.setHtmlOfElementWithId(inContainerId, outText);
}

function showCountries () {
	twiki.AjaxRequest.load("COUNTRIES");
}

var myrules = {
	'#loadXmlDataButton' : function(el) {
		el.onclick = function() {
			showCountries();
			return false;
		}
	}
};
Behaviour.register(myrules);
// ]]>
</script>

---++ Sending data with POST

%TWISTY{id="postdata" mode="div" showlink=" Show example code" hidelink=" Hide example code"
showimgleft="%ICONURLPATH{code}%" 
hideimgleft="%ICONURLPATH{code}%"}%
<blockquote>
<verbatim>
function postSearchForm () {
	var queryString = twiki.Form.formData2QueryString(
		document.getElementById('searchForm')
	);
	twiki.AjaxRequest.load(
		"SEARCH_DATA",
		{
			container:"searchResults",
			url:"%SCRIPTURLPATH{search}%/%INCLUDINGWEB%/%INCLUDINGTOPIC%",	
			method:"POST",
			postData:queryString
		});
}

var myrules = {
	'#submitSearchButton' : function(el) {
		el.onclick = function() {
			postSearchForm();
			return false;
		}
	}
};
Behaviour.register(myrules);
</verbatim>
</blockquote>
%ENDTWISTY%

---+++!! Demo

<div class="twikiPageForm">
<form id="searchForm" name="searchForm" action="postSearchForm()">
<table id="twikiSearchTable" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" class="first">
  <input type="text" class="twikiInputField" name="search" value="%URLPARAM{ "search" encode="entity" default="TWiki"}%" size="40" /> 
  <input id="submitSearchButton" type="submit" class="twikiSubmit" value='%MAKETEXT{"Search"}%' /><span class="twikiSmall">&nbsp;&nbsp;[[%INCLUDINGWEB%.WebSearchAdvanced][%MAKETEXT{"Advanced search"}%]] | [[%TWIKIWEB%.SearchHelp][%MAKETEXT{"Help"}%]]</span>
<div class="twikiSmall" style="padding:1em 0 0 0;">%MAKETEXT{"TIP: to search for all topics that contain =\"SOAP\"=, =\"WSDL\"=, a literal =\"web service\"=, but not =\"shampoo\"=, write:"}% <code>soap wsdl "web service" -shampoo</code></div>
</td>
</tr>
<tr>
<th class="last">%MAKETEXT{"Search where:"}%</th>
<td class="last">
<input type="radio" class="twikiRadioButton" id="textbody" name="scope" value="text" %IF{" '%URLPARAM{"scope" default="text"}%' = 'text' " then="checked=\"checked\"" else=""}% /><label for="textbody"> %MAKETEXT{"Text body"}%</label>&nbsp;&nbsp;&nbsp;<input type="radio" class="twikiRadioButton" id="topictitle" name="scope" value="topic" %IF{" '%URLPARAM{scope}%' = 'topic' " then="checked=\"checked\"" else=""}% /><label for="topictitle"> %MAKETEXT{"Topic title"}%</label>&nbsp;&nbsp;&nbsp;<input type="radio" class="twikiRadioButton" id="both" name="scope" value="all" %IF{" '%URLPARAM{scope}%' = 'all' " then="checked=\"checked\"" else=""}% /><label for="both"> %MAKETEXT{"Both body and title"}%</label>
<hr />
<input type="checkbox" class="twikiCheckbox" id="web" name="web" %IF{" '%URLPARAM{web}%' = 'on'" then="checked=\"checked\"" else=""}% /><label for="web"> %MAKETEXT{"All public webs"}%</label> <span class="twikiSmall">%MAKETEXT{"(otherwise search [_1] Web only)" args="<nop>%INCLUDINGWEB%"}%</span>
<input type=hidden id="skin" name="skin" value="text" />
</td>
</tr>
</table>
</form>
</div>
<div style="margin:1em 0 0 0;">
	<div id="searchResults" style="padding:10px; border:1px solid #ccc;">Search results</div>
</div>

<script type="text/javascript">
// <![CDATA[
function postSearchForm () {
	var queryString = twiki.Form.formData2QueryString(
		document.getElementById('searchForm')
	);
	twiki.AjaxRequest.load(
		"SEARCH_DATA",
		{
			container:"searchResults",
			url:"%SCRIPTURLPATH{search}%/%INCLUDINGWEB%/%INCLUDINGTOPIC%",	
			method:"POST",
			postData:queryString
		});
}

var myrules = {
	'#submitSearchButton' : function(el) {
		el.onclick = function() {
			postSearchForm();
			return false;
		}
	}
};
Behaviour.register(myrules);
// ]]>
</script>

---++ Dealing with failure

%TWISTY{id="failure" mode="div" showlink=" Show example code" hidelink=" Hide example code"
showimgleft="%ICONURLPATH{code}%" 
hideimgleft="%ICONURLPATH{code}%"}%
<blockquote>
<verbatim>
twiki.AjaxRequest.setProperties(
	"FAILURE",
	{
		failHandler:"handleFailed",
		failScope:this
	});

function handleFailed(inName, inStatus) {
	var html = "<div style=\"background:#ffc; padding:.5em;\">" + 
		"Could not load contents. Please try again later." + 
		"<\/div>";
	twiki.HTML.setHtmlOfElementWithId("failureContainer", html);
}

function loadFailure () {
	twiki.AjaxRequest.load(
		"FAILURE",
		{
			container:"failureContainer",
			/* use wrong url */
			url:"%PUBURL%/%TWIKIWEB%/twikiajaxcontrib/bla"
		});
}

var myrules = {
	'#failureButton' : function(el) {
		el.onclick = function() {
			loadFailure();
			return false;
		}
	}
};
Behaviour.register(myrules);
</verbatim>
</blockquote>
%ENDTWISTY%

---+++!! Demo

<input id="failureButton" class="twikiButton" type="button" value="Load (failing) contents" />
<br />
<div style="margin:1em 0 0 0;">
	<div id="failureContainer" style="width:300px; height:100px; overflow:auto; padding:10px; border:1px solid #999;"></div>
</div>

<script type="text/javascript">
// <![CDATA[
twiki.AjaxRequest.setProperties(
	"FAILURE",
	{
		failHandler:"handleFailed",
		failScope:this
	});

function handleFailed(inName, inStatus) {
	var html = "<div style=\"background:#ffc; padding:.5em;\">" + 
		"Could not load contents. Please try again later." + 
		"<\/div>";
	twiki.HTML.setHtmlOfElementWithId("failureContainer", html);
}

function loadFailure () {
	twiki.AjaxRequest.load(
		"FAILURE",
		{
			container:"failureContainer",
			/* for this demo to work use a wrong url */
			url:"%PUBURL%/%TWIKIWEB%/TWikiAjaxContrib/bla"
		});
}

var myrules = {
	'#failureButton' : function(el) {
		el.onclick = function() {
			loadFailure();
			return false;
		}
	}
};
Behaviour.register(myrules);
// ]]>
</script>



%META:FILEATTACHMENT{name="test_cities.xml" attr="" autoattached="1" comment="" date="1162426723" path="test_cities.xml" size="47135" user="UnknownUser" version=""}%
%META:FILEATTACHMENT{name="test_hamlet.html" attr="" autoattached="1" comment="" date="1162150777" path="test_hamlet.html" size="247011" user="UnknownUser" version=""}%
