Yii Ajax提交按钮
Yii 1.1.14
I'm trying to make a popup to select a year and then get some reporting output for the selected year :
The popup is generated by CJuiDialog. Inside CJuiDialog', I have a form. In the first time I had a normal submit button on the form and it worked fine. But it did not close the popup. Then I found this post : Yii - CJuiDialog Close on submit button click The button of the dialog to submit the form closes the dialog but seems not to post to the indicated url. I also tried ajaxSubmitButton() directly in the form. Same result when I click on this button. There are no JS errors, nothing in the application log.
This is my View :
<div class="reporting">
<?php
$this->beginWidget('zii.widgets.jui.CJuiDialog',array(
'id'=>'mydialog',
'options'=>array(
'title'=>'select year test',
'autoOpen'=>false,
'modal'=>true,
'buttons' => array(
'Dialog Submit Button'=>'js:function(){
$.post(
$("#select-year-form").attr("action"),
$("#select-year-form").serialize(),
function(){$("#mydialog").dialog("close");}
);
}',
array('text'=>Yii::t('app','reporting.select.close'),'click'=> 'js:function(){$(this).dialog("close");}'),
),
),
));
?>
<div class="well">
<?php echo CHtml::beginForm(CHtml::normalizeUrl(array('/site/about')),'post',array('id'=>'select-year-form')); ?>
<table class="contentheader">
<tr>
<td><?php echo CHtml::DropDownList('year', $lastyear, $yearslist, array('options'=>array($lastyear=>array('selected'=>true)) )); ?></td>
</tr>
</table>
<br />
<?php echo CHtml::ajaxSubmitButton('Form Ajax Submit Button',
CHtml::normalizeUrl(array('/site/about')),
array('success'=>'function(){$("#mydialog").dialog("close");}'),
array('name' => 'run', 'class' => 'btn btn-success')
); ?>
<?php echo CHtml::endForm(); ?>
</div>
<?php
$this->endWidget('zii.widgets.jui.CJuiDialog');
echo CHtml::link(Yii::t('app','app.menu.reporting.planning.xlsabsence'), '#', array(
'onclick'=>'$("#mydialog").dialog("open"); return false;',
));
?>
</div>
EDIT : Here's the requestheader for the ajax submit button :
Request URL:http://localhost/yii02/yiiars02/index.php?r=site/about
Request Method:POST
Status Code:200 OK
Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4,de;q=0.2
Connection:keep-alive
Content-Length:9
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Cookie:b594784e48e60bab8dd41b584687725e=04rsh9hf09a4ef2f4a0in4prg7; e34b39f8afcdd208672f91abc90c8ad5=eqp4uva5819mj068b2n2qf3nu2; jpanesliders_panel-sliders=0; jpanesliders_position-icon=0; gantry-admin-tab=3; f6ea8ae4b9346c959ddbac3f5fefea4b=kk6g5oahbmql62rqkdiafem904; 60c5ada15aad7e760a944539ad24030d=bhf70j5o138vlse6m1gsmv49k6; 098c7ced18d50e0c9e49b567bc9f0832=fr-FR; 160a24a8bbe9b9a4500e829a48ae3415=e72bkntgosf81tbg26s6nk39j6; 25c0d40cd6ace920e960f397705968e5=pdgqudpu2psp5dpag72tol5tp0; PHPSESSID=31sij28hcolr3r1ip39rugmf62
Host:localhost
Origin:http://localhost
Referer:http://localhost/yii02/yiiars02/index.php?r=planning/test
User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.107 Safari/537.36
X-Requested-With:XMLHttpRequest
Query String Parametersview sourceview URL encoded
r:site/about
Form Dataview sourceview URL encoded
year:2014
Response Headersview source
Cache-Control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Connection:Keep-Alive
Content-Length:4810
Content-Type:text/html
Date:Mon, 10 Feb 2014 09:56:39 GMT
Expires:Thu, 19 Nov 1981 08:52:00 GMT
Keep-Alive:timeout=5, max=100
Pragma:no-cache
Server:Apache/2.2.17 (Win32) PHP/5.4.21
X-Powered-By:PHP/5.4.21
For the other button its the same request header. There appears no error - so why can't I see the page r=site/about ? (actually r=site/about is just a test page, I will have to do the target page when I have resolved this problem).
Ajax calls are made for partial update on page not the whole page. First you have to define id for the element you want to update. for example
<div id='myDiv'>
</div>
Now in you ajaxSubmitButton code write
<?php echo CHtml::ajaxSubmitButton('Form Ajax Submit Button',
CHtml::normalizeUrl(array('/site/about')),
array('success'=>'function(){$("#mydialog").dialog("close");}',
'update'=>'#myDiv' ),
array('name' => 'run', 'class' => 'btn btn-success')
); ?>
When the response is received the the id to be update is updated accordingly. Remember you can update any element by setting id for that.
I got work the process but the result is a downloaded file that can not be read by Excel :
I introduced this ajax submit button :
<?php echo CHtml::ajaxSubmitButton('Form Ajax Submit Button',
CHtml::normalizeUrl(array('/planning/xlsAbsences')),
array(
'type'=>'POST',
'beforeSend' => "function(request) { console.log('beforeSend'); }",
'data'=>'js:$("#select-year-form").serialize()+"&year="+$("#dropDownId :selected").text()',
'success'=>'function(response, status, request){
$("#mydialog").dialog("close");
var disp = request.getResponseHeader("Content-Disposition");
if (disp && disp.search("attachment") != -1) {
var filename = disp.substring(21).replace("\"","");
var form = $("<form method=\"POST\" action=\"index.php?r=planning/dl\">");
form.append($("<input type=\"hidden\" name=\"content\" value=\"" + request.responseText + "\">"));
form.append($("<input type=\"hidden\" name=\"filename\" value=\"" + filename + "\">"));
$("body").append(form);
form.submit();
}
console.log(filename);
console.log(request.responseText);
}',
'complete' => "function(request) { console.log(request); }",
'error' => "function(data) { alert('erro'+data); }",
),
array('name' => 'run', 'class' => 'btn btn-success')
); ?>
I created a new action as target for the form action - its called actionDl :
public function actionDl()
{
$filename = $_POST['filename'];
$content = $_POST['content'];
header("Content-Disposition: attachment; filename=".$filename);
header('Content-Type: application/octet-stream');
header('Cache-Control: max-age=0');
echo $content;
}
I thought that request.responseText contains the content of the excel file, but perhaps I'm wrong about that ?