I have an app that will have several popovers that uses the html of a hidden DIV. This content may contain a button or buttons that will possibly do something in the app and close the popover, or just close the popover ("Cancel"). Like this:
What I'm looking for is a generic, extensible solution that I can apply to the button(s) to simply close the popover that contains them.
I don't want to wire this with anything specific to a particular button and/or popover.
I tried this and it does not work:
<button class="btn btn-link btn-xs" data-toggle="popover">Cancel</button>
Here you go this also works for tablet to tap outside the popover to hide it.
//HIDES POPOVER ON TABLET WHEN CLICK OUTSIDE
$('html').on('mouseup', function(e) {
if(!$(e.target).closest('.popover').length) {
$('.popover').each(function(){
$(this.previousSibling).popover('hide');
});
}
});
Related
I am using bootstrap collapse .In the collapse 1 section i have button "save". When the button is clicked the second Collapse should open. The first try is triggering properly after that its opening and closing the collapse in random manner.
Here is the js fiddle "https://jsfiddle.net/raghulramkish/z40wtdva/"
$("#collapseOne").collapse('toggle');
$("#collapseTwo").collapse('toggle');
If one collapse is already open, then the remaining collapses should all be closed.
You need to use hide on the collapse that are not open
$(".collapse").on('show.bs.collapse', function(){
$(".collapse").not(this).collapse('hide');
});
demo
When a form submitted the modal box appears. This box contains a text with a link. Click on this link should close this box and toggle dropdown (auth form). The problem is that I can't handle toggling the dropdown by clicking this link.
Here is the code of click-handler of this link
$(function() {
$('#open_auth_form').click(function(e) {
e.preventDefault();
$('#participate_modal').modal('hide');
$('#auth_link').dropdown('toggle');
});
});
Why doesn't it work? I tried also to move dropdown toggling inside the 'hide.bs.modal', tried .trigger('click'). Nothing helped. But simple running
$('#auth_link').dropdown('toggle');
from console works well.
Check out this stack overflow question on How to open Bootstrap dropdown programmatically. There are a number of solutions you can try such as:
Triggering the click.bs.dropdown event:
$('#dropdown').trigger('click.bs.dropdown');
Or manually adding/removing the classes:
$('.dropdown').addClass('open'); // Opens the dropdown
$('.dropdown').removeClass('open'); // Closes it
In my case it was enough to add
e.stopPropagation();
Been working for about 2 weeks to get a CRUD system working with knockout and it's slowly coming along. I keep hitting issues everytime I try to add buttons.
Currently my biggest issue at the moment is that my add button which is suppose to clear all values from my news and give me a blank form to fill in. Currently I have it loaded in a modal form using bootstrap. On my site the screen fades as if it's about to show you the modal DIV but nothing happens.
http://jsfiddle.net/rqwku4kb/3/
self.AddNewIncident = function() {
var id = this.ID;
$('#myModal').modal('show')
self.currentIncident(null);
;
};
Would anyone have any ideas?
Use Knockout to control your modal, just like everything else. If you're reaching around the viewmodel to fiddle with the DOM, things will go wrong.
Twitter bootstrap 3 Modal with knockout
Modals will close when the background is clicked so you need to suppress that using one of two ways. Either prevent the closing of the modal due to a background click using bootstrap attributes as below:
Via javascript :
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
HTML:
<div id="myModal" class="modal fade" role="dialog" data-bind="with: currentIncident" data-backdrop="static" data-keyboard="false">
Or alternatively suppress the background click event. When you click on the new button the click event fires for the button and then bubbles / propagates up through the DOM thus triggering a background click which in turn closes the dialog again.
So either suppress propagation in the handler:
self.AddNewIncident = function(data, ev) {
var id = this.ID;
$('#myModal').modal('show');
self.currentIncident(null);
ev.stopPropagation();
};
or in the click binding such that knockout will do this for you:
<button type="button" class="btn btn-success" value='Edit' data-toggle="modal" data-target="#myModal" data-bind="click: AddNewIncident, clickBubble: false">New</button>
Bootstrap 3 modals are hidden by default. To launch them I have to click a trigger button:
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
JSFiddle
I have tried the following but it has no effect:
jQuery(window).load(function(){
jQuery('#myModal').modal('show');
});
How can I ensure my modal is always displayed on screen? i.e. I don't want the user to have to manually display it by clicking on the trigger button. I don't want them to be able to close it either. I'd like it to remain open at all times.
Everything you asked is perfectly described in the docs.
Displayed on screen
Shows the modal when initialized.
$("#my-modal").modal({ show : true });
I don't want them to be able to close it either
Closes the modal when escape key is pressed
And
Includes a modal-backdrop element. Alternatively, specify static for a
backdrop which doesn't close the modal on click.
$("#my-modal").modal({
backdrop : "static",
keyboard: false
});
Here is the updated fiddle where users can't close the model but you need to remove the html elements for close buttons cuz thats very evil for your users :P
jQuery(window).load(function(){
jQuery('#myModal').modal('show').on('hide.bs.modal', function(e){
e.preventDefault();
});
});
http://jsfiddle.net/95Vf7/2/
This SAPUI5 application that I am developing uses a Panel control that has some buttons on it. Now I have to hide those buttons whenever a user collapses the panel and show them back upon expanding. I tried using the getCollapsed() method but to no effect. What I am basically looking for is a collapse event for the panel which is not available by default.
Any helping hand out there?
Thanks.
Hmmm, seems like there are no event handlers for the Panel control indeed...
As a workaround, you could add your own expand/collapse toggle button in the panel tray, and upon clicking that button you could grab the getCollapsed() state and show/hide your other buttons accordingly
You could use the sap.m.Panel https://openui5.hana.ondemand.com/docs/api/symbols/sap.m.Panel.html#event:expand
which has an expanded property and you can just use
setExpanded(true) ;
to expand the panel and let the control retain its state without you having to track it.
I am sure this has all changed since you asked the question and this answer is related to 1.24.2
Perhaps the only solution here is to replace the default collapse icon with a button of your own and attach the press event to it. Like:
1. Declare a `Panel` with `showCollapseIcon` set to false.
var oPanel = new sap.ui.commons.Panel({
showCollapseIcon: false
});
2. Add your own button. I prefer a `lite` button.
var oCollapseButton = new sap.ui.commons.Button({
icon: '<your icon>',
lite: true,
press: function (e) {
if (!oPanel.getCollapsed()) {
//If not collapsed
oPanel.setCollapsed(true);
//Code to hide panel buttons
//(and toggle collapse button image if needed) after this
} else {
//If already collapsed
oPanel.setCollapsed(false);
//Code to show panel buttons
//(and toggle collapse button image if needed) after this
}
}
});
oPanel.addButton(oCollapseButton);
P.S: You might also want to add some styling and alignment to your custom collapse button. For that, you can add a CSS3 class to your button before adding it to the panel like:
oCollapseButton.addStyleClass('<your class>');