As an Ajax Form
One nice use for the plugin is as an ajax-enabled form. This requires at least two templates: one to display the form, others to perform any database operations. Say we want to insert a row in a custom table in our database with the user's favorite color. The table,
member_colors, has two columns:
member_id and
color. Here is our display template:
{if logged_in}
<form id="color-form">
<p>{screen_name}, please enter your favorite color: <input type="text" id="color-input"> <input id="color-button" type="button" value="Send"></p>
</form>
<div id="color-form-operations"></div>
{if:else}
<p>Please log in to use this form.</p>
{/if}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function()
{
$('#color-button').live('click', function(event)
{
member_id = "{member_id}";
color = $('#color-input').val();
file = '{path=/}insert-color/' + member_id + '/' + color + '/';
$('#color-form-operations').load(file);
});
});
</script>
Note the empty div, "color-form-operations". Into this div we'll load our operations template, "insert-color", using jQuery's .load() function when the user submits. The template gets our member_id and color value from its URL segments.
{if member_id == segment_2}
{exp:external_entries:insert table="member_colors" debug="n"}
{insert:member_id}{segment_2}{/insert:member_id}
{insert:color}{segment_3}{/insert:color}
{/exp:external_entries:insert}
{exp:external_entries:select table="member_colors" search:member_id="{segment_2}" debug="n"}
<p>{select:color}</p>
{/exp:external_entries:select}
{if:else}
<p>Cannot insert your color.</p>
{/if}
We only perform the insert if the logged-in member is the same value as in segment_2, otherwise anyone visiting the URL can manipulate the database. For security, the plugin applies EE's built-in data cleaner, xss_clean(), to all values before performing any operations on the database. After doing the insert we then use the plugin's select function to display our value.
With this method -- a single display template that uses ajax to call a variety of operations templates as needed, whether inserts, updates, selects and/or deletes -- it's quite easy to build a rich and complex dashboard.