I'm still a beginner with Laravel. I wanted to do the usual "are you sure you want to delete this" question as a modal. I'm trying to do it with JS, and I have the following function that I found on this very website.
function confirmClick(){
let url = "{{route('comics.destroy', ':id') }}";
url = url.replace(':id', idComic);
window.location.href = url;
};
But when I use this what I get is the show route. This is what I have in my Controller
public function destroy($id)
{
$comic = Comic::findOrFail($id);
$comic->delete();
return redirect()->route('comics.index');
}
And the html
<div class="hidden" id="deleteModal">
<h2>Sei sicuro di volerlo eliminare?</h2>
<button type="submit" class="btn btn-danger" id="yesBtn">Sì</button>
<button type="submit" class="btn btn-info" id="noBtn">No</button>
</div>
Do i have to add in some way a method and the token? In case I have to, how do I do this? Sorry if this might look confusing, but it comes from a really confused mind at the moment lol
I suggest you use a different approach, mostly because Laravel's default route for DELETE requieres a POST.
This is a code I use very often. You have a form with the method and token, and a button with a class "deletebutton".
If you click the button, it triggers the "confirmation" from this library https://bootstrap-confirmation.js.org/. You can use another library, or use your own implementation returning a true/false value to evaluate and then decide if you submit the form or not.
if the user confirms, it looks for the form and then triggers the "submit"
<form class="form_delete" action="/record/{{ $record->id }}" method="POST">
{{ csrf_field() }}
{{ method_field('DELETE') }}
<button type="button" class="btn btn-sm btn-danger deletebutton"><i class="fa fa-trash"></i>
</button>
</form>
<script>
$(document).ready(function () {
$('.deletebutton').confirmation({
rootSelector: this,
container: 'body',
popout: true,
placement: 'top',
singleton: true,
onCancel: function () {
},
onConfirm: function (value) {
var myform = $(this).closest(".form_delete");
myform.submit();
}
});
});
</script>
Related
I have on my delete function a message for confirmation of delete when i put ok nothing is done
Function from controller
public function destroy($id)
{
$client =client::find($id);
$client->delete();
return redirect('client');
}
view client
<form action="{{url ('client/'.$client->id)}}" method="post">
{{csrf_field()}}
{{method_field('DELETE')}}
<a href="{{url('client/'.$client->id.'/show')}}"
class="btn btn-default btn-sm">Details</a>
<a href="{{url('client/'.$client->id.'/edit')}}"
class="btn btn-primary btn-sm">Editer</a>
<a class="btn btn-danger btn-sm" title="Delete"
href="javascript:if(confirm('Are you sure want to
delete?')) $('#frm_{{$client->id}}').submit()">
Supprimer
</a>
</form>
in your route file just change like this
Route::get('/client/{id}/delete', 'ClientController#destroy');
in your view
Delete
$('#frm_{{$client->id}}').submit() is a jQuery code, are you sure your page have jQuery properly loaded?
Better use plain javascript: document.getElementById("myForm").submit()
i think you forget to add id attribute for you form
<form action="{{url ('client/'.$client->id)}}" id="frm_{{$client->id}}" method="DELETE">
This can be done easily by:
<a onclick="if(confirm('Are you sure you want to delete this item?')){ deleteFunction() };">Delete</a>
i am having trouble selecting the correct button in my form. For example i have two items and i want to delete the one on the right and when i click to delete it always removes the one on the left;
I am shure the this keyword is not the correct one
Index.ejs
<% service.forEach(function (myService) { %>
<form method="post" action="/service/<%= myService._id %>?_method=DELETE" name="del_form">
<button type="submit" class="btn btn-danger btn-del" name="del_btn"></button>
</form>
script.js
let delServiceBtn = $('button[name=del_btn]');
let delServiceForm = $('form[name=del_form]');
delServiceBtn.on('click', function (e) {
e.preventDefault();
if(confirm('Confirm delete')){
delServiceForm.submit();
}
});
Add the click attribute to your <button> tag as,
<button type="submit" class="btn btn-danger btn-del" name="del_btn" onClick="delService(this);"></button>
And write a new javascript function delService as,
function delService(buttonObj) {
if(confirm('Confirm delete')){
var btn = document.getElementsByName(buttonObj.name);
btn.submit();
}
}
Hope this helps!
I need to call the controller deleteMember so to when the user clicks on a button, the member is deleted.
//deleting a member
Members.controller('deleteMember',['$scope','$http',function($scope, $http){
$scope.deleteMember = function(member){
$scope.deleteMember="";
console.log(member);
var deleteMember=confirm("Sure you want to delete?");
if(deleteMember){
$http.post('PHP/deleteMember.php',member).success(
function(data){
console.log(data);
if (data){
console.log("Deletion successful"); //delete worked
}else{
console.log("Deletion not successful"); //delete did not work
}
});
};
};
}]);
HTML code:
<div class="col-md-2">
<td><button type="button" class="btn btn-warning">Delete</button><td> <!--on button click, the member will be deleted-->
</div>
Is there a way that I can write the name of the controller using HTML?
Thanks for the help :)
You could add the ng-click attribute to the button:
<button type="button" ng-click="deleteMember(member)" class="btn btn-warning">Delete</button>
In this example I assume that the member variable that is passed to the deleteMember method is already in the scope of this button. This would be the case if this button is rendered inside an ng-repeat directive.
For example:
<tr ng-repeat="member in members">
...
<td>
<button type="button" ng-click="deleteMember(member)" class="btn btn-warning">
Delete
</button>
<td>
</tr>
Also you should probably not shooting yourself into the foot by replacing the deleteMember function with a string because the next time you want to call this method it simply won't work:
$scope.deleteMember = "";
You can simply just call the function deleteMember using ng-click and make sure you pass in the member you want to delete as an argument. You are passing a member in your function as an argument in the controller, so one must also be passed via the HTML. You haven't shown it in your code but I assume you are using ng-repeat to do this.
<div class="col-md-2">
<td><button type="button" class="btn btn-warning" ng-click="deleteMember(member)">Delete</button><td> <!--on button click, the member will be deleted-->
</div>
You mention calling the controller in the HTML. If you mean your page isn't initiated with the 'deleteMember' controller then you can wrap that block of code using ng-controller to give you access to the deleteMember.
<div class="col-md-2" ng-controller="deleteMember">
<td><button type="button" class="btn btn-warning" ng-click="deleteMember(member)">Delete</button><td> <!--on button click, the member will be deleted-->
</div>
First of all, I can imagine the subject of this question is not very clear, so sorry for that.
I am using a button with ng-click to display an input (ng-show) and two other buttons(send, cancel). For hiding the input again I use the "cancel" button. But I also would like to clear the value of the input. The problem is that I dont know how to invoke the clear function as well as the hiding the input again with the same button.
Here is my code:
<button class="btn-share" ng-click="showme = !showme" clickng-class="{true: 'hideBtn', false: 'btn btn-xs btn-danger'}[showme]">
show input.
</button>
<div class="form-group" ng-show="showme">
<input id="myInput2" class="typeahead" sf-typeahead type="text" datasets="userDataset" ng-model="searchUser" >
<button ng-click="showme=false" class="btn btn-xs">Cancel</button>
<button ng-click="send()" class="btn btn-success btn-xs btn-sent">Send</button>
</div>
$scope.showme = false;
Just update your code
<button class="btn-share" ng-click="showme = !showme" clickng-class="{true: 'hideBtn', false: 'btn btn-xs btn-danger'}[showme]">
with
<button class="btn-share" ng-click="searchUser='';showme = !showme" clickng-class="{true: 'hideBtn', false: 'btn btn-xs btn-danger'}[showme]">
I have added searchUser='' in ng-click. So, when user click on it, it will first update the searchUser to empty string in scope and then update showMe in scope.
If you do not want information after cancel, you can do the same thing with ng-click of cancel button.
Here is a plunker for you - http://plnkr.co/edit/X9wbGYsBoIXxR7QmE1zP?p=preview
If you add this line to your clear() function:
$scope.showme = false;
it will invoke the function and set the showme variable to false, thus hiding the div!
So your clear function could look like this:
$scope.clear = function() {
$scope.searchUser = "";
$scope.showme = false;
}
Is it possible to update a razor variable using onclick on a element?
MVC VIEW:
#{
string iconNumber = "1";
}
<button type="submit" onclick="#iconNumber = '2'; alert('#iconNumber');"></button>
Console error:
Uncaught ReferenceError: Invalid left-hand side in assignment
Thanks
I am not able to understand from your comments for what purpose you trying to update the razor variable, but if you really wants to update your razor variable from 1 to 2 (from your question), then i would suggest to try like below
#{
int iconNumber = 1;
}
then,
<button type="submit" onclick="#(iconNumber++); alert('#iconNumber');"></button>
Hope it helps...But also note that iconNumber will increment on each click of button. So, I can help you if you show some more code
When reading this question the day after, one would think I was under the influence of drugs.
I came up with a better solution that only uses javascript variables:
VIEW:
<script>var iconNumber = 0;</script>
#using (Ajax.BeginForm("", "",
new AjaxOptions
{
OnBegin = "$('#iconElement' + iconNumber).attr('class', 'fa fa-spinner fa-spin');",
HttpMethod = "POST"
}))
{
Html input here
<button type="submit" class="btn btn-danger" id="IconElement1" onclick="iconNumber = 1;">
<button type="submit" class="btn btn-danger" id="IconElement2" onclick="iconNumber = 2;">
<button type="submit" class="btn btn-danger" id="IconElement3" onclick="iconNumber = 3;">
}
I can now disable the form after submit to prevent multiple requests. Because I don't start the spinner directly in onclick I don't have to disable the buttons, (spinner wont start).