WebHU - Programozási kérdések és válaszok

Az űrlap nem kerül elküldésre az édes figyelmeztetés megerősítése után

Van egy táblázatom, amely néhány adatsort tartalmaz, és minden sorhoz van törlés gomb.

Az űrlapom nem küld el, ha a sweetalert2-t implementálom a kódommal, amire szükségem van, csak a sweetalert megerősítő gomb után kell törölni a sort. Itt van a kódom;

<tbody>
<?php foreach ($category_details as $category_detail): ?>
<tr>
<td>...</td> <!-- etc -->
<form method="post">
<td>

<input type="hidden" name="delete-id" value="<?php echo $category_detail['id']; ?>">

<button type="submit" name="single-cdelete" class="swa-confirm btn btn-trash-alt">
<i class="fas fa-trash-alt"></i>
</button>

</td>
</tr>
<?php endforeach ?>
</tbody>
</form>

if(isset($_POST['single-cdelete'])){
    $delete_id    = $_POST['delete-id'];
    $delete_image = $_POST['delete-image'];
    category_delete($delete_id, $delete_image);
}

function category_delete($delete_id, $delete_image){
    
    global $db;

    if(mysqli_query($db, "DELETE FROM categories WHERE id =$delete_id")){
        unlink('../assets/images/categories/'.$delete_image);
        $_SESSION['success'] = "Category has been deleted successfully";
    }else{
        $_SESSION['success'] ="Something went wrong, Try again";
    }
}

SweetAlert kódom:

<script>
$(".swa-confirm").on("click", function(e) {

        e.preventDefault(); 

        Swal.fire({
            title: "Are you Sure ?",
            text:"You want to Delete the selected Category",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#cc3f44",
            confirmButtonText: "Delete",
            closeOnConfirm: true,
            html: false
        }, function( confirmed ) {
            if( confirmed ){
                $('.swa-confirm').submit();
            }
        });

});
</script>

javascript php html jquery
27.12.2020

  • nem ismeri a sweetalert, de úgy tűnik, hogy egy ajax-hívást kell indítania a php kódra, hogy bekösse a delete funkciót onclick 27.12.2020

Válaszok:


1

a @Tangoabc Delta megjegyzéseként használhatja a .submit() eseményt egy űrlapon, tehát:

  • először adjon meg egy azonosítót az űrlapnak:

    <form method="post" id="swaForm">

  • majd használd a következő szkriptet:

     <script>
      $(".swa-confirm").on("click", function(e) {

              e.preventDefault(); 

              Swal.fire({
                  title: "Are you Sure ?",
                  text:"You want to Delete the selected Category",
                  type: "warning",
                  showCancelButton: true,
                  confirmButtonColor: "#cc3f44",
                  confirmButtonText: "Delete",
                  closeOnConfirm: true,
                  html: false
              }).then(function() {
                     $('#swaForm').submit();
                  })
              });
      </script>
27.12.2020

2

Amint a kódjából kitűnik, a jQuery segítségével hajtott végre űrlapot.

A dokumentáció szerint https://api.jquery.com/submit/, a módszer .submit() csak form-on használható.

A beküldési esemény akkor kerül elküldésre egy elemnek, amikor a felhasználó megpróbál űrlapot beküldeni. Csak <form> elemhez csatolható.

Űrlapok beküldhetők az explicit , , vagy gombra kattintva, vagy az Enter lenyomásával, ha bizonyos űrlapelemek fókuszban vannak...

Látható, hogy más funkcióra is támaszkodsz Swal.fire(..), ami miatt egy event.preventDefault()-t kellett csinálnod, különben az űrlap gond nélkül beküldte volna magát. De érthető, hogy szüksége lesz a funkció ezen részére.

Tehát a probléma megoldásához hozzá kell adnia valamilyen azonosítót az űrlaphoz, pl. egy class vagy egy id. Tehát ahelyett, hogy ezt tenné:

<form method="post">

..tenni, valami ilyesmit

<form method="post" id="myform">

..és a kódrészletben használja ezt az azonosítót a submit() hívásához:

frissítés: Figyelje meg azt is, hogy a sweetalert2 támogatja a promise-t, ezért javasolja az then-képes ígéret használatát, valamint a catch blokk használatát a hibák nyomon követésére.

$(".swa-confirm").on("click", function(e) {

  e.preventDefault();

  Swal.fire({
      ...
    }).then((confirmed) => {
      if (confirmed) {
        $('#myform').submit(); // << here
      }
    })
    .catch((error) => {
      console.log(error)
    });
});
27.12.2020
  • Kipróbáltam a kódját, de nem küldi el... Nem tudom, miért 27.12.2020
  • űrlapadatokat kell megadnia, például HTML- vagy PHP-kód pillanatképeket a jobb megértés érdekében. 27.12.2020
  • Próbálja meg 3 dolgot itt: 1. Próbálja meg eltávolítani ezt a preventDefault-t (ebben az esetben nincs szüksége erre a submit()-ra' 2. Próbálja ki ezt a submit() hívást a visszahíváson kívül (a preventDefault maradhat) 3. Tegyen egy hibakeresési pontot, és nézze meg ha a Swal API visszahívása elérhető vagy sem. Azt hiszem, valami hiba van az swal-ben, ami megakadályozza ennek előfordulását. 27.12.2020
    • Új anyagok
    A rádiógomb ellenőrzött eseményének használata a jQueryben
    Ebben a cikkben látni fogjuk, hogyan kell dolgozni a jquery választógombbal ellenőrzött eseményeivel. A választógombok HTML gombok, amelyek segítenek kiválasztani egyetlen értéket egy csoportból...
    Körkörös függőségek megoldása terraformban adatforrásokkal – lépésről lépésre
    Mi az a körkörös függőségek Dolgozzunk egy egyszerű eseten, amikor az SQS-sor és az S3-vödör közötti körkörös függőség problémája van egy egymástól függő címkeérték miatt. provider..
    Miért érdemes elkezdeni a kódolást 2023-ban?
    01100011 01101111 01100100 01100101 — beep boop beep boop Világunk folyamatosan fejlődik a technológia körül, és naponta fejlesztenek új technológiákat a valós problémák megoldására. Amint..
    🎙 Random Noise #2  – Örökbefogadás és hit
    az analitika íratlan világának gondozása Szeretné, hogy ezek a frissítések a postaládájába kerüljenek? Iratkozzon fel itt . "Ha önvezető autókat gyártanak, akkor mi miért ne..
    A legrosszabb politika és prediktív modellek májátültetésre jelöltek számára az Egyesült Államokban
    A máj (vagy óangolul lifer) az emberi test legnehezebb belső szervére utal, amely csendesen működik a nap 24 órájában. Mit csinál a máj? 500 feladatot hajt végre a szervezet egészségének..
    5 webhely, amely 2022-ben fejleszti front-end fejlesztői készségeit
    Frontendmentor.io A tényleges projektek létrehozásával a Frontendmentor.io segítséget nyújt a front-end kódolási képességeinek fejlesztésében. A kódolást azután kezdheti meg, hogy..
    Mikor kell használni a Type-t az interfészhez képest a TypeScriptben?
    A TypeScript a JavaScript gépelt szuperkészlete, amely statikus gépelést ad a nyelvhez. Ez megkönnyíti a robusztus és karbantartható kód írását azáltal, hogy a hibákat a fordítási időben..