[AJAX]Usuwanie z bazy danych z widocznym efektem Opcje

[pawel06281990]

Witam,

Mam problem z efektem wizualnym usuwania z bazy danych juz tłumacze o co chodzi dokładnie aby każdy zrozumiał i udzielił mi pomocy.

Mam skrypt ajax on działa usuwa mi z bazy danych dany rekord ale chce zrobić zeby automatycznie znikał mi element który zostaje usunięty.

Tak wygląda mój skrypt ajax

[XML] pobierz, plaintext 
jQuery(document).ready(function($){
$("#delete").click(function(e) {
e.preventDefault();
 
 
var Id= $(".Id").val();
// Returns successful data submission message when the entered information is stored in database.
var data = 'Id='+ Id;
 
 
		$("#img_delete").show();
$("#img_delete").fadeIn(400).html('<img  src="../assets/images/ajax-loading.gif" />');
$.ajax({
type: "POST",
url: link.ajax_url +"?action=delete_zmarli",
data: data,
error: function(xhr, ajaxOptions, thrownError)
{
 jQuery("#response_message").html('<div id="close-message"><div class="notice notice-error">Przepraszamy nie można było usunąć wpisu z bazy, sprawdź dane i spróbuj ponownie.</div></div>');
$("#img_delete").hide();
console.log(data);
},
success: function(data){
jQuery("#response_message").html('<div id="close-message"><div class="notice notice-success">element usunięty poprawnie</div></div>');                               
    $("#img_delete").hide();
 
  }
});
 
	return false;
});
});
[XML] pobierz, plaintext 

Wszystkie wyniki mam wyświetlane w tabelce.

I jak mówiłem nie mogę osiągnąć efektu że dany element znika.

Jak to zrobić

Ten post edytował pawel06281990 12.09.2020, 21:24:05

[viking]

I #delete jest w każdym wierszu tabeli? Id może być jeden na stronie. Przycisk jest wewnątrz tr więc przez parent możesz się dobrać do tr i go usunąć w callbacku success.

[pawel06281990]

I #delete jest w każdym wierszu tabeli? Id może być jeden na stronie. Przycisk jest wewnątrz tr więc przez parent możesz się dobrać do tr i go usunąć w callbacku success.

Niema w każdym wierszy tabeli #delete.
Tak mam jedno id i przycisk jest w <tr><td></td></tr>.

Witam ponownie ,

po zmieniałem trochę w kodzie dodałem ale to niedziała nie usuwa mi z bazy danych ale na stronie usuwa mi całą tabelą którą mam w tr tak wygląda mój sktrypt

[JAVASCRIPT] pobierz, plaintext 
$(".usun").click(function(w) {
w.preventDefault();
var parent = $(this).parent();
$("#img_delete").show();
$("#img_delete").fadeIn(400).html('<img  src="../wp-content/plugins/wp-zmarli/modul/platnosci/assets/images/loading.gif" />');
 
$.ajax({
type: "GET",
url: wp_zmarli_link.ajax_url +"?action=delete",
data : "przelew_id=" + parseInt($(this).attr('przelew_id')),
 
beforeSend: function() {
        parent.animate({'backgroundColor':'#fb6c6c'},300);
      },
error: function(xhr, ajaxOptions, thrownError)
{
  toastr.warning('Przepraszamy wystąpił błąd sprawdz dane i spróbój ponownie')
$("#img_edit_uslugi").hide();
},
success: function(data){
    toastr.success('Usługa została zaktualizowana')                               
	$("#img_delete").hide();
        parent.slideUp(300,function() {
          parent.remove();
        });
        console.log(data);
  }
});
 
	return false;
});
[JAVASCRIPT] pobierz, plaintext 

A tu jest moja tabela

