WidgetPublisher:Using Ajax

From WidgetAvenue

(Redirected from Using Ajax)
Jump to: navigation, search

Contents

Using a simple link

The first and most simple way to use Ajax is to use a simple link. When the target of the link is _self, or no target is specified, the response is loaded inside the widget. The destination node can be specified using the # notation.

Creating the source waHTML file

Create an ajax.html file on your server with the following content: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
 <title></title>
</head>
<body>
	
 <a href="./response.html#ldWidgetNodeToUpdate" target="_self">
  Update using node replace
 </a>

 <div class="ldWidgetNodeToUpdate">
  <table style="width:100%">
   <tr style="border:1px;color:white;background:#333;">
   	<th>Name</th><td></td>
   </tr>
   <tr style="border:1px;color:white;background:#444;">
   	<th>City</th><td></td>
   </tr>
   <tr style="border:1px;color:white;background:#333;">
   	<th>Country</th><td></td>
   </tr>
  </table>
 </div>

</body>
</html>

Creating the Ajax reponse file

Create a response.html file on your server with the following content: 

 <table style="width:100%">
  <tr style="border:1px;color:white;background:#D33;">
  	<th>Name</th><td>Yamamoto</td>
  </tr>
  <tr style="border:1px;color:white;background:#A44;">
  	<th>City</th><td>Tokyo</td>
  </tr>
  <tr style="border:1px;color:white;background:#D33;">
  	<th>Country</th><td>Japan</td>
  </tr>
 </table>

Building the URL to display the standalone version of the widget

Once again, the most simple option is to display the standalone version of your widget. If your source HTML file is located at http://myserver.com/ajax.html, you will be able to display your widget at 

http://www.widgetavenue.com/wdg/loaders/stn.php?root=html&url=http%3A%2F%2Fmyserver.com%2Fajax.html

If your URL is correct, you should get something similar to this .

Using match nodes

The second option is to use the ldWidgetRefesh className in the response file. When this className is used inside the response file, the content of the node in the source file are matched with the content of the node in the response. Here is an example to understand how it works

Creating the source waHTML file

Create an ajax.html file on your server with the following content: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
</head>
<body>

 <a href="./response.html#ldWidgetVoid">Update using node matching</a>
 <table style="width:100%">
  <tr style="border:1px;color:white;background:#333;">
   <th>Name</th><td class="ldWidgetName"></td>
  </tr>
  <tr style="border:1px;color:white;background:#444;">
   <th>City</th><td class="ldWidgetCity"></td>
  </tr>
  <tr style="border:1px;color:white;background:#333;">
   <th>Country</th><td class="ldWidgetCountry"></td>
  </tr>
 </table>

</body>
</html>

Creating the Ajax response file

Create a response.html file on your server with the following content: 

 <div class="ldWidgetRefresh">
  <div class="ldWidgetName">Yamamoto</div>
  <div class="ldWidgetCity">Tokyo</div>
  <div class="ldWidgetCountry">Japan</div>
 </div>

Building the URL to display the standalone version of the widget

Once again, the most simple option is to display the standalone version of your widget. If your source HTML file is located at http://myserver.com/ajax.html, you will be able to display your widget at 

http://www.widgetavenue.com/wdg/loaders/stn.php?root=html&url=http%3A%2F%2Fmyserver.com%2Fajax.html

If your URL is correct, you should get something similar to this .

Using waJS

The third method is to use the ldWidgetUid_ajaxCall function available in waJS.

Creating the source waHTML file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
 <title></title>
</head>

<body>
 <a href="#" class="ldWidgetJS_makeAjaxCall_click">
  Update using javascript
  </a>
 <table style="width:100%">
  <tr style="border:1px;color:white;background:#333;">
  	<th>Name</th><td class="ldWidgetName"></td>
  </tr>
  <tr style="border:1px;color:white;background:#444;">
  	<th>City</th><td class="ldWidgetCity"></td>
  </tr>
  <tr style="border:1px;color:white;background:#333;">
  	<th>Country</th><td class="ldWidgetCountry"></td>
  </tr>
 </table>
</body>

</html>

Creating the waJS file

Create a js.js file with the following content: 

ldWidgetUid_JS['makeAjaxCall'] = function(elt) {
	ldWidgetUid_ajaxCall(
		'http://www.widgetavenue.com/modules/exa/update_content/ajax_call_response.txt', /*url*/ 
		'', /* destNode */ 
		'',   /* wait function */
		"handleResponse"  /* callback handler name */
	);
}

handleResponse = function( url, destNode, content ) {
	var data = content.split(' ');
	ldWidgetUid_setInnerHtml('ldWidgetName',data[0]);
	ldWidgetUid_setInnerHtml('ldWidgetCity',data[1]);
	ldWidgetUid_setInnerHtml('ldWidgetCountry',data[2]);
}

Creating the Ajax response file

Create a response.txt with the following content 

Yamamoto Tokyo Japan

Building the URL to display the standalone version of the widget

Once again, the most simple option is to display the standalone version of your widget. If your source HTML file is located at http://myserver.com/ajax.html, you will be able to display your widget at 

http://www.widgetavenue.com/wdg/loaders/stn.php?root=html&url=http%3A%2F%2Fmyserver.com%2Fajax.html&_js=js.js

If your URL is correct, you should get something similar to this .

Retrieved from "http://www.widgetavenue.com/w/WidgetPublisher:Using_Ajax"
Personal tools