I’m trying to do a delete action with Pjax (without refreshing the page).
The register is deleted properly, page no reloads, BUT, if immediately I try to delete another record, don’t load the modal. So the delete button cannot call to modal for new delete.
I hope you can help me to resolve this. Thanks
Here is my code:
Step 1
file: index view
<?php Pjax::begin(['id' => 'pjax-container']); ?>
<?=
GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
.....
'columns' => [
...others columns
[
'class' => 'yii\grid\ActionColumn',
'template' => '{view} {delete}',
'buttons' => [
'delete' => function ($url, $model, $key) {
return Html::a(
'<span class="material-icons">delete</span>',
'javascript:void(0)',
[
'data-ruta' => Url::toRoute(['delete', 'id' => $model->id]),
'id' => $model->id,
'class' => 'btn-eliminar-competencia option-danger',
'title' => __('GxP', 'commons.delete'),
'aria-label' => "Eliminar",
'data-pjax' => "0",
'data-method' => "post"
]
) . '</div>';
}
]
]
]
]);
?>
<?php Pjax::end(); ?>
Step 2
file index view
After clicking the delete button, go to open modal
<div class="modal bootstrap-dialog" role="dialog" aria-hidden="true" id="modal-eliminar-
competencia" aria-labelledby="w3_title" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title"><?= __('GxP', 'commons.delete') ?></h4>
</div>
<div class="modal-body text-center">
<div class="bootstrap-dialog-message"><?= __('GxP', 'dialogs.sure_delete_element') ?></div>
<div id="text-modal-competencia"></div>
</div>
<div class="modal-footer text-center">
<button class="btn btn-success" data-dismiss="modal">
<?= __('GxP', 'commons.cancel') ?>
</button>
<button class="btn btn-primary btn-modal-eliminar-competencia">
<?= __('GxP', 'commons.accept') ?>
</button>
</div>
</div>
</div>
</div>
Step 3
file: index.js
$(document).ready(function(){
var ruta
eliminar = 0
redirect = 0
modal = $('#modal-eliminar-competencia')
modal_competencia = $('#modal-competencia')
$('.div2').click(function(){
window.location = $('#tipos-competencias').attr('href')
})
$('.btn-eliminar-competencia').click(function(){
eliminar = $(this).attr('data-ruta')
$('#text-modal-competencia').html('')
id = $(this).attr('id')
$.ajax({
type:'post',
url:'/competences/competences-asociated',
data:{id:id},
dataType:'json'
})
.done(function(r){
console.log(r)
mensaje_text =
'<br>'+
'<p>'+__('commons.info')+':</p>'+
'<small>'+
r.positions+__('dialogs.associated_positions')+
'</small>'+
'<br>'+
'<small>'+
r.reagents+__('dialogs.associated_reagents')+
'</small>';
$('#text-modal-competencia').html(mensaje_text)
})
.fail(function(){
})
modal.modal({backdrop:'static',keyboard:true})
})
// here resolve the delete item and reload container with Pjax
$('.btn-modal-eliminar-competencia').click(function(){
$.ajax({
type:'post',
url:eliminar,
dataType:'json',
success:function(response){
if(response.code == 204){
redirect = response.redirect
$('.message-contenido .message-text').html(__('dialogs.success_delete'))
modal.modal('hide')
$('.capa').show()
$('.message-action').show()
ruta = false
$.pjax.reload({container:'#pjax-container'})
}
else{
modal_alert(__('dialogs.unespected_error'))
}
}
})
})
})
#yii-2-0 #Pjax