Tutorial

• start using PlainAjax
• send ajax request to the server
• post data from HTML input elements
• inplace editor
• autoresend (implement a web-chat)

In place editor

Task description

Implementing an in-place editor.

Working example

In-place editor widget

Implementation steps

The response of the server can contain PlainAjax code, if that response is inserted into the HTML page, it will be executed by a trigger the same way. This makes it easy to create an in-place editor widget.

• Create a HTML div to contain the widget
• Call Plainajax to request the widget in view mode from the server

The HTML Code

<script type="text/javascript">
  plainajax.request('respurl: editor.php; resultloc: editor;');
</script>
<div id="editor">
</div>

HTML code in server responses (view & edit mode)

{stored text from db} .' | <a 
onclick="plainajax.request(\'respurl: editor.php?mode=edit; resultloc: editor;\')">
Edit text
</a>';

<div id="inputtext">
<input type="text" name="text" value="{stored text in db}" size="30" />
<a onclick="plainajax.request(\'respurl: editor.php; resultloc: editor; paramloc: inputtext;\')">
Submit changes
</a>
</div>

Note:

The server side component sends back the widget (HTML code) in view / edit mode when needed. Updates the text from the input field when received.

Check another example on how to

• send an Ajax request to the webserver and display its response
• post data from HTML input elements to the server using Ajax
• autoresend (implement a web-based chat)