why my function inside button didnt work?-CodePudding

so this is my highschool project,

This is the Button

<button onclick="btncncl(); location.href='hapus.php?id=<?= $dp["ID"]; ?>'"  role="button"><span >Delete</span></button>

this is the javascript (swal)

function btncncl() {
  Swal.fire({
    title: "Are you sure?",
    text: "You won't be able to revert this!",
    icon: "warning",
    showCancelButton: true,
    confirmButtonColor: "#3085d6",
    cancelButtonColor: "#d33",
    confirmButtonText: "Yes, delete it!",
  }).then((result) => {
    if (result.isConfirmed) {
      Swal.fire("Deleted!", "Your file has been deleted.", "success");
    }
  });
}

the button works, but the swal function doesn't appear, and this code is inside php file

CodePudding user response：

Because you are not passing the parameter ID into your function.

<button onclick="btncncl(<?= $dp["ID"]; ?>)"  role="button">Delete</button>


function btncncl(id = null) {
    if(id){
        $.ajax({
            url: "yourCancelPHPFile.php",
            type: 'POST',
            data: {id: id},
            dataType: 'json',
                success:function(response) {
                    if(response.success == true) {
                        Swal.fire({
                            toast: true,
                            icon: response.icon,
                            title: response.title,
                            position: 'top',
                            showConfirmButton: false,
                            timer: 2000,
                            timerProgressBar: true,
                        });
                        
                    } else {
                        Swal.fire({
                            toast: true,
                            icon: response.icon,
                            title: response.title,
                            position: 'top',
                            showConfirmButton: false,
                            timer: 2000,
                            timerProgressBar: true,
                        });
                    } 
                } 
        });
    }
}

CodePudding user response：

Here is the solution,

I test it. you also can run and check the code.
Note: this is sweetalert2. You need to link js of it. (external or internal)
check the full code below.

document.getElementById("deleteBtn").addEventListener("click", function () {
  Swal.fire({
    title: "Are you sure?",
    text: "You won't be able to revert this!",
    icon: "warning",
    showCancelButton: true,
    confirmButtonColor: "#3085d6",
    cancelButtonColor: "#d33",
    confirmButtonText: "Yes, delete it!",
  }).then((result) => {
    if (result.isConfirmed) {
      location.href='hapus.php?id=<?= $dp["ID"]; ?>';
      Swal.fire("Deleted!", "Your file has been deleted.", "success");
    }
  });
});

<button id="deleteBtn"  role="button"><span >Delete</span></button>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script src="btncncl.js"></script>

Hope you will fix it : )

CodePudding user response：

function btncncl() {
  Swal.fire({
    title: "Are you sure?",
    text: "You won't be able to revert this!",
    icon: "warning",
    showCancelButton: true,
    confirmButtonColor: "#3085d6",
    cancelButtonColor: "#d33",
    confirmButtonText: "Yes, delete it!",
  }).then((result) => {
    if (result.isConfirmed) {
      Swal.fire("Deleted!", "Your file has been deleted.", "success");
    }
  });
}

<button onclick=btncncl() location.href='hapus.php?id=<?= $dp["ID"]; ?>'  role="button"><span >Delete</span></button>

Hey... Look at this part onclick="btncncl();