The constructor takes three parameters. The first is the element that should support in-place editing. The second is the url to submit the changed value to. The server should respond with the updated value (the server might have post-processed it or validation might have prevented it from changing). The third is a hash of options. Within that hash of options should be a field called collection that is an array of values to place inside your select box.
new Ajax.InPlaceCollectionEditor( element, url, { collection: [array], [moreOptions] } );
The server side component gets the new value as the parameter ‘value’ (POST method), and should send the new value as the body of the response.
The form data is sent encoded in UTF-8 regardless of the page encoding. This is as of the prototype function Form.serialize. More info can be found here.
If this doesn’t work, you can use iconv as outlined here.
To disable the In Place Collection Editor behavior later on, store it in a variable:
var editor = new Ajax.InPlaceCollectionEditor('product1',...);
(... do stuff ...)
editor.dispose();
This way, you can enable and disable In Place Collection Editing at will.
note: the demo doesn’t actually save its changes, as demoajaxreturn.html is not a valid url.
new Ajax.InPlaceCollectionEditor(
'tobeedited', 'demoajaxreturn.html', {
collection: ['one','two','three'],
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
Click me, click me!
new Ajax.InPlaceCollectionEditor(
'tobeedited2', 'demoajaxreturn.html', {
collection: [[0,'one'],[1,'two'],[2,'three']],
value: 0,
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
Click me, click me!
Here is another example that shows you how interact whith php and a scriptaculous object/widget Ajax.In Place Collection Editor.
First there is the php code needed to build the intial page with a default value that is ‘men’
As we saw in the php code we add the javascript/scriptaculous zone to let edition of the value ‘Male’ possible for users and via a comboBox predefined on the Ajax.In Place Collection Editor call.
<?
/*
* 21/08/2006 01:26pm
* ajax/NICOWEB.Ajax.InPlaceCollectionEditor.php
* fichier permettant de présenter le fonctionnement de l'édition en place de données
* via Ajax.InPlaceColletionEditor
*/
$idSelected = 0;
$tVal[0]['val'] = 0; $tVal[0]['lib'] = "Male";
$tVal[1]['val'] = 1; $tVal[1]['lib'] = "Female";
$tVal[2]['val'] = 2; $tVal[2]['lib'] = "Dont Know";
$chaine_html = htmlComboBox($idSelected);
$chaine_js = "new Ajax.InPlaceCollectionEditor(
'comboBox', 'http://ns34.hosteur.com/~learnc/espaceemploi/ajax/ajaxInPlaceCollectionEditor.php', {
collection: [".jsCollection($tVal)."], value: ".$idSelected.",
ajaxOptions: {method: 'post'}
});";
function htmlComboBox ($idS)
{
//print_r($t);
$str = "Are you ? <br/><p id=\"comboBox\">Male</p>";
return $str;
}
function jsCollection ($t)
{
$str = "";
for ($i=0;$i<sizeof($t);$i++)
{
foreach($t[$i] as $key => $value) { $$key = $value; }
if ($i < sizeof($t)-1) $str .= "[".$val.",'".$lib."'] ,";
else $str .= "[".$val.",'".$lib."']";
}
return $str;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Nicoweb.fr w/a Scriptaculous :: Ajax.InPlaceCollectionEditor</title>
<link rel="section" href="index.php" title="NICOWEB :: Espace Emploi v2 :: Index" />
<script src="../scriptaculous/js/scriptaculous/prototype.js" type="text/javascript"></script>
<script src="../scriptaculous/js/scriptaculous/scriptaculous.js" type="text/javascript"></script>
<style type="text/css">
p { width : 30%; }
</style>
</head>
<body>
<? echo $chaine_html; ?>
<script type="text/javascript">
<? echo $chaine_js; ?>
</script>
</body>
</html>
We can saw the first php code needed to generate page that let you modify the value of your comboBox that is hidden when no event action on.
We can see now the sample code (ndr : again not connected to a database to preserve my bandwith ) that work on an php array that simulate database and can retake the value of the HTML element OPTION that was selected by a user.
Remember that we are here in a file that is called via HTTP.Request, AJAX call ;-)
Here is the code of this AJAX/server side file
<?
/*
* 21/08/2006 01:27am
*/
$f=fopen(time().".acces_fichier.txt","w");fwrite($f,"get = ".serialize($_POST)."\n");fclose($f);
$tVal[0]['val'] = 0; $tVal[0]['lib'] = "Male";
$tVal[1]['val'] = 1; $tVal[1]['lib'] = "Female";
$tVal[2]['val'] = 2; $tVal[2]['lib'] = "Dont Know";
if (isset($_POST['value']) && $_POST['value'] > -1)
{
$val = $_POST['value'];
print($tVal[$val]['lib']);
}
?>
This file out in printing the ‘lib’ value (ndr : better human understanding ) of the pos[‘value’] sended by the scriptaculous inplacecollectioneditor ;-)
I’m dispappointed to can’t post my files here but i give you a direct acces link at the start of the article ;-)
As of this writing (v1.7.0), callbacks are ignored if using Ajax.In Place Collection Editor. Add the following to your extensions.js:
Ajax.InPlaceCollectionEditor.prototype.__createEditField = Ajax.InPlaceCollectionEditor.prototype.createEditField;
Ajax.InPlaceCollectionEditor.prototype = Object.extend(Ajax.InPlaceCollectionEditor.prototype, {
createEditField: function() {
if (this.options.callback) { var callbackSet = this.options.callback };
this.__createEditField();
if (callbackSet) { this.options.callback = callbackSet; };
}
});