I am new to Thymeleaf. Recently I stumbled in the following situation. Here is a piece of my Thymeleaf html page:
<!-- an delete button link -->
<a th:href="#{/employees/delete(employeeId=${tempEmployee.emplId},firstName=${tempEmployee.firstName},lastName=${tempEmployee.lastName})}"
class="btn btn-danger btn-sm py-1 "
th:onclick="if(!(confirm('Are you sure you want to delete this employee ?') )) return false" >
Delete
</a>
This code works fine as intended. However I want to add employee name as part of the confirmation. Here is the code:
<!-- an delete button link -->
<a th:href="#{/employees/delete(employeeId=${tempEmployee.emplId},firstName=${tempEmployee.firstName},lastName=${tempEmployee.lastName})}"
class="btn btn-danger btn-sm py-1 "
th:onclick="if(!(confirm('Are you sure you want to delete this employee ' + '\'+${tempEmployee.firstName}+\'' +'?' ) )) return false" >
Delete
</a>
Unfortunately the result is:
Are you sure you want to delete this employee
'+${tempEmployee.firstName}+'.
Looks like Thymeleaf does not recognize ${tempEmployee.firstName}. It has no problem with it in th:href tag but does not like it in th:onclick.
I would appreciate if somebody can turn me into the right direction.
Not sure exactly what the problem is (though it may be related to onclick vs th:onclick. Regardless, I think a format more like this will work (with some added benefits like no JavaScript injection).
<!-- an delete button link -->
<a
th:href="#{/employees/delete(employeeId=${tempEmployee.emplId},firstName=${tempEmployee.firstName},lastName=${tempEmployee.lastName})}"
class="btn btn-danger btn-sm py-1 "
th:data-confirm-delete="|Are you sure you want to delete this employee ${tempEmployee.firstName}?|"
onclick="if (!confirm(this.getAttribute('data-confirm-delete'))) return false"
>
Delete
</a>
(Notice I'm using onlick and not th:onclick.
Instead of this line in above code ---onclick="if (!confirm(this.getAttribute('data-confirm-delete'))) return false">
You can write as:
onclick="return confirm(this.getAttribute('data-confirm-delete'))"
Related
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>
I am using laravel queue to upload a csv file. And, I have used a column completed on the database table.
So, by default the value of this column will be 0 and as soon as the job is completed this column's value will be updated to 1 for that particular row.
Similarly, during uploading phase, this value will be 2 and if some error occured during upload or if some row can't be imported then the value will be 3
On front end, I have a simple button like:
#if($r->completed == 1)
<a class="btn btn-xs btn-primary d-inline-block" href="{{url('/?property='.$r->id)}}">Property</a>
#elseif($r->completed == 2)
<a class="btn btn-xs btn-warning d-inline-block" href="#">Pending</a>
#elseif($r->completed == 3)
<a class="btn btn-xs btn-secondary d-inline-block" href="{{route('property.create',$r->id)}}">Par. Completed</a>
#else
<a class="btn btn-xs btn-secondary d-inline-block" href="{{route('property.create',$r->id)}}">Property</a>
#endif
Yeah, its working totally fine. Here, we need to refresh to check the recent status. However, my requirement is to update the status without refreshing the page.
After some searching, I find that sending ajax request on certain interval might be an option. However, it don't seems ideal, so I don't want to go with that.
Is there any better option available? Currently, I am using jquery/javascript (not any js framework like vue,react).
I have some html code in my controller for datatable actions (View , Edit & Delete)
So im busy working on permissions on a blade level. but now i'm struggling to render the same permissions to the HTML code that's in my controller.
I'm using this syntax on my blades
#if(Auth::user()->can('Add New Client'))
<li>Add New Client</li>
#endif
And in my controller i have this code with renders action icons on my datatables
$nestedData['action'] = " <a href='{$show}' title='View more' class='btn btn-xs btn-primary'><i class='fa fa-eye'></i> View</a>
<a href='{$edit}' title='Edit details' class='btn btn-xs btn-success'><i class='fa fa-pencil'></i> Edit</a>";
So just like i did on the blade level i also want to have a permission on the datatable buttons (show & edit) to say
#if(Auth::user()->can('Edit Client'))
<a href='{$edit}' title='Edit details' class='btn btn-xs btn-success'><i class='fa fa-pencil'></i> Edit</a>"
#endif
But when i put this code on the HTML in controller the code gets displayed on the form. I'm pretty new to laravel so any help will be highly appreciated.
#if(Auth::user()->can('Edit Client'))
<a href='{$edit}' title='Edit details' class='btn btn-xs btn-success'><i class='fa fa- pencil'></i> Edit</a>"#endif
I am not sure why you are using this code in conttroller. please use a template and add this code on it.
in the controller you don't need to use #
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
I have a button in a directive that I only want to appear on the last object in the array. The ng-show evaluates an expression on the controller.
<button class="btn btn-danger button-xs tsid-btn-sch-pad
glyphicon glyphicon-remove"
type="submit" ng-click=""
ng-show="{{$index == sc.schedule.length - 1}}"></button>
The expression is being correctly evaluated in the browser, but the button is displaying anyway.
So the difference between the highlighted row and the one above where the delete button is not displaying is that ng-hide was added to the class attribute of the row above and it has not been added to the row that is displaying the delete button incorrectly. But I don't know why that update isn't taking place since the ng-show expression is being updated.
Try using the $last variable
<button class="btn btn-danger button-xs tsid-btn-sch-pad
glyphicon glyphicon-remove"
type="submit" ng-click=""
ng-show="$last"></button>
http://plnkr.co/edit/Sf6Xw7YjPlfUuqyHIWng?p=preview