swal is not define in function saveDefect()

Everything is now working as i expected, and this is how I re-write the code.

function saveDefect() {
                          
                     var defect = new Object();
                     defect.ProductDefectId = $("#defectId").val();
                     defect.CategoryId = $("#categoryId").val();
                     defect.Date = $("#date1").val();
                     defect.Product = $("#product").val();
                     defect.Qty = $("#quantity").val();
                     defect.Price = $("#price").val();
                     defect.Total = $("#total_1").val();
                     defect.Remarks = $("#remark").val();
                     var data = JSON.stringify({
                         defect: defect
                     });
                     swal("Save!", "Defective Product added successfully", "success");
                     $("#success-message").click(function (e) {
                         Swal.fire({
                             title: "Good job!",
                             text: "You clicked the button!",
                             icon: "success",
                             buttonsStyling: false,
                             confirmButtonText: "Confirm me!",
                             customClass: {
                                 confirmButton: "btn btn-primary"
                             }
                         });
                     });
                                                    
            return $.ajax({
                contentType: 'application/json; charset=ut-8',
                dataType: 'json',
                type: 'POST',
                url: "/Home/SaveDefect",
                data: data,
                success: function (result) {
                    if (result == true) {
                        Reset();
                        GetAllDefectProduct();
                        $("#ProductDefectModal").modal('hide');
                        
                    }
                }
                });
          
        }

I re-arrange the code this way and it work for me, but what I want now is instead of the sweetalert giving me a mark success after saving the data, it rather gives me a popup, Sachin I tried your format too but it it gives me a popup.

 function saveDefect() {
                          
                     var defect = new Object();
                     defect.ProductDefectId = $("#defectId").val();
                     defect.CategoryId = $("#categoryId").val();
                     defect.Date = $("#date1").val();
                     defect.Product = $("#product").val();
                     defect.Qty = $("#quantity").val();
                     defect.Price = $("#price").val();
                     defect.Total = $("#total_1").val();
                     defect.Remarks = $("#remark").val();
                     var data = JSON.stringify({
                         defect: defect
                     });
                     swal({
                         title: "Do you want to save this product?",
                         text: "Please check Information before Submiting!",
                         type: "warning",
                         showCancelButton: true,
                         confirmButtonColor: "#4BB543",
                         confirmButtonText: "Save",
                         cancelButtonText: "Cancel",
                         closeOnConfirm: false,
                         closeOnCancel: false
                     }).then( function (isConfirm) {
                         if (isConfirm) {
                                                    
            return $.ajax({
                contentType: 'application/json; charset=ut-8',
                dataType: 'json',
                type: 'POST',
                url: "/Home/SaveDefect",
                data: data,
                success: function (result) {
                    if (result == true) {
                        Reset();
                        GetAllDefectProduct();
                        $("#ProductDefectModal").modal('hide');
                        swal( " 1 Defective Product Save Successfully!")
                    }
                }
                });
        } else {
                $("#ProductDefectModal").modal('hide');
            swal("Cancelled", "You have Cancelled Form Submission!", "error");
           
        }  
                
           
            });
        }

Hello Sachin, I tried your format as you said and it only brings the sweetalert popup without saving the data

test this

function saveDefect() {
    swal({
        title: "Do you want to save it?",
        text: "Please check Information before Submiting!",
        icon: "warning",
      buttons: [
        'No, cancel it!',
        'Yes, I am sure!'
      ],
      dangerMode: true,
    }).then(
  function (isConfirm) {
      if (isConfirm) {
          var defect = new Object();
          defect.ProductDefectId = $("#defectId").val();
          defect.CategoryId = $("#categoryId").val();
          defect.Date = $("#date1").val();
          defect.Product = $("#product").val();
          defect.Qty = $("#quantity").val();
          defect.Price = $("#price").val();
          defect.Total = $("#total_1").val();
          defect.Remarks = $("#remark").val();
          var data = JSON.stringify({
              defect: defect
          });

      }
  });
          return $.ajax({
              contentType: 'application/json; charset=ut-8',
              dataType: 'json',
              type: 'POST',
              url: "/Home/SaveDefect",
              data: data,

              success: function (result) {
                  if (result == true) {

                      GetAllDefectProduct();

                      swal("1 Defective Product Save Successfully")
                  }
                  else {

                      swal("Cancelled", "You have Cancelled Form Submission!", "error");
                  }
              }

  });
}

Thank you guys, the modal popup is coming this time round but the confirmation buttons that is responsible for save or cancel before action is perform is not showing, kindly assist.

It seems that the code is missing the necessary reference to the sweet alert library. You need to include the sweet alert library in your HTML file using a script tag before the script that calls the swal function in the saveDefect function.

Add below code to your HTML file inside the head tag or before the script that calls the swal function in the saveDefect function.

Thanks

Check that the sweet-alert.js file is properly included in your HTML page where the saveDefect() function is being called.

You can include the sweet-alert.js file in the head section of your HTML page as follows:

Once the sweet-alert.js file is properly included, the swal function should be defined and you should be able to use it in the saveDefect() function.

you need to add sweetalert cdn or local downladed link inside your html or cshtml or aspx page whatever it is.