Used solutions from other answers to hide Bootstrap popover on outside click.
However it then requires two clicks to open the popover again (if I closed it by clicking outside).
It works alright and opens on first click when I use the button to close it.
Here is problem recreated: http://codepen.io/olegovk/pen/BjQmQe
The html used:
<!-- Popup button -->
<a id="menu-button" class="menu-button" data-html="true" role="button" data-container="body" data-toggle="popover" data-placement="bottom">Menu</a>
<!-- Popup content -->
<div id="menu-content">
<h1>Hello</h1>
<p>Good bye</p>
Link
</div>
And the jQuery:
$('#menu-button').popover({
content: $('#menu-content').html(),
html: true
});
$('html').on('click', function(e) {
if (typeof $(e.target).data('original-title') == 'undefined' &&
!$(e.target).parents().is('.popover.in')) {
$('[data-original-title]').popover('hide');
}
});
Any ideas why it happens and how to make popup always open on first click?
One note: I find it impossible to use this "official" solution because it makes it impossible to click on links inside popup: http://getbootstrap.com/javascript/#dismiss-on-next-click
You don't need extra Js to close the popover, as the documentation says docs
Dismiss on next click
Use the focus trigger to dismiss popovers on the next click that the user makes.
<a tabindex="0"
class="btn btn-lg btn-danger"
role="button" data-toggle="popover"
data-trigger="focus" title="Dismissible popover"
data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover
</a>
data-trigger="focus" close the popover on the next click of the users.
In many cases (mostly the rest of the code in your document) once you leave the popover, you have to regain focus on it. This event is not easily binding the click event to the html or body. Buttons tend to regain the focus much better than hyperlinks. (This is my theory, I'd question it, but it's what I've read here and there) The point is, this code works lol that's the important thing, isn't it?
I suggest you change the hyperlink to a button and style it to make it look as a hyperlink if you need to and use the code in the jFiddle provided here
$('[data-toggle="popover"]').popover();
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 &&
$('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
Here is working jfiddle
Related
My goal is to replace a button with another button, but I am running into some issues. I am able to trigger the first button click and I am able to cause an alert with the second button click, but for some reason when I try to trigger the first button click in the click event handler of the second button, it doesn't work. What am I doing wrong? For some context, I'm doing this in Powerapps Portals by adding a Content Snippet.
$(window).load(function() {
//Code to Add Custom 'Register' Button (and Hide the original one- currently commented out)
$('#SubmitButton').after('<input type="submit" name="ctl00$ctl00$ContentContainer$MainContent$MainContent$mySubmitButton" value="Register" id="mySubmitButton" class="btn btn-primary">');
//$('#SubmitButton').hide(); *THIS WORKS*
//$("#SubmitButton").click(); *THIS ALSO WORKS*
$("#mySubmitButton").click(function()
{
//window.alert('yes!'); *THIS WORKS*
$("#SubmitButton").click(); // *THIS DOES NOT WORK*
});
});
You need to prevent the default action to stop the form from submitting when the button is clicked.
$("#mySubmitButton").click(function(e){
e.preventDefault();
$("#SubmitButton").click();
});
Alternatively, you can set the button's type to "button" so clicking it does not submit the form by default.
$('#SubmitButton').after('<input type="button" name="ctl00$ctl00$ContentContainer$MainContent$MainContent$mySubmitButton" value="Register" id="mySubmitButton" class="btn btn-primary">');
I have the following code in my HTML/CSS/Div table, and the href works without issue. Is it possible to replace the href code such that when this image is clicked, instead of opening the URL, a button click is activated?
Working Code
<a class="test-link" href="https://www.example.com" target="_blank" rel="noopener">
<img class="testgrey" src="./grey.svg" />
<img class="test-white" src="./white.svg" />
</a>
Desired Outcome from clicking on the image defined above:
this button gets activated without actually placing the button on the html page:
<a class="button button--small card-figcaption-button quickview" tabindex="0" data-product-id="113">Buy</a>
You can add a click handler to your anchor that delegates a click event to the button.
// Delagate the link click to the button click
document.querySelector('#my-link').addEventListener('click', e =>
document.querySelector('#my-button').click());
// Handle button clicks
document.querySelector('#my-button').addEventListener('click', e =>
console.log('button click...'));
<a id="my-link" href="#">Click Me</a><br><br>
<button id="my-button">I will be clicked programatically</button>
You can attach an event listener directly to the <a> element and call the button handler;
document.querySelector('.test-link').addEventListener('click', function(event){
//prevent navigation
event.preventDefault();
event.stopPropagation();
// call your button handler directly
callButtonEventHandler();
return false;
});
You can't trigger a button click without a button on the page.
You can only call it's handler if it's available in javascript.
I have a link which calls an action on click like below. I haven't populated the href because I want this handled in the action and I don't want to trigger a page reload.
HBS
<a class="cursor-pointer" {{on "click" (fn this.goToPage this.nextPageNumber)}}>Next</a>
JS
#action
goToPage(pageName) {
this.args.pageUpdated('page', pageName.toString());
// scroll to top of search results
document.querySelector('.search-summary-title').scrollIntoView();
}
Is there a way to direct the user to the right page if they right-click and choose "open in new tab"?
what you should do is set the href:
<a href={{this.nextPageNumber}} {{on "click" (fn this.goToPage this.nextPageNumber)}}>Next</a>
and then prevent the default action in your click handler:
#action
goToPage(pageName, event) {
event.preventDefault();
this.args.pageUpdated('page', pageName.toString());
// scroll to top of search results
document.querySelector('.search-summary-title').scrollIntoView();
}
this is also much better for accessibility!
Upon further research I don't think this is possible to do within an action but I have a workaround if anyone is interested.
I don't want the href to interfere with my action so I don't want to populate it until I need it. So I've modified my template below, you'll see I've added another action which runs oncontextmenu. For those who don't know this event happens when the right click menu pops up.
HBS
<a href="#/" {{on "contextmenu" (fn this.setHref this.nextPageNumber)}}
{{on "click" (fn this.goToPage this.nextPageNumber)}}>Next</a>
What I do now in the setHref action is just populate the href. Now when the user chooses New Window or New Tab it will go to the right place.
JS
#action
setHref(pageName, event) {
event.target.setAttribute('href', `${window.location.pathname}?page=${pageName}`);
}
I have a Side Filter, where a User can fill out some information and filter a Webpage.
I want this menu to appear when clicking a button and disappear when I click outside of it. This is what I currently have to make the Filter disappear once the user clicks outside of it:
$(window).click(function(e) {
if ((!$(e.target).hasClass("filterOverlay")) && (!$(e.target).hasClass("toggleFilterButton"))) {
$('.filterOverlay').hide();
$('.darkBackground').hide();
}
});
This works. However only if the Filter is empty. Because the fun thing is, when I add an Input-Field and click it. Of course Jquery doesn't recognize it as being the Filter and closes it.
What's the best way to go with such a thing? All I find is the solution above, but as pointed out, this doesn't really fit.
Use jQuery blur() Method for when clicking outside of an input.
The blur event occurs when an element loses focus.
CSS
.filter-div {
display: none;
}
HTML
<button type="button" class="btn btn-primary" id="toggleFilter">Filter</button>
<div class="filter-div">
<input type="text" class="form-control" id="filter" placeholder="Filter">
</div>
JS
$('#toggleFilter').on('click', function() {
$('.filter-div').slideToggle();
if ($('.filter-div').css('display') != 'none') {
$('#filter').focus();
}
});
$('#filter').on('blur', function() {
$('.filter-div').slideToggle();
});
Check it out:
JsFiddle
I'm trying use React events to access a custom 'value' assigned to a button, but I get different results depending on where I click on the button. I can probably use getDOMNode() or this.state to get the desired result but I'm little confused on how to use 'React Events' and it's behavior.
Is it best to use synthetic events on a single element like <input>? Is there a way to get the value of a button using react events?
Note: I'm using bootstrap glyphicon inside the <button> element.
var Content = React.createClass({
handleClick: function(e) {
console.log( e.target );
},
render: function() {
return (
<div>
<button type="button" value="button1" className="btn btn-default" onClick={this.handleClick}><span className="glyphicon glyphicon-ok"></span> Submit</button>
</div>
)
}
});
Jsfiddle
console.log( e.target ) results:
Move the mouse over the glyphicon 'check mark', and click.
<span class="glyphicon glyphicon-ok" data-reactid=".0.0.0"></span>
Move the mouse over the word 'Submit' and click
<span data-reactid=".0.0.1"> Submit</span>
Move the mouse anywhere else inside the button, and click
<button type="button" value="button1" class="btn btn-default" data-reactid=".0.0"><span class="glyphicon glyphicon-ok" data-reactid=".0.0.0"></span><span data-reactid=".0.0.1"> Submit</span></button>
I'm new to synthetic events and DOM behaviors as you guys can tell. Any guidance would be greatly appreciated! Thanks.
I think you want e.currentTarget.getAttribute('value')
Using currentTarget will get the button since the event will bubble up to the button. You are getting the span element since you're likely clicking the span. That's what the value of target is.
Also here is the updated fiddle: http://jsfiddle.net/v27bqL5y/1/
Another way to do this is to use refs. If you want to stay away from using stuff like e.currentTarget, this can be a simpler way to go.
See the fiddle: http://jsfiddle.net/v27bqL5y/2/