I am using sweetalert in MVC project, and rendering checkbox in to sweetalert using CheckBoxFor html helper.
But when I clicked on these checkboxes, sometime it is getting clicked and sometime it is not getting clicked. I am not getting the reason behind this weird behaiviour.
And at the same place I tried adding normal html checkboxes, these checkboxes are working perfectly fine.
Can anyone help to know the reason behind this weird behaiviour ?
Code:
View:
<table class="table">
#foreach (var item in Model)
{
<tr>
<td>
<input type="checkbox" name="Asha" style = "display:block;height:20px;width:20px;"/>
</td>
<td style="padding-left:20%">
#Html.CheckBoxFor(modelItem => item.Status,htmlAttributes: new { style = "display:block;height:20px;width:20px;", id = item.Id ,Class = "process-to-lock", value = item.Name})
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
</tr>
}
</table>
SweetAlert:
$("#unLockNominations").click(function (e) {
showCustomLoader();
$.ajax({
type: 'GET',
url: '#Url.Action("UnlockNomination", "Review")',
dataType: 'html',
success: function (result) {
hideCustomLoader();
swal({
title: "Awards to unlock",
html: true,
text: result,
showConfirmButton: ($(result).filter('#no-awards').text() == undefined || $(result).filter('#no-awards').text() == ""),
confirmButtonColor: "#0070b9",
confirmButtonText: "Submit",
showCancelButton: true,
cancelButtonText: "Cancel",
closeOnConfirm: false,
closeOnCancel: true
}
}
Here in above code text renderd in sweet alert is a html table which I mentioned above.
Related
i am using sweet alert method framework to show the alert when deleting but when i do this at destroy method return Request() or return $request it returns blank page with no requests or results i don't know why please help
here is my code
my route
Route::resource('brands',App\Http\Controllers\backend\brandController::class);
my table to view brands
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>brand name en</th>
<th>brand name ar</th>
<th>image</th>
<th>action</th>
</tr>
</thead>
<tbody>
#foreach ($brands as $brand)
<tr>
<td>{{$brand->brand_name_ar}}</td>
<td>{{$brand->brand_name_en}}</td>
<td>{{$brand->image}}</td>
<td>edit
<a href="{{route('brands.destroy',$brand->id)}}" id="delete"
class="btn btn-danger">delete</a>
</td>
</tr>
#endforeach
</tbody>
</table>
my sweet alert javascript code
<script>
$(document).ready(function(){
$(function (){
$(document).on('click','#delete',function(e){
e.preventDefault();
var link = $(this).attr('href');
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) {
window.location.href = link
Swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
});
});
});
});
</script>
my destroy method
public function destroy($id,Request $request)
{
return Request();
$brand = Brand::find($id);
}
How to use sweetalert confirm deleting in my project
i am using asp.net MVC core 5.0
I'm trying to make delete confirmation for category. When user click this button in Index.cshtml it will show delete confirmation for delete data or not, but delete confirmation just appear for while after that data deleted without the confirmation.
Index.cshtml side =
<tr>
<th>ID</th>
<th>Kategori</th>
<th>Sil</th>
<th>Düzenle</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>#item.Id</td>
<td>#item.CategoryName</td>
<td>
<a asp-action="Delete" asp-controller="Category" asp-route-id="#item.Id" class="btn btn-danger" id="delete">Sil</a>
</td>
<td><a asp-action="Edit" asp-controller="Category" asp-route-id="#item.Id" class="btn btn-primary">Güncelle</a></td>
</tr>
}
Controller side =
public IActionResult Delete(int id)
{
var category = _unitOfWork.categoryRepo.Get(x => x.Id == id);
_unitOfWork.categoryRepo.Delete(category);
_unitOfWork.Save();
return RedirectToAction("Index");
}
js side =
<script src="/adminlte/vendor/jquery/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
sweetalert =
<script>
function confirm() {
swal({
title: "Are you sure?",
text: "Once deleted, you will not be able to recover",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
swal("deleted!", {
icon: "success",
});
} else {
swal("category is safe!");
}
});
return false;
}
Merhaba/Hi İbrahim,
Change your code like below;
<td><div><form asp-action="Delete" method="post" asp-controller="Category" asp-route-id="#item.Id"><button type="button" class="btn btn-danger" onclick="return functionConfirm(this)">Delete</button></form>
</div>
</td>
and
#section Scripts{
<script>
function functionConfirm(event) {
const swalWithBootstrapButtons = Swal.mixin({
customClass: {
confirmButton: 'btn btn-success',
cancelButton: 'btn btn-danger'
},
buttonsStyling: false
})
swalWithBootstrapButtons.fire({
title: 'Emin misiniz?',
text: "Bu işlem geri alınamaz!",
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Evet, sil!',
cancelButtonText: 'Hayır, iptal',
reverseButtons: true,
timer: 3000
}).then((result) => {
if (result.isConfirmed) {
$("form").submit();
swalWithBootstrapButtons.fire({
title: 'Silindi!',
text :'Kategori silindi.',
icon: 'success',
timer:'2000'
}
)
} else if (
/* Read more about handling dismissals below */
result.dismiss === Swal.DismissReason.cancel
) {
swalWithBootstrapButtons.fire(
'İptal edildi',
'',
'error'
)
}
})
}
</script>
}
I started messing around with Vue.js earlier this week.
So far I created a list of MTG(a TCG) cards. The data comes from the database through an Ajax request. This all works like a charm.
What i want to do next is replace the string that contains the costs of a card e.g. something like '{1}{U}{G}' with images for the corresponding tag.
HTML:
<div v-for="(cards, key) in mainBoard" class="">
<table class="table">
<tr>
<th colspan="5">#{{ key }}</th>
</tr>
<tr>
<th>#</th>
<th>Name</th>
<th>ManaCost</th>
#if($deck->enableCommander())
<th>Commander</th>
#else
<th></th>
#endif
<th>Actions</th>
</tr>
<tr v-for="card in cards">
<td>#{{card.pivot.quantity}}</td>
<td>#{{card.name}}</td>s
<td v-html="replaceManaSymbols(card)"></td>
#if($deck->enableCommander())
<td>
<span v-if="card.pivot.commander" #click="preformMethod(card, 'removeCommander', $event)"><i class="fa fa-flag"></i></span>
<span v-else #click="preformMethod(card,'assignCommander', $event)"><i class="far fa-flag"></i></span>
</td>
#else
<td> </td>
#endif
<td>
<button #click="preformMethod(card,'removeCardFromDeck', $event)"><i class="fa fa-times-circle"></i></button>
<button #click="preformMethod(card,'plusCardInDeck', $event)"><i class="fa fa-plus-circle"></i></button>
<button #click="preformMethod(card,'minusCardInDeck', $event)"><i class="fa fa-minus-circle"></i></button>
</td>
</tr>
</table>
</div>
Vue.js
new Vue({
el: '#Itemlist',
data: {
mainBoard: [],
sideBoard: [],
},
methods:{
preformMethod(card, url){
var self = this;
var varData = {
slug: '{{ $deck->slug }}',
card: card.id,
board: card.pivot.mainboard
};
$.ajax({
url: '/vue/'+url,
data: varData,
method: 'GET',
success: function (data) {
self.mainBoard = data.mainBoard;
self.sideBoard = data.sideBoard;
},
error: function (error) {
console.log(error);
}
});
},
replaceManaSymbols(card){
var mc = card.manaCost;
var dump = mc.replace(/([}])/g, '},').split(',');
var html = '';
/**
* replace each tag with an image
*/
return html;
}
},
mounted(){
var self = this;
var varData = {
slug: '{{ $deck->slug }}'
};
$.ajax({
url: '/vue/getDeckList',
data: varData,
method: 'GET',
success: function (data) {
self.mainBoard = data.mainBoard;
self.sideBoard = data.sideBoard;
},
error: function (error) {
console.log(error);
}
});
}
})
I pass the card as a parameter to the replaceManaSymbols method. I can console.log the contents of mana without any issue. But as soon as a want to modify the string Vue throws the error TypeError: Cannot read property 'toLowerCase/split/replace' of null. I'm not really sure what's going wrong. Any idea's?
As a rule of thumb, you shouldn't use methods on the display side. Keep them for the update side - processing changes back into a store and such. Methods aren't reactive - they need to be called. You want your display to automatically reflect some underlying data, so you should use computed.
You should also avoid using v-html, because you end up with markup outside your templates, and that markup is static. It's not totally clear to me what will be in v-html, but you should try and keep markup in your template, and inject values using data, props or computed. Hope this helps!
If you want a div with some text that magically turns into an image tag, this could be a good use for <component :is>.
In my laravel project I am using sweet alert works fine but it is deleting my first-row record only I don't know what the problem is
this is my form
<td>
<form id="myform" class="delete-photo" method="POST" action="{{route('testimony.destroy', $testimony->id)}}">
<input type="hidden" name="_method" value="delete">
{{ csrf_field() }}
<div class="form-group">
<button type="submit" data-photo-id="{{$testimony->id}}"
class="submitdel btn btn-danger"
>Delete</button>
</div>
</form>
and this is my script
$('.delete-photo').click(function(e) {
e.preventDefault(); // Prevent the href from redirecting directly
var linkURL = $(this).attr("action");
warnBeforeRedirect(linkURL);
});
function warnBeforeRedirect(linkURL) {
swal({
title: "Are you sure?",
text: "You will not be able to recover this file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#5c5856",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
document.getElementById("myform").submit();
} else {
swal("Cancelled", "Your file is safe :)", "error");
}
}
);
}
This is because your form passing a same id each time. if you are looping in your record then the form must be loop thought. But this is not good practice. i would suggest you to use
<button type="submit" data-photo-id="{{$testimony->id}}" class="submitdel btn btn-danger">Delete</button>
in loop then the $testimony->id would be different with it's own id that is coming from database. Then get it's data-photo-id with Javascript on click event handler then pass this id to your controller and post the url.
okay suppor you are getting dynamic data from database and displaying it like
<table>
<tr>
<td>name</td>
<td>email</td>
<td><button type="submit" data-photo-id="1" class="submitdel btn btn-danger">Delete</button></td>
</tr>
<tr>
<td>name</td>
<td>email</td>
<td><button type="submit" data-photo-id="2" class="submitdel btn btn-danger">Delete</button></td>
</tr>
<tr>
<td>name</td>
<td>email</td>
<td><button type="submit" data-photo-id="3" class="submitdel btn btn-danger">Delete</button></td>
</tr>
</table>
then get the data-photo-id (replace this with your dynamic id) by using this way
<script>
$(function(){
$('.submitdel').on('click',function(){
// store current button into variable
var id = $(this).data('photo-id');
warnBeforeRedirect(id);
})
})
function warnBeforeRedirect(id) {
swal({
title: "Are you sure?",
text: "You will not be able to recover this file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#5c5856",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
window.location = 'http://yoursite.com/controllername/'+id
} else {
swal("Cancelled", "Your file is safe :)", "error");
}
}
);
}
</script>
and replace window.location with the url you are want to use. Hope you get it now.
can anyone help please. I have a problem updating "div" inside of "table" to update "tr with_id". However when I run test and
place without_"id" outside of table my script runs greate and i'm getting server "TEST" response
<table style="border: none; border-bottom: 1px solid #2F2E2F;">
<tr>
<th colspan="4">Notifications</th>
</tr>
<div id="update_118">
<tr class="read_118">
</div>
<td>... </td>
<td> Comment on your Photo </td>
<td>today 21:43</td>
<td>... </td>
</tr>
</table>
Now I want to up update this "div" when mouseover on success: function() without page refreshing to have its value change to class="light" to have NOT TO CALL ajax url: "/alerts/ajax_read/118" over and over while mouse is over on it.
<div id="update_118">
<tr class="light">
</div>
here is my script,...
<script>
$(document).ready(function(){
$('.read_118').on('mouseover', function(){
var id = $(this).attr("id")
var data = 'id=' + id ;
$.ajax({
type: "GET",
url: "/alerts/ajax_read/118",
data: data,
cache: false,
success: function(){
$('#update_118').fadeOut('slow').load('/alerts/ajax_load/118').fadeIn("slow");
return false;
}
});
});
});
</script>
here is my server response file:
$response = " <tr class='light'> ";
echo $response;
thanks in advance,...
chris
Update following line
success: function(){
To
success: function(data){
and set the "data" variable value to your respective "div" or other place where you want.