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
Related
i am trying to click on the icon trash
<div class="form-body">
<div class="infos">
<div class="recap">
<div class="form-actions ">
<a class="btn btn-light btn-icon btn-icon-light" title="download" href=""
target="_blank" rel="noreferrer noopener" download="my_file">
<i class="icon-download"></i>
</a>
<button type="button" class="btn btn-light btn-icon btn-icon-light" title="delete">
<i class="icon-trash">
i have tried
cy.get('i.icon-trash').click()
cy.get(.form-actions .icon-trash').click()
Whatever i am trying i am getting the error:
The element <i.icon-trash> is not visible because its ancestor has position: fixed CSS property and it is overflowed by other elements. How about scrolling to the element with cy.scrollIntoView()?
Fix this problem, or use {force: true} to disable error checking.
scrollIntoView() also is not working.
Does anyone know why this error is happening please?
Thank you
screenshot of the html part above
The button parent of the icon has the click handler, try clicking that
cy.get('i.icon-trash')
.parent()
.scrollIntoView()
.should('be.visible') // for good measure, may not require
.click()
but I suspect the problem still persists.
Also try realClick()
cy.get('i.icon-trash')
.parent()
.scrollIntoView()
.should('be.visible')
.realClick({ position: "topLeft" }) // try various click positions
You can also try setting a larger viewport at the top of the test.
Other than that try working the CSS - but this is a bit of a hack.
Arguably it's ok because you are testing the click logic not the visibility of the icon (also true for .click({force:true})).
Identify the element with position: fixed for example if it's div.form-actions
cy.get('div.form-actions')
.then($formActions => {
$formActions.css({ position: 'relative' })
})
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>
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 the jquery datepicker plugin bound to any elements with class="datepicker".
$(".datepicker").datepicker();
I am loading a form with:
<button type="button" class="btn btn-xs pull-right" data-toggle="modal" data-target="##modal" href="profile/eventnew"><i class="icon-plus"></i></button>
In the form that is loading I have a field with class='datepicker', however it is not getting picked up by the datepicker plugin as the element was not there when $(".datepicker").datepicker(); was executed.
I know that with events, I can use the jquery .on() method to bind to ajax loaded elements, but there is no event here.
How do I bind something such as $(".datepicker").datepicker(); to Ajax loaded elements?
Many Thanks
try:
$('#myModal').on('shown.bs.modal', function () {
$(".datepicker").datepicker();
})
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