1
有一個div設計,其中的每個鏈接發送ajax請求。每當我想發送一個Ajax請求,我需要在div標題中加載微調器。但我的旋轉頭第一次工作。之後停止工作。如果我將代碼粘貼到div之外,那麼微調框按預期工作。jquery微調不能在div上加載
阿賈克斯
var $loading = $(".loading-spin").hide();
$(document)
.ajaxStart(function() {
$loading.show();
})
.ajaxStop(function() {
$loading.hide();
});
jQuery("body").on("click", ".rolesAjax", function(e) {
e.preventDefault();
var id = $(this).attr("id");
var user_id = $(this).attr("user_id");
$.ajax({
type: "POST",
cache: false,
data:{"id": user_id,"item": id},
url: "'.Yii::$app->getUrlManager()->createUrl("user/roles-ajax").'",
dataType: "json",
success: function(data){
$(".reloadDiv").hide();
$(".reloadDiv").load(location.href + " .reloadDiv");
$(".reloadDiv").show();
},
error: function (xhr, ajaxOptions, thrownError) {
if(thrownError == "Forbidden"){window.location = "http://test.qsims.com/index.php/user/roles-ajax"; }
}
});
});
我刷新DIV和loadin旋代碼。
<div class="reloadDiv">
<div style="float:left;width:235px;background-color:#FFFFFF;border: 1px solid #DDDDDD;margin-right:30px;">
<h4 style="text-align:center;">Assign Roles</h3>
<div style='overflow:scroll; width:235px;height:300px;background-color:#FFFFFF;border: 1px solid #DDDDDD;margin:0; float:left'>
<div style="width:235px; height:30px;text-align:center;border: 1px solid #DDDDDD;">
<span class ="loading-spin" style="margin-bottom:10px;">
<?php
echo Spinner::widget(['preset' => 'small', 'align' => 'left', 'color' => '#5CB85C']);
echo '<div class="clearfix"></div>';
?>
</span>
<h4 style="margin-top:0px; ">
<span class="glyphicon glyphicon-arrow-right"></span>
</h4>
</div>
<?php if($genCount > 0) { ?>
<h5 style="padding:4px 0px 4px 5px; margin-top:0px; background-color:#2A3F54; color:white;"><b>General Roles </b> </h5>
<div class="roles-link" style="margin:-2px 0px 5px 24px;">
<?php
for ($i = 0; $i<$genCount; $i++){
echo Html::a($genRole[$i].'<br>','',['class'=>'rolesAjax', 'id' => $genRole[$i], 'user_id' => $id]);
}
?>
</div>
<?php } ?>
<?php if($chemCount > 0) { ?>
<h5 style="padding:4px 0px 4px 5px; margin-top:0px; background-color:#2A3F54; color:white;"><b>Chemical Module </b> </h5>
<div class="roles-link" style="margin:-2px 0px 8px 24px;">
<?php
for ($i = 0; $i<$chemCount; $i++){
'<span class="ss" style="margin:2px 0px 0px 24px;">';
echo Html::a($chemRole[$i].'<br>','',['class'=>'rolesAjax', 'id' => $chemRole[$i], 'user_id' => $id]);
'/<span>';
}
?>
</div>
<?php } ?>
<?php if($riskCount > 0) { ?>
<h5 style="padding:4px 0px 4px 5px; margin-top:0px; background-color:#2A3F54; color:white;"><b>Risk Assessment Module </b> </h5>
<div class="roles-link" style="margin:-2px 0px 5px 24px;">
<?php
for ($i = 0; $i<$riskCount; $i++){
echo Html::a($riskRole[$i].'<br>','',['class'=>'rolesAjax', 'id' => $riskRole[$i], 'user_id' => $id]);
}
?>
</div>
<?php } ?>
</div>
</div>
<!--Current Roles Design -->
<div class='reloaDiv' style="float:left;width:235px;background-color:#FFFFFF;border: 1px solid #DDDDDD;margin:0;">
<h4 style="text-align:center;">Current Roles</h3>
<div style='overflow:scroll; width:235px;height:300px;background-color:#FFFFFF;border: 1px solid #DDDDDD;margin:0; float:left'>
<div style="width:235px; height:30px;text-align:center;border: 1px solid #DDDDDD;"><h4 style="margin-top:3px; "><span class="glyphicon glyphicon-arrow-left"></span></h4> </div>
<h5 style="padding:4px 0px 4px 5px; margin-top:0px; background-color:#2A3F54; color:white;"><b>Assigned Roles </b> </h5>
<div class="roles-link" style="margin:-2px 0px 5px 24px;">
<?php
for ($i = 0; $i<$count; $i++){
echo Html::a($user[$i].'<br>','',['class'=>'deleteRoles', 'id' => $user[$i], 'user_id' => $id]);
}
?>
</div>
</div>
</div>
- 我知道這是什麼做與重裝內容,但不知道它是如何工作..任何幫助將是great.Thank你..
不,這也沒有幫助...我也試過這個.. –
請在ajaxStart中添加console.log,並停下來,看看你是否得到那些在第2 ajax調用 – vijayP
是在日誌中我明白了。 –