sweet alert nt w

Aug 10 2024 5:35 AM

Dear all, I have a simple asp.net mvc core application in which I have main view and partial view with strongly type models , on delete which is on partial view I want to show sweet alert (which works fine on main view but not on partial view ) below is my code , when I call the javascript method from button it says function not defined even though it is there below is my code.

I am share all code based the first approach i am sharing only partial view code with sweet alert

<div class="card radius-0 p-0 border-0 border-b-1 brc-grey-l3">
<div class="border-0" id="headingOne2">
<h2 class="card-title text-dark-tp2 brc-grey-l3">
List
</h2>
</div>
<div class="panel panel-default">
<div class="table-responsive">
<table id="tbllisting" class="table table-bordered table-hover">
<thead>
<tr>
<th width="5%" style="text-align:center"> Type</th>
<th width="5%" style="text-align:center">Category</th>
<th width="5%" style="text-align:center">Description</th>
<th width="5%" style="text-align:center">Delete</th>
</tr>
</thead>
<tbody style="text-align:center">
@foreach (var item in Model.detaillist)
{
<tr>
<td>@item.school.SubCategory</td>
<td>@item.school.Category</td>
<td>@item.school.Description</td>
<td>
<form method="post" action="@Url.Action("Delete", "details")">

<input type="hidden" name="id" value="@item.id" />
<button type="submit" class="btn btn-danger" onclick="DeleteRecord();">Delete</button></form>

</td>
</tr>
}
</tbody>
</table>
</div>
<div class="panel-footer">
</div>
</div>
</div>

</form>

@section Scripts {
<script type="text/javascript">
function DeleteRecord() {

Swal.fire({
title: 'Confirmation',
text: 'Are you sure you want to delete this information ?',
icon: 'question',
showCancelButton: true,
confirmButtonText: 'Ok'
}).then((result) => {

$("#Listing").trigger('button');
}
});

}

</script>

}
RESULT: it did not give any error in console but swal is not firing i am assure I have sweet alert reference in my _layout that is why on main view it works but in partial view it did not work.
___________________________________________________________________________________________________________Here is the second approach in which it says the function is not define in which I call the swal I am sharing the main view + partial view + controller method as shown below /

MY PARTIAL VIEW CODE :

@model web.ViewModels.mywm
@{
Layout = null;
}
<form id="Listing" name="Listing" method="post" asp-action="Delete" asp-controller="details">

<div class="card radius-0 p-0 border-0 border-b-1 brc-grey-l3">
<div class="border-0" id="headingOne2">
<h2 class="card-title text-dark-tp2 brc-grey-l3">
List
</h2>
</div>
<div class="panel panel-default">
<div class="table-responsive">
<table id="tblListing" class="table table-bordered table-hover">
<thead>
<tr>
<th width="5%" style="text-align:center"> Type</th>
<th width="5%" style="text-align:center">Category</th>
<th width="5%" style="text-align:center">Description</th>
<th width="5%" style="text-align:center">Delete</th>
</tr>
</thead>
<tbody style="text-align:center">
@foreach (var item in Model.detaillisting)
{
<tr>
<td>@item.myitem.SubCategory</td>
<td>@item.myitem.Category</td>
<td>@item.myitem</td>
<td>
<form method="post" action="@Url.Action("Delete", "details")">
<input type="hidden" name="id" value="@item.id" />

<button type="submit" class="btn btn-danger" onclick="DeleteRecord();">Delete</button></form>
</td>
</tr>
}
</tbody>
</table>
</div>
<div class="panel-footer">
</div>
</div>
</div>

