just a thought, add the link to the controls javascript file.
Stefan wrote:
I wanted to make an autocomplete for a form field called City.
This is what I've done:
In EmployeesController:
var $components = array ('RequestHandler');
var $helpers = array('Html','Form','Htmlx','Javascript','Ajax');
var $uses = array('Employee','City','Department');
function add() {
if($this->RequestHandler->isAjax()) {
$data = $this->data;
$sCity = isset($data["Employee"]["city_a"]) &&
$data["Employee"]["city_a"] ? $data["Employee"]["city_a"] : "");
$this->set('Departments',
$this->Department->generateList(null,null,null, "{n}.Department.id",
"{n}.Department.name"));
$this->set('Cities', $this->City->findAll("City.name ILIKE
'".$sCity."%'"));
$this->render('ajax');
}
else {
if(empty($this->data)) {
... stuff
//exactly the same as without ajax autoComplete
if($this->Employee->save($this->data)) { }
else { }
}
}
In views/employees/add.thmtl:
<?php echo $javascript->link('prototype'); ?>
<?php echo $javascript->link('scriptaculous'); ?>
like this:
<?php echo $javascript->link('controls'); ?>
it won't work without it.
<div class="required" align="right">
<?php echo $htmlx->labelTag('Employee/city', City');?>
</div>
<div class="optional" align="left">
<?php echo $htmlx->autoComplete("Employee/city", "/employees/add");?>
</div>
In views/employees/ajax.thtml:
<ul>
<?php
if(is_array($Cities) && !empty($Cities)) {
foreach ($Cities as $k => $output) { ?>
<li id="<?php echo $output["City"]["id"];?>"><span
class="informal"><?php echo
$Departments[$output["City"]["department"]]." : ";?></span><?php echo
$output["City"]["name"];?></li>
<?php } } else {
?>
<li id="">No city with this name was found.</li>
<?php } ?>
</ul>
Made a helper function in an extension of HtmlHelper called
HtmlxHelper:
uses('view/helpers/html');
class HtmlxHelper extends HtmlHelper
{
var $helpers = array('Ajax');
function autoComplete($field, $url = "", $options = array(), $return =
false) {
$this->setFormTag($field);
$tagId['id'] = $this->model . Inflector::camelize($this->field);
$output = '<script type="text/javascript">
function set'.$tagId['id'].'(string,li) {
if(li.id) {
document.getElementById("'.$tagId['id'].'").value = li.id;
}
else {
document.getElementById("'.$tagId['id'].'A").value = "";
document.getElementById("'.$tagId['id'].'").value = "";
}
}
</script>';
$output .= $this->Ajax->autoComplete($field.'_a', $url,
array('style'=>'width:400px','minChars'=>'3','indicator'=>'loading'.$tagId['id'],'afterUpdateElement'=>'set'.$tagId['id']));
$output .= '<div id="loading'.$tagId['id'].'" style="text-align:center;
border:1px solid #888; background-color:white;
display:none;">'.$this->image("spinner.gif",array("style"=>"padding-bottom:2px;
vertical-align:middle")).' Loading...</div>';
$output .= $this->hidden($field,
array('value'=>$this->tagValue($field)));
return $this->output($output, $return);
}
}
Why $data["Employee"]["city_a"] in the add() action ?
Because in the helper the autocomplete field will be named :
$this->Ajax->autoComplete($field.'_a' ....
What are 'indicator', 'afterUpdateElement' ?
They are explained here :
http://wiki.script.aculo.us/scriptaculous/show/Ajax.Autocompleter
What's the purpose of <span class="informal">Information you don't want
to be inserted into the autocomplete form</span> ?
It is explained here :
http://wiki.script.aculo.us/scriptaculous/show/Ajax.Autocompleter
The autocomplete is working fine, with 2 autocomplete fields in the
same form.
Very usefull was Firebug : www.getfirebug.com/
Thanks to the other members, their postings were very helpfull.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Cake
PHP" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/cake-php?hl=en
-~----------~----~----~----~------~----~------~--~---
