I have a view in which I have two buttons. While clicking on any of the two buttons, a certain request is made.
View
<?php Pjax::begin(); ?>
<?=Html::beginForm(['process'],'post');?>
<?=Html::submitButton('Disconnect', ['id'=>'d','name'=>'dco','class' => 'btn btn-primary']);?>
<?=Html::submitButton('Connect', ['id'=>'r','name'=>'rco','class' => 'btn btn-info']);?>
<br><br>
<div class="pre-scrollable">
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\CheckboxColumn', 'checkboxOptions' => function($d) {
return ['value' => $d['msn']];
}],
'customer_id',
// 'dept_code:ntext',
'dept_name:ntext',
'sub_div_name',
[
'label' => 'Sub Division Name',
'value' => function ($d) {
return $d->subdiv->name;
},
'filter' => Html::activeDropDownList($searchModel, 'sub_div_code', \common\models\SurveyHescoSubdivision::toArrayList(), ['prompt' => "Sub-Div", 'class' => 'form-control']),
],
'division_name',
'allowed_units',
'msn',
'units_consumed',
[
'label' => 'Disconnected',
'attribute' => 'disconnected',
'format'=>'raw',
'contentOptions' => ['style'=>'text-align:center'],
'value' => function($model){
return $model->disconnected == 1 ? '<span class="glyphicon glyphicon-ok text-success"></span>' : '<span class="glyphicon glyphicon-remove text-danger"></span>';
},
'filter' => Html::activeDropDownList($searchModel, 'disconnected', [''=>'All','1'=>'Yes','0'=>'No'], ['class' => 'form-control']),
],
'active_energy_total_m',
['class' => 'yii\grid\ActionColumn'],
],
]); ?>
</div>
<?= Html::endForm();?>
<?php Pjax::end(); ?>
Controller
public function actionProcess()
{
$soapUrl = "http://ip:port/HES/services/Request";
$userName = "user";
$password = "123456";
if (isset($_POST['dco']))
{
if(Yii::$app->request->isPost)
{
$data = Yii::$app->request->post('selection'); //checkbox (array)
foreach($data as $value)
{
$msn = $value;
$xml_post_string = /** @lang text */
'//soap request';
$headers = array(
"Content-type: text/xml;charset=\"utf-8\"",
"Accept: text/xml",
"Cache-Control: no-cache",
"Pragma: no-cache",
"Content-length: ".strlen($xml_post_string),
); //SOAPAction: your op URL
$url = $soapUrl;
// PHP cURL for https connection
$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 1);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_ANY);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $xml_post_string); // the SOAP request
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
// converting
$response = curl_exec($ch);
curl_close($ch);
$domd=new DOMDocument();
var_dump($response);
if(!$domd->loadXML($response)){
throw new \RuntimeException("failed to parse XML!");
}
$inner_xml=$domd->getElementsByTagName("return")->item(0)->textContent;
if(!($domd2=@DOMDocument::loadXML($inner_xml))){
throw new \RuntimeException("failed to parse inner_xml!");
}
$AsyncReplyFlag=$domd2->getElementsByTagName("AsyncReplyFlag")->item(0)->textContent;
if ($AsyncReplyFlag =='true')
{
$ds = 1;
$disconnected_at = date('Y-m-d H:i:s');
try {
Yii::$app->db->createCommand(/** @lang text */
"update
`accurate_mam`.`daily_log`
set
`disconnected` = '$ds',
`diconnected_at` = '$disconnected_at',
`reconnected_at` = NULL
where `msn` = '$msn' ;
")->execute(); //update master table
Yii::$app->db->createCommand(/** @lang text */
"update
`accurate_mam`.`log_disconnected`
set
`disconnected_at` = '$disconnected_at'
where `msn` = '$msn'")->execute();// update log disconnected table
} catch (Exception $e) {
} // updating the master table
}
}
}
}
}
What I want to do?
On button click, I want to show a spinner/loader that will start when the request is made and stop when the request is completed.
Note
I don't want to add a default time for spinner/loader. It should starts when the request is sent and stop when it's completed i.e. when the process is completed
I have searched many articles but can't find the complete implementation details.
Update 1
I have found a solution here and tried to implement it by doing the following
<style>
#loader {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.05) url("<?php \yii\helpers\Url::to('@web/images/25.png', true); ?>") no-repeat center center;
z-index: 10000;
}
</style>
JS
$(document).ready(function () {
$('form').submit(function(e) {
e.preventDefault();
spinner.show();
$.ajax({
url:'$url',
data: $(this).serialize()
type: 'POST',
dataType: 'JSON'
}).done(function(resp) {
spinner.hide();
//alert(resp.status);
});
});
});
Problem Facing
Now I am able to see a spinner but the process is not completed. After further debugging, I observed that I am getting bool(false) in var_dump(isset($_POST['dco']));
die(); while submitting the request
Update 2
I have found one more solution and tried to do the same
Updating both buttons
<?= Html::submitButton(Yii::t('app', '<i class="fa fa-times"></i> Disconnect'), ['class' => 'btn red', 'name' => 'dco', 'value' => '0']) ?> <?= Html::submitButton(Yii::t('app', '<i class="fa fa-check"></i> Connect'), ['class' => 'btn blue', 'name' => 'rco', 'value' => '1']) ?>
JS
$('form').submit(function(e) {
e.preventDefault();
var strValue = "";
$('input[name="selection[]"]:checked').each(function() {
if(strValue!=="")
{
strValue = strValue + " , " + this.value;
}
else
strValue = this.value;
});
spinner.show();
$.ajax({
url:'$url',
data: {data :strValue},
type: 'POST',
dataType: 'JSON'
}).done(function(resp) {
spinner.hide();
//alert(resp.status);
});
});
Controller
if (Yii::$app->request->post()) {
if (Yii::$app->request->post('dco') == 0) {
//Code for value 0
}
if (Yii::$app->request->post('rco') == 1) {
//Code for value 1
}
}
Problem Facing
When I click any of the two buttons it always hit the dco check i.e. if (Yii::$app->request->post('dco') == 0) it's not hitting the rco condition
There must be something that I am missing.
Any help would be highly appreciated.
