I'm building my first laravel project and I'm trying to make a confirmation window for my "Delete" button. The thing is that confirmation window shows up, but whether I press "confirm" or "cancel" it would delete data anyway. Can you help me out?
Here is my code:
<a id="demo" href="{{route('viewfile2.delete2', $down->id)}}?{{time()}}">
<button type="submit" class="btn btn-primary" style="background-color:red;"onclick="myFunction()">
Delete
</button>
</a>
<script>
function myFunction(){
return confirm('Are you sure?');
}
</script>
To prevent your form submitting data, replace type="submit" by type="button" and replace your JavaScript code by testing the return value of the confirm call, if it's true then submit your form programmatically.
For testing purposes I made this:
<form id="deleteFormId" action="http://yourwebsite.kom/doDelete/4598765">
<button type="button" onclick='myFunction()'>Delete</button>
</form>
</body>
</html>
<script>
function myFunc(){
if (window.confirm("Are You Sure ?")) {
document.querySelector('#deleteFormId').submit();
}
}
</script>
See the Codepen example and Document.querySelector() documentation.
This is as much as simple
<a href="{{route('viewfile2.delete2', $down->id)}}?{{time()">
<i class="far fa-trash-alt trash_color" onclick="return confirm('If you delete {{$down->id}} it will be permanently deleted\nAre you sure?')"></i>.
</a>
Related
When I press remove, it removes the last charity in the database that belongs to the current user.
View (Button that deletes):
<a href="#"> <button class="btn btn-danger pull-right btnPopover" data-
toggle="popover" data-placement="top"> Remove </button> </a>
View (JS that is called):
function ConfirmDelete()
{
true;
}
$(document).ready(function()
{
$('.btnPopover').popover(
{
html: 'true',
title: '<strong> Are you sure you want to Remove? </strong>',
content: '<form style="display: inline;" action="{{
URL::to('remove', array($favourite->id)) }} "> <button class = "btn
btn-success glyphicon glyphicon-ok" onclick="return
ConfirmDelete()"> Yes </button> </form> <button class = "btn btn-
danger glyphicon glyphicon-remove"> No </button> '
});
$('.btnPopover').on('click', function (e)
{
$('.btnPopover').not(this).popover('hide');
});
Route:
Route::get('remove/{id}', 'HomeController#removeFavourite');
Controller (removeFavourite function):
public function removeFavourite($id)
{
Favourites::where('id', $id)->delete();
Session::flash('flash_message', 'Removed successfully!');
return back();
}
The strange thing is, is that I am using the exact same function and JS call in another part of the application and it is working fine!
The problem is, that it deletes the last record belonging to that user in the database.
Thanks
I don't know exactly what your code looks like, but the problem is that your JS is only valid for the last iteration of the loop, which sounds like what you're experiencing.
To fix it, you can move the form inside the popover button so that you can get the correct form link:
Example (moving the form):
<button class="btn btn-danger pull-right btnPopover" data-toggle="popover" data-placement="top" data-content='<form style="display: inline;" action="{{ URL::to('remove', array($favourite->id)) }} "> <button class = "btn btn-success glyphicon glyphicon-ok" onclick="return ConfirmDelete()"> Yes </button> </form> <button class = "btn btn-danger glyphicon glyphicon-remove"> No </button> '> Remove </button>
JS:
$(document).ready(function()
{
$('.btnPopover').popover(
{
html: 'true',
title: '<strong> Are you sure you want to Remove? </strong>',
});
$('.btnPopover').on('click', function (e)
{
$('.btnPopover').not(this).popover('hide');
});
....
This could be a little cleaner if you could access the parent button from the popover, but I couldn't find a way to do that in the API.
Check whether the $id you retrieve in your program(I assume there is some code missing in the question which finds the $id) is the one you want to delete.
Level official documentation says to use following code for deleting models:
$flight = App\Flight::find(1);
$flight->delete();
Find retrieves single model, and where returns a collection, so that might be the issue.
Also make sure that you pass the specific $id of the favourite that needs to be deleted, if not you'll always be deleting the last $id in your loop.
Official Docs
When i press the reset form button, the appended information appears briefly, before being replaced by the search results. Onchange and onclick events are bound to the the form HTML tags.
<script>
function resetform(){
setTimeout(function(){
$('#appendresults2').empty();
$('#appendresults2').append('<div class="noresults"><h1>Please enter your query</h1></div>');
}, 50);
return;
}
</script>
<div id="appendresults2"><div class="noresults"></div></div>
<button class="btn btn-default" type="reset" onclick="return resetform();">Reset</button>
try like this..
HTML
<div id="appendresults2"><div class="noresults"></div></div>
<button class="btn btn-default" type="reset" onclick="resetform()" id="reset" >Reset</button>
Jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#reset").click(function(){
setTimeout(function(){
$('#appendresults2').empty();
$('#appendresults2').append('<div class="noresults"><h1>Please enter your query</h1></div>');
}, 50);
});
});
</script>
See fiddle here....http://www.w3schools.com/code/tryit.asp?filename=FBGUL834B4MW
I have a problem regarding the bootstrap tooltip on ajax loaded content.
I know there are other answers but it doesn't seem to work for me and i tried alot of methods.
First i am initializing the bootstrap tooltip using this code:
$(document).on('ready', this, function(e){
$("[rel='tooltip']").tooltip();
});
Which works great on normal content but not on ajax.
Secondly i have found here that i need to add a selector so i added a class to the ajax loaded content in this form:
<button data-toggle="modal" rel='tooltip' data-placement="top" data-original-title="View Supplier Details" data-target="#view-supplier" type="button" class="btn btn-success view-supplier btn-xs margin-left-5 tooltip-aj">
And modified the call of the tooltip to the following:
$(document).on('ready', this, function(e){
$("[rel='tooltip']").tooltip({
selector:'tooltip-aj'
});
});
But still can't get it to work. Can somebody please help me.
Regards!
Ok i found an answer just after i posted the question:
Here it is, as it is a bit frustrating sometime:
$('body').tooltip({
selector: '[rel=tooltip]'
});
Just add this DEMO
<button data-toggle="modal" rel='tooltip' data-placement="right" data-original-title="View Supplier Details" data-target="#view-supplier" type="button" class="btn btn-success view-supplier btn-xs margin-left-5 tooltip-aj">
$('body').tooltip({
selector: '[rel=tooltip]'
});
Thanks to Mystic Jay
I'm trying to add bootstrap modals in my ember app. I'd like to be able to add modals, with a specified template and be able to handle actions. I can't get it works. The modal appears, my controller's properties are bound, but i can't handle actions. I don't understand why. I'd really like to be able to trigger modal from anywhere in my controllers and bind actions on them.
My view looks like this:
App.ModalView = Ember.View.extend({
classNames: ['modal fade'],
attributeBindings: ['role'],
role: 'dialog',
didInsertElement: function() {
this._super();
this.$().modal();
this.$().on('hidden.bs.modal', this.close.bind(this));
},
close: function(event) {
return this.destroy();
}
});
And i instanciate it like this in a random controller:
var modal = controller.container.lookup('view:modal');
modal.reopen({
controller: this,
targetObject: this,
templateName: 'mymodal'
});
return modal.appendTo('body');
My template looks like this:
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">My Modal Title</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
My modal content
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn default">Close</button>
<button type="button" class="btn green" {{ action "myaction"}}>My Button with an action</button>
</div>
</div>
</div>
If i try to display some controller properties, it works. But when i click on the button with the "myaction" action nothing happends. Maybe i'm completely wrong about the way to handle modals in my app (i'm pretty new in the Ember's World).
I'm using the last release of ember (1.1.1) and bootstrap 3.
Thanks,
Vinc
I figured it out. In fact, my app was running into a specific dom element (#app). As i was adding the view to the body, my modale was added "outside" my app ! So, the events bubbling chain was broken. Instead of adding my view to the body, i add it to my application root element and now everything works as expected !
There's a good chance that the modal method is disconnecting it from the body, which would break your actions.
See also: Ember.js and Foundation 4 modal window
You shouldn't access view like this
var modal = controller.container.lookup('view:modal');
See Wycats comment here.
Alternatively, This answer may help you in instantiating modals
I found this voting script online and was wondering instead of a onclick alert(You already voted) can i change it to a popup message that i can style with css... i have only submitted a part of the code if you need to see more let me know. thanks in advance
function addVotData(elm_id, vote, nvotes, renot) {
// exists elm_id stored in ivotings
if(ivotings[elm_id]) {
// sets to add "onclick" for vote up (plus), if renot is 0
var clik_up = (renot == 0) ? ' onclick="addVote(this, 1)"' : ' onclick="<a type="button" class="btn" style="width:100%;" href="#test_modal" data-toggle="modal">alert</a>"';
// if vot_plus, add code with <img> 'votplus', else, if vot_updown1/2, add code with <img> 'votup', 'votdown'
if(ivotings[elm_id].className == 'vot_plus') { // simple vote
ivotings[elm_id].innerHTML = '<h6>'+ vote+ '</h6><span><img src="'+votingfiles+'arrow.png" alt="1" title="vote"'+ clik_up+ '/></span>';
};
}
}
You can use Bootstrap modal pop up instead of alert.
This is well explained example
If you need more help let me know
Update
html for model pop up:
<div class="modal fade" id="test_modal"> <div class="modal-header">
<a class="close" data-dismiss="modal">×</a> <h3>Modal Header</h3> </div>
<div class="modal-body"> <p>Test Alert</p> </div> <div class="modal-footer">
Close </div> </div>
Html for Button
<input type="Button" Text="ShowModal" Id="MyButton"/>
javaScript:
$( "#MyButton" ).click(function() {
$('#modalName').modal('show');
});