Hi @evstevemd
I’ve seen the post you shared with me, but it does not work such as I thought.
In my code, I have the delete-modal with ok-cancel options, inside the same index file.
and confirmation action is in another file called index.js
inside here I fill the body message of the confirmation modal, and reload Pjax container.
Is there any way to reload those buttons while items are deleted? That Could be work
It is hard for me to guess what you thought. The best way is incorporate the code in your code and then ask about exact part that is missing with new example code
Try changing this
$('.div2').click(function(){ .. });
to
$('.div2').on('click', function(){ ... });
And
$('.btn-eliminar-competencia').click(function(){ .. });
to
$('.btn-eliminar-competencia').on('click', function(){ .. });
and
$('.btn-modal-eliminar-competencia').click(function(){ .. });
to…
$('.btn-modal-eliminar-competencia').on('click`, function(){ ... });
on works with dynamic content
hi Shaho
I really appreciate your help. I did the changes as you mention, but I get the same result. Delete one item. and then, modal no load again.
regadards
does this work when you click? any errors in console? and does the pjax refresh after the 1st delete?
yes. Item is deleted and also table widget (this already were working), so nothing has changes.
console no returns error messages
after delete item, I proceed to delete the next, and and modal no loads (without error messages).
If you need more info, code, please ask me
Thanks for your time
Hi @fmoraless
This won’t work for the 2nd time, because the delete buttons with class="btn-eliminar-compentencia" have been overwritten by the 1st PJAX call and have lost the event handler.
The solution is to attach the event handler to an ancestor DOM object outside the PJAX updated area.
$('#pjax-container').on('click', '.btn-eliminar-competencia', click(function(){
You may change $('#pjax-container') to $('body') or anything that is an ancestor of the delete buttons and is outside the PJAX area. In this way, the click events of the delete buttons will be handled by the PJAX-free event handler attached to the ancestor.
I understand the idea, but I can’t get to the solution.
I only did this change and I don’t have the expected results. surely something is wrong with my code,.
$('#pjax-container').on('click','.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', async:false})
}
else{
modal_alert(__('dialogs.unespected_error'))
}
}
})
})
thanks
You got me wrong. I said:
$('#pjax-container').on('click', '.btn-eliminar-competencia',
The selector '.btn-modal-eliminar-competencia' refers to a button inside the modal, and it is not in the PJAX area. You don’t have to touch it. Or, exactily saying, you can not attach an event handler of this button to $(#pjax-container), because it is not a descendant of $('#pjax-container').
your syntax is wrong
$('#pjax-container').on('click','.btn-modal-eliminar-competencia', function(){ ...
Hi @shaho
I did the modification, and now the modal confirmation button no has action. If is clicked, don’t do any action. so don’t make the item delete.
something is missing, but I don’t know what is.
$('#pjax-container').on('click','.btn-modal-eliminar-competencia',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', async:false})
}
else{
modal_alert(__('dialogs.unespected_error'))
}
}
})
})
I appreciate all your comments
thanks
If the modal is outside the PJAX area, this won’t work because the click event of the button won’t bubble up to $('#pjax-container')
Try this instead:
`$('.btn-modal-eliminar-competencia').on('click',function(){`
or
`$('body').on('click','.btn-modal-eliminar-competencia', function(){`
I’m sorry for disappointing you, but I’ve returned to the beginning.
Item is deleted, page no refresh, try to delete a second item. modal no load.
This is my current code with your tips and modifications suggested. I’ve incorporated the controller method, and code when the modal is closed.
index view
https://codeshare.io/OdYRy7
index.js
https://codeshare.io/oQlNjY
controller /(delete function)
public function actionDelete($id)
{
$this->findModel($id)->delete();
return json_encode([ 'code' => 204 ]);
}
Thanks again
index.js line 19
This must be
$('#pjax-container').on('click', 'btn-eliminar-competencia', function(){
This may not be the best solution but it seems to work
Problem: click_1() is called twice on first click, only once thereafter.
Solution: Add the click() handler but don’t call click_1().
var click_1 = function($el) {
//eliminar = $(this).attr('data-ruta')
eliminar = $el.attr('data-ruta')
$('#text-modal-competencia').html('')
//id = $(this).attr('id')
id = $el.attr('id')
$.ajax({
type:'post',
...
...
}
$('.btn-eliminar-competencia').click(function(){
//click_1($(this));
})
$('#pjax-container').on('click', '.btn-eliminar-competencia', function(){
click_1($(this));
})
I guess the .on(‘element’, function() { …
will work if .click() with empty handler is added.
Obviously it will not without .click().
works!
you had told me somthing similar previously, but no have sucess.
Now works correctly
thanks a lot
If only you had created a source code where someone would have tinkered with,
may be it could have been fixed long ago.
Cheers to everyone who helped!