[PHP] pobierz, plaintext 
  <table class="table table-bordered">
                  <thead>
 
                    <tr>
                      <th style="width: 22%"><?php esc_html_e('Czas trwania', 'zmarli');?></th>
                            <th><?php _e('Klucz', 'zmarli');?></th>
                            <th><?php _e('Kwota', 'zmarli');?></th>
                            <th><?php _e('Opcje', 'zmarli');?><div id="img_delete"></div></th>
                    </tr>
                  </thead>
                  <tbody>
                        <?php
        if($uslugi_dopay_lista){
 
    foreach ($uslugi_dopay_lista as $lista_dotpay) { 
 
 
                    echo'<tr class="usun" id="usun_'.$lista_dotpay['przelew_id'].'">';
                    echo'<td>';
                    if ($lista_dotpay['przelew_czas'] == 60*60*24*365) {
    echo "Rok"; 
	} elseif ($lista_dotpay['przelew_czas'] == 60*60*24*730) {
	echo "2 Lata"; 
	} elseif ($lista_dotpay['przelew_czas'] == 60*60*24*1095) {
	echo "3 Lata"; 
        } elseif ($lista_dotpay['przelew_czas'] == 60*60*24*1254) {
	echo "3 Lata"; 
	} else {
	echo round($lista_dotpay['przelew_czas'] / 86400, 2) ." (dni)";
	}
                    echo'</td>';
                       echo '<td>'.$lista_dotpay['przelew_klucz'].'</td>';
 
        echo '<td>'.$lista_dotpay['przelew_kwota'].'</td>';
        echo '<td>'; 
        echo "<a href='".PLATNOSCI_URL."?page=usluga_dotpay&przelew_id=".$lista_dotpay['przelew_id']."'><img src='".PLATNOSCI_PATH."/assets/images/delete.png' title='Skasuj'></a> |";
	echo " <a href='".PLATNOSCI_URL."?page=edit_dotpay&przelew_id=".$lista_dotpay['przelew_id']."'><img src='".PLATNOSCI_PATH."/assets/images/edit.png' title='Edytuj'></a>";
        echo'</td>';
 
                     echo'</tr>';
                   }
 
         ?>
                   </tbody>
                 </table>
[PHP] pobierz, plaintext 

co jest nie tak

Ten post edytował pawel06281990 24.03.2021, 17:04:16

[Codeleft]

1.
var parent = $(this).parent(); < to jst zbędne

Zamiast

[HTML] pobierz, plaintext 
parent.remove();
[HTML] pobierz, plaintext 

wklej

[HTML] pobierz, plaintext 
$(this).closest('tr').remove();
[HTML] pobierz, plaintext 

2.
Tworzysz zły chwyt elementu dodatkowo jeśli elementy tworzone są asynchronicznie to koniecznie poczytaj o delegowaniu.
Proponuje zawsze delegować do rodzina elementu bądź jego głównego kontenera jeśli coś usuwasz bądź tworzysz z Ajaxem.

$('.table table-bordered').on('click','tbody > .usun',function(){
////KOD

});

3.

[PHP] pobierz, plaintext 
error: function(xhr, ajaxOptions, thrownError)
{
  toastr.warning('Przepraszamy wystąpił błąd sprawdz dane i spróbój ponownie')
$("#img_edit_uslugi").hide();
},
[PHP] pobierz, plaintext 

dodaj

[HTML] pobierz, plaintext 
consol.log('XHR: '+xhr);
consol.log('ajaxOptions: '+ajaxOptions);
consol.log('thrownError:'+thrownError);
[HTML] pobierz, plaintext 

i zobacz jakie błędy w konsoli się pojawiają.

bądź:

[HTML] pobierz, plaintext 
console.log(data);
[HTML] pobierz, plaintext 

co tutaj konsola powiada?

4.
Czas zastąpić var -> let/const

Ten post edytował Codeleft 24.03.2021, 19:42:24

[pawel06281990]

Nie stety nic nie pokazuje bo jak kliknę w ikonkę kasuj to mi dodaje w pasku wyszukiwarki adres oraz &przelew_id=1

zrobiłem tak jak napisałem czyli tak wygląda skrypt po zmianach

[JAVASCRIPT] pobierz, plaintext 
jQuery(document).ready(function($){
$('.table table-bordered').on('click','tbody > .usun',function(){
 
let przelew_id= document.getElementById('usun_'+przelew_id);
$("#img_delete").show();
$("#img_delete").fadeIn(400).html('<img  src="../wp-content/plugins/wp-zmarli/modul/platnosci/assets/images/loading.gif" />');
 
$.ajax({
type: "GET",
url: wp_zmarli_link.ajax_url +"?action=delete",
data : "przelew_id=" + parseInt($(this).attr('przelew_id')),
 
beforeSend: function() {
        parent.animate({'backgroundColor':'#fb6c6c'},300);
      },
error: function(xhr, ajaxOptions, thrownError)
{
  toastr.warning('Przepraszamy wystąpił błąd sprawdz dane i spróbój ponownie')
$("#img_delete").hide();
consol.log('XHR: '+xhr);
consol.log('ajaxOptions: '+ajaxOptions);
consol.log('thrownError:'+thrownError);
},
success: function(data){
    toastr.success('Usługa została zaktualizowana')                               
	$("#img_delete").hide();
        parent.slideUp(300,function() {
         $(this).closest('tr').remove();
        });
        console.log(data);
  }
});
 
	return false;
});
 
});
[JAVASCRIPT] pobierz, plaintext 

nawet dodałem let ale nic to nie zmieniło

[viking]

Dlaczego mieszasz jquery z natywnym js przy wybieraniu elementów? Gdzie w tym kodzie masz atrybut $(this).attr('przelew_id')? A nawet jeśli już to powinien być jako data-*. Dlaczego w ogóle zezwalasz na metodę get przy kasowaniu? console.log nie consol. Od lata używa się done/fail nie error i success.

[pawel06281990]

Przerabiam skrypt którego uzywam do zapisu i do edycji i chce go użyć do kasowania bez przeładowywania z widocznym efektem że tabelka tr o podanym id z bazy znika z fajnym efektem znikającym.

Ale jak tak przerabiam skrypt to nic się nie dzieje w konsoli nie widzie czy pokazuje błąd czy jakiś efekt zwraca.

teraz tak wygląda mój skrypt

[JAVASCRIPT] pobierz, plaintext 
jQuery(document).ready(function($){
$(".usun").click(function(w) {
w.preventDefault();
 
$("#img_delete").show();
$("#img_delete").fadeIn(400).html('<img  src="../wp-content/plugins/wp-zmarli/modul/platnosci/assets/images/loading.gif" />');
 
$.ajax({
type: "POST",
url: wp_zmarli_link.ajax_url +"?action=delete",
data : {
usun : $(this).attr('przelew_id')
},
 
fail: function(xhr, ajaxOptions, thrownError)
{
  toastr.warning('Przepraszamy wystąpił błąd sprawdz dane i spróbój ponownie')
$("#img_delete").hide();
console.log('XHR: '+xhr);
console.log('ajaxOptions: '+ajaxOptions);
console.log('thrownError:'+thrownError);
},
done: function(data){
    toastr.success('Usługa została zaktualizowana')                               
	$("#img_delete").hide();
          $(this).closest('tr').remove();
 
        console.log(data);
  }
});
 
	return false;
});
 
});
[JAVASCRIPT] pobierz, plaintext 

A tak wygląda moja tabelka

[PHP] pobierz, plaintext 
  <table class="table table-bordered">
                  <thead>
 
                    <tr>
                      <th style="width: 22%"><?php esc_html_e('Czas trwania', 'zmarli');?></th>
                            <th><?php _e('Klucz', 'zmarli');?></th>
                            <th><?php _e('Kwota', 'zmarli');?></th>
                            <th><?php _e('Opcje', 'zmarli');?><div id="img_delete"></div></th>
                    </tr>
                  </thead>
                  <tbody>
                        <?php
        if($uslugi_dopay_lista){
 
    foreach ($uslugi_dopay_lista as $lista_dotpay) { 
 
 
                    echo'<tr class="usun" data-id="usun_'.$lista_dotpay['przelew_id'].'">';
                    echo'<td>';
                    if ($lista_dotpay['przelew_czas'] == 60*60*24*365) {
    echo "Rok"; 
	} elseif ($lista_dotpay['przelew_czas'] == 60*60*24*730) {
	echo "2 Lata"; 
	} elseif ($lista_dotpay['przelew_czas'] == 60*60*24*1095) {
	echo "3 Lata"; 
        } elseif ($lista_dotpay['przelew_czas'] == 60*60*24*1254) {
	echo "3 Lata"; 
	} else {
	echo round($lista_dotpay['przelew_czas'] / 86400, 2) ." (dni)";
	}
                    echo'</td>';
                       echo '<td>'.$lista_dotpay['przelew_klucz'].'</td>';
 
        echo '<td>'.$lista_dotpay['przelew_kwota'].'</td>';
        echo '<td>'; 
        echo "<a class='usun' href='".PLATNOSCI_URL."?page=usluga_dotpay&przelew_id=".$lista_dotpay['przelew_id']."'><img src='".PLATNOSCI_PATH."/assets/images/delete.png' title='Skasuj'></a> |";
	echo " <a href='".PLATNOSCI_URL."?page=edit_dotpay&przelew_id=".$lista_dotpay['przelew_id']."'><img src='".PLATNOSCI_PATH."/assets/images/edit.png' title='Edytuj'></a>";
        echo'</td>';
 
                     echo'</tr>';
                   }
 
         ?>
                   </tbody>
                 </table>
[PHP] pobierz, plaintext 

Gdzie robię problem bo mi nie działa

[viking]

Już ci pisałem. Gdzie masz ten atrybut przelew_id i dlaczego uważasz że element powinien mieć twój atrybut zamiast data-przelewId?

[pawel06281990]

Już ci pisałem. Gdzie masz ten atrybut przelew_id i dlaczego uważasz że element powinien mieć twój atrybut zamiast data-przelewId?

Ten atrybut mam w tym elemencie

[JAVASCRIPT] pobierz, plaintext 
$.ajax({
type: "POST",
url: wp_zmarli_link.ajax_url +"?action=delete",
data : {
usun : $(this).attr('przelew_id')
},
[JAVASCRIPT] pobierz, plaintext 

A id dodałem do tego elementu

[PHP] pobierz, plaintext 
<tr class="usun" data-id="usun_'.$lista_dotpay['przelew_id'].'">';
[PHP] pobierz, plaintext 

Ten post edytował pawel06281990 25.03.2021, 13:54:59

[viking]

Jak odbierasz dane to usuń co zawiera? I zrozum że twoje przelew_id odnosiło by się do elementu np <span przelew_id/>

[pawel06281990]

Ja zrozumiem tylko dane które odbieram żeby zapisać to sa w class w <form> a jak zrobić żeby nie dodawać <form> tylko pobrać je z tabeli tak jak pokazałem w moim kodzie

[viking]

Dokładnie to samo co w pytaniu wyżej https://jsfiddle.net/qeyh0dsm/

[pawel06281990]

Dokładnie to samo co w pytaniu wyżej https://jsfiddle.net/qeyh0dsm/

Ok działa tak jak kliknę w kolumnę a jak to samo zrobić żeby działało w klikniecie w link usuwania w danej kolumnie??

[nospor]

No to zamiast do TD, podepnij zdarzeie to linka

[pawel06281990]

No to zamiast do TD, podepnij zdarzeie to linka

Ok dzięki za pomoc jest ok