@section Scripts {
<script type="text/javascript">
function DeleteRecord()
{

Swal.fire({
title: 'Confirmation',
text: 'Are you sure you want to delete this information ?',
icon: 'question',
showCancelButton: true,
confirmButtonText: 'Ok'
}).then((result) => {

$("#Listing").trigger('submit');
}

}

</script>

}
My Main View Code:

@model web.ViewModels.mywm
@using web.Classes

Item Information
</a>
</h2>
</div>
<form asp-action="Save" asp-controller="Details" method="post" name="Myform" id="Myform">
<div id="detail" >
<div class="card-body px-4 bgc-event-form-body">

<div style="position:relative; top:-17px;left:5px;height:20px;width:max-content;
background-color:#F7F9FA; border:2px sold ;text-align:center; color:black; font-size:14px; font-weight:600;">
Details
</div>
<input type="hidden" asp-for="itemdetails.id" />
<div class="form-group row col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="col-sm-2 col-md-2 col-lg-2 col-xl-2">
<label asp-for="itemdetails.id" class="input-label">
Type
</label>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
<select asp-items="helper.CategoryDetail()" id="itemdetails.id" name="itemdetails.id" asp-for="itemdetails.id" onchange="GetsubCategory()" type="text" class="form-control">
<option value="">-- Select --</option>

</select>
<span asp-validation-for="itemdetails.id" class="form-text form-error text-danger-m2 ">
</span>
</div>
<div class="col-sm-2 col-md-2 col-lg-2 col-xl-2">
<label asp-for="itemdetails.recordid" class="input-label">
item Category
</label>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
<select id="ddlSubcategory" name="itemdetails.ddlSubcategory" asp-for="itemdetails.ddlSubcategory" type="text" class="form-control">
<option value="">-- Select --</option>
</select>
<span asp-validation-for="itemdetails.recordid" class="form-text form-error text-danger-m2 ">
</span>
</div>
</div>

<div class="form-group row col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="col-sm-2 col-md-2 col-lg-2 col-xl-2">
<label asp-for="itemdetails.description" class="input-label">
Description
</label>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
<textarea asp-for="itemdetails.description" autocomplete="off" type="text" class="form-control"></textarea>
<span asp-validation-for="itemdetails.description" class="form-text form-error text-danger-m2 "></span>
</div>

</div>
<div class="form-group row" style="text-align:end;margin-top:10px">
<div class="col-sm-12" style="padding-right:35px">
<div class="row justify-content-center">
<button type="button" class="btn btn-bg-system" onclick="SaveME()">Save</button>
</div>
@* <button class="btn btn-blue text-600" type="button" onclick="SaveToken()">Save Information</button> *@
</div>
</div>

</div>
</div>
</div>
</form>
<div class="card-body p-0 border-0">
<div>

@await Html.PartialAsync("~/Views/details/itemdetailsList.cshtml")

</div>
</div>

</div>
@section Scripts {
@* <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> *@

$(document).ready(function () {
SaveME = function () {

Swal.fire({
title: 'Confirmation',
text: 'Are you sure you want to save Information ? ',
icon: 'question',
showCancelButton: true,
confirmButtonText: 'Ok'
}).then((result) => {
if (result.isConfirmed) {

$("#ApplicationDetailsform").trigger('submit');
}
})

}

GetSubCategoryByType();
});

$("#itemdetails.id").change(function () {
GetSubCategoryByType();

});
var e = document.getElementById("itemdetails.id");

var value = e.options[e.selectedIndex].value;

var text = e.options[e.selectedIndex].text;

var GetSubCategoryByType = function () {
$.ajax({

url: 'items/' + text,

type: 'GET',
success: function (data) {

console.log(data);
$('#ddlSubcategory').find('option').remove();
$.each(data, function (index, item) {
$("#ddlSubcategory").append('<option value="' + item.id + '">' + item.subCategory + '</option>');
});

},
error: function (xhr, status, error) {
console.log('AJAX Error:', status, error);
}
});

}
}

</script>

}

Contorller Delete method :

[HttpPost]

public IActionResult Delete(int id)
{
try
{
var item=DbContext.ITEMS.Where(a=>a.itemid==id).FirstOrDefault();

if (item != null)
{
DbContext.ITEMS.Remove(item);
DbContext.SaveChanges();
return RedirectToAction("Index");

}

}
catch (Exception ex) {
TempData["errorMessage"] = ex.Message + "item cannot be deleted";
return View();
}

return View();
}
still swal is not firing the issue is with partial view I have checked to replace button with @HTML.ACTIONLINK AS WELL BUT STILL THE SAME SOME TIME it show no error and sometime it says javascript function is not defined with call the swal , I haev sweet alert reference in _Layout and it work for main index , secondly ignore spelling mistake from this post like model name or etc.

Answers (1)

How to deploy container code in production?

can we call sweet alert in partial view