[英]Yii Ajax Submit button
Yii 1.1.14
我正在嘗試制作一個彈出窗口來選擇一年,然后獲得所選年份的一些報告輸出:
彈出窗口由 CJuiDialog 生成。 在 CJuiDialog' 中,我有一個表單。 我第一次在表單上有一個普通的提交按鈕,它工作正常。 但它並沒有關閉彈出窗口。 然后我找到了這篇文章: Yii - CJuiDialog Close on submit button click提交表單的對話框按鈕關閉對話框,但似乎沒有發布到指定的 url。 我也直接在表單中嘗試了ajaxSubmitButton()。 當我單擊此按鈕時,結果相同。 沒有 JS 錯誤,應用程序日志中也沒有任何內容。
這是我的觀點:
<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>
編輯:這是ajax提交按鈕的請求頭:
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
響應頭查看源
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
對於另一個按鈕,它具有相同的請求標頭。 似乎沒有錯誤 - 那么為什么我看不到 r=site/about 頁面? (其實r=site/about只是一個測試頁面,解決了這個問題就得做目標頁面了)。
Ajax 調用是針對頁面上的部分更新而不是整個頁面進行的。 首先,您必須為要更新的元素定義 id。 例如
<div id='myDiv'>
</div>
現在在你的ajaxSubmitButton
代碼中寫
<?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')
); ?>
當收到響應時,要更新的 id 會相應地更新。 請記住,您可以通過為此設置 id 來更新任何元素。
我完成了這個過程,但結果是下載的文件無法被 Excel 讀取:
我介紹了這個ajax提交按鈕:
<?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')
); ?>
我創建了一個新動作作為表單動作的目標 - 它稱為 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;
}
我認為 request.responseText 包含 excel 文件的內容,但也許我錯了?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.