JQuery ajax example
From EKiniWiki
Using Zend Framework (Moduloar Directory Structure). The SUCCESS part of the jQuery code:
success: function(msg){
The "msg" inside the function() is anything that is outputted by the Action Controller. So, you must disable the auto-rendering feature of Zend_View. You can do this by putting this line of code in your Action Controller.
$this->_helper->viewRenderer->setNoRender();
Your header.phtml must contain the following lines:
<link rel="stylesheet" type="text/css" href="<?=$this->baseUrl?>/css/jquery-calendar.css" media="screen" /> <link rel="stylesheet" type="text/css" href="<?=$this->baseUrl?>/css/jquery.autocomplete.css" /> <script language="JavaScript" type="text/javascript" src="<?=$this->baseUrl?>/js/jquery.js"></script> <script language="JavaScript" language="JavaScript" type="text/javascript" src="<?=$this->baseUrl?>/js/jquery-calendar.js"></script> <script language="JavaScript" type="text/javascript" src="<?=$this->baseUrl?>/js/jquery.autocomplete.js"></script>
jquery-calendar.js can be found here: http://marcgrabanski.com/code/jquery-calendar/
Here is the .phtml example for Zend Framework with jQuery.
<?= $this->render('header.phtml') ?>
<script language="javascript">
$(function() {
popUpCal.dateFormat = 'YMD-';
$('#date_filed').calendar();
$('#letter_date').calendar();
$('#last_day').calendar();
$('#editEmp').toggle(
function() {
//$('#empBox').attr('style','display: block');
$('#empBox').slideDown();
},
function() {
//$('#empBox').attr('style','display: block');
$('#empBox').slideUp();
}
);
//hide submit button if already submitted
<?php if ($this->step_id > '1') : ?>
$('#acceptancelettersave').hide();
<?php endif; ?>
//FOR THE SUBMIT BUTTON
$('#acceptancelettersave').click(
function() {
if($('#date_filed').val() == '') {
alert('Please enter the date filed.');
return true;
}
if ($('#empSName').val() == '') {
alert('Please enter an employee.');
return true;
}
if($('#letter_date').val() == '') {
alert('Please enter the letter date.');
return true;
}
if($('#last_day').val() == '') {
alert('Please enter the last day.');
return true;
}
$('#acceptancelettersave').attr('disabled','true');
$.ajax({
type: "POST",
url: "<?=$this->baseUrl?>/index/acceptancelettersave",
data: "date_filed="+$('#date_filed').val()+
"&sepId="+$('#sepId').val()+
"&searchField="+$('#searchField').val()+
"&empId="+$('#empId').val()+
"&empSName="+$('#empSName').val()+
"&empFName="+$('#empFName').val()+
"&empLName="+$('#empLName').val()+
"&managerId="+$('#managerId').val()+
"&managerSName="+$('#managerSName').val()+
"&managerFName="+$('#managerFName').val()+
"&managerLName="+$('#managerLName').val()+
"&letter_date="+$('#letter_date').val()+
"&deptId="+$('#deptId').val()+
"&deptNo="+$('#deptNo').val()+
"&deptName="+$('#deptName').val()+
"&empDateHired="+$('#empDateHired').val()+
"&last_day="+$('#last_day').val()+
"&submitType=submit",
success: function(msg){
//alert( "Data Saved: " + msg );
alert( "Data Saved: "+$('#empSName').val());
$('#acceptancelettersave').removeAttr('disabled');
window.location='<?=Zend_Registry::get('siteUrl')?>';
}
});
}
);
//FOR THE SAVE BUTTON
$('#acceptanceletterupdate').click(
function() {
if ($('#empSName').val() == '') {
alert('Please enter an employee.');
return true;
}
$('#acceptanceletterupdate').attr('disabled','true');
$.ajax({
type: "POST",
url: "<?=$this->baseUrl?>/index/acceptancelettersave",
data: "date_filed="+$('#date_filed').val()+
"&sepId="+$('#sepId').val()+
"&searchField="+$('#searchField').val()+
"&empId="+$('#empId').val()+
"&empSName="+$('#empSName').val()+
"&empFName="+$('#empFName').val()+
"&empLName="+$('#empLName').val()+
"&managerId="+$('#managerId').val()+
"&managerSName="+$('#managerSName').val()+
"&managerFName="+$('#managerFName').val()+
"&managerLName="+$('#managerLName').val()+
"&letter_date="+$('#letter_date').val()+
"&deptId="+$('#deptId').val()+
"&deptNo="+$('#deptNo').val()+
"&deptName="+$('#deptName').val()+
"&empDateHired="+$('#empDateHired').val()+
"&last_day="+$('#last_day').val()+
"&submitType=update",
success: function(msg){
//alert( "Data Saved: " + msg );
alert( "Data Saved: "+$('#empSName').val());
$('#acceptanceletterupdate').removeAttr('disabled');
window.location='<?=Zend_Registry::get('siteUrl')?>';
}
});
}
);
$('#empSNameTextBox').hide();
$('#searchField').change(
function() {
if ($('#searchField').val() == 'empLName') {
$('#empSNameTextBox').hide();
$('#empSNameTextBox').val('');
$('#empFullName').text('n/a');
$('#empLNameTextBox').show();
} else if ($('#searchField').val() == 'empSName') {
$('#empLNameTextBox').hide();
$('#empLNameTextBox').val('');
$('#empFullName').text('n/a');
$('#empSNameTextBox').show();
}
}
);
$("#empLNameTextBox").autocomplete(
"<?=$this->baseUrl?>/index/lookup/",
{
delay:10,
minChars:3,
matchSubset:1,
matchContains:1,
cacheLength:200,
onItemSelect:selectItem,
onFindValue:findValue,
formatItem:formatItem,
extraParams:{searchField: 'empLName'},
autoFill:true
}
);
$("#empSNameTextBox").autocomplete(
"<?=$this->baseUrl?>/index/lookup/",
{
delay:10,
minChars:3,
matchSubset:1,
matchContains:1,
cacheLength:200,
onItemSelect:selectItem,
onFindValue:findValue,
formatItem:formatItem,
extraParams:{searchField: 'empSName'},
autoFill:true
}
);
/*Auto Lookup functions*/
function findValue(li) {
if( li == null ) return alert("No match!");
sValue = li.selectValue;
$('#empFullName').text(li.extra[0]);
$.ajax({
type: "POST",
url: "<?=$this->baseUrl?>/index/getempdetails/",
data: "empsname="+sValue,
success: function(msg){
//alert( "Data Saved: " + msg );
var empData = msg.split("|");
$('#empSName').val(empData[0]);
$('#empLName').val(empData[1]);
$('#empFName').val(empData[2]);
$('#empId').val(empData[3]);
$('#deptId').val(empData[4]);
$('#empDateHired').val(empData[7]);
$('#deptNo').val(empData[11]);
$('#deptName').val(empData[12]);
$('#deptNoSpan').text(empData[11]);
$('#deptNameSpan').text(empData[12]);
$('#managerId').val(empData[9]);
$('#managerLName').val(empData[13]);
$('#managerFName').val(empData[14]);
$('#managerSName').val(empData[15]);
$('#managerLNameSpan').text(empData[13]);
$('#managerFNameSpan').text(empData[14]);
$('#managerLNameSpan2').text(empData[13]);
$('#managerFNameSpan2').text(empData[14]);
}
});
}
function selectItem(li) {
findValue(li);
}
function formatItem(row) {
return row[1] + "<br/>(" + row[0] + ")";
}
});
</script>
<center>
<br />
<h3><?=$this->page_title?></h3>
<p style="margin-top: 0px;">
<?=$this->sub_title?><br/>
<?=$this->step_desc?'<div class="status_row">'.$this->step_desc.'</div>':''?>
</p>
</center>
<table width="100%" class="borderless_table" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="40">DATE</td>
<td width="10">:</td>
<td><input type="text" name="date_filed" id="date_filed" class="cal" value="<?=$this->date_filed ? $this->date_filed : date('Y-m-d')?>"/></td>
</tr>
<tr valign="top">
<td>TO</td>
<td>:</td>
<td>
<div id="empBox" style="<?=$this->empSName?'display: none;':''?>">
<input type="text" id="empLNameTextBox" class="lookup_box" />
<input type="text" id="empSNameTextBox" class="lookup_box" />
<select id="searchField" name="searchField">
<option value="empLName">Last Name</option>
<option value="empSName">Short Name</option>
</select>
<br/>
</div>
<input type="hidden" name="sepId" id="sepId" value="<?=$this->sep_id?$this->sep_id:''?>" />
<input type="hidden" name="empId" id="empId" value="<?=$this->empId?$this->empId:''?>" />
<input type="hidden" name="empSName" id="empSName" value="<?=$this->empSName?$this->empSName:''?>" />
<input type="hidden" name="empFName" id="empFName" value="<?=$this->empFName?$this->empFName:''?>" />
<input type="hidden" name="empLName" id="empLName" value="<?=$this->empLName?$this->empLName:''?>" />
<input type="hidden" name="deptId" id="deptId" value="<?=$this->deptId?$this->deptId:''?>" />
<input type="hidden" name="deptNo" id="deptNo" value="<?=$this->deptNo?$this->deptNo:''?>" />
<input type="hidden" name="deptName" id="deptName" value="<?=$this->deptName?$this->deptName:''?>" />
<input type="hidden" name="empDateHired" id="empDateHired" value="<?=$this->empDateHired?$this->empDateHired:''?>" />
<span id="empFullName" style="font-weight: bold;"><?=$this->empSName?$this->empFName.' '.$this->empLName:'n/a'?></span><br/>
Department: (<span id="deptNoSpan"><?=$this->deptNo?$this->deptNo:'n/a'?></span>) <span id="deptNameSpan"><?=$this->deptName?$this->deptName:''?></span>
<div id="editEmp" style="<?=$this->sep_id==''?'display: none;':''?> cursor: pointer; color: #D25A0B;">Edit</div>
</td>
</tr>
<tr valign="top">
<td>FROM</td>
<td>:</td>
<td>
<input type="hidden" name="managerId" id="managerId" class="" value="<?=$this->managerId?$this->managerId:''?>" />
<input type="hidden" name="managerSName" id="managerSName" class="" value="<?=$this->managerSName?$this->managerSName:''?>" />
<input type="hidden" name="managerFName" id="managerFName" class="" value="<?=$this->managerFName?$this->managerFName:''?>" />
<input type="hidden" name="managerLName" id="managerLName" class="" value="<?=$this->managerLName?$this->managerLName:''?>" />
<span name="managerFNameSpan" id="managerFNameSpan"><?=$this->managerFName?$this->managerFName:''?></span>
<span name="managerLNameSpan" id="managerLNameSpan"><?=$this->managerLName?$this->managerLName:''?></span>
</td>
</tr>
<tr>
<td>RE</td>
<td>:</td>
<td><b><?=strtoupper($this->page_title)?></b></td>
</tr>
</table>
<div>
<p>
Blah blah blah
</p>
<p>
Blah blah blah
<br/>
<br/>
<u><span name="managerFNameSpan2" id="managerFNameSpan2"><?=$this->managerFName?$this->managerFName:''?></span>
<span name="managerLNameSpan2" id="managerLNameSpan2"><?=$this->managerLName?$this->managerLName:''?></span></u>
<br/>
</p>
</div>
<div class="buttons_bar">
<input type="button" name="acceptancelettersave" id="acceptancelettersave" value="Submit" />
<input type="button" name="acceptanceletterupdate" id="acceptanceletterupdate" value="Save" />
</div>
<?php if (count($this->log)) : ?>
<div>
History:<br/>
<div class="logbox">
<?php
foreach($this->log AS $row) {
echo $row->log_datetime.' '.$row->log_empSname.' '.$row->log_message.'<br/>';
}
?>
</div>
</div>
<?php endif; ?>
<?= $this->render('footer.phtml') ?>
