Here is my popover element:
<a data-placement="bottom" data-toggle="popover" data-trigger="focus" tabindex="1"></a>
My bootstrap popover content is a social media button. It shares something when you click on it. However, click event is not triggered properly. When I click share button which is available when popover is displayed, it fails one or two times out of 3 clicks.
var options = {};
options.content = function() {
return "<ul class='social social-list'>" +
"<li><a id='fa-facebook' class='social-fb'><i class='fa fa-facebook fa-lg'></i></a></li>" +
"</ul>";
};
options.trigger = 'focus';
options.html = true;
$('[data-toggle="popover"]').popover(options).on('shown.bs.popover', function(){
var fbShareEvent = $("#fa-facebook").data("events");
if(!fbShareEvent){
$("#fa-facebook").on("click",function(event){
fbShare();
});
}
}
After spending half day, I found solution. Since popover hide action triggered by focus event, sometimes popover is closed before click action is triggered. I added delay parameter to my popover options.
options.delay = {'hide': 500};
This parameter delays close action for a given amount of time. Thus, click action can be handled before the popover is closed.
Related
Issue: generated button isn't registered on click ~1/20 times.
I'm generating a button :
var thebutton = document.createElement("BUTTON");
thebutton.setAttribute("id", "mybutton");
thebutton.setAttribute("class", "mybuttonclass");
thebutton.setAttribute("onclick","function()");
thebutton.innerHTML = '<i class="icon info"></i>';
document.getElementById("row").appendChild(thebutton);
Which is appended on top an existing button element as a second z-index layer:
.mybuttonclass {
z-index:9999;
}
I am also using
focusMethod = function getFocus() {
document.getElementById("mybutton").focus();
}
focusMethod();
In order to shift the browser selection from the trigger of the generating code (also a button) to #mybutton which works as it is highlighted.
Still for some reason, arbitrarily, every few times the button is created, any clicks will not registered to the created button, and in order to fix it and be able to trigger it, i need to right click the page -- after which the button starts to work.
Is there any way to have the browser rescan the page for elements after I generate the button? Or is there some other issue causing this that I'm missing?
Seems to happen in chrome more often, bootstrap is also run on CSS for the page.
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>
I have some Bootstrap-Buttons, which should show a popover when the button is clicked.
usernameL.onclick = function(e){
$("#" + e.currentTarget.id).popover({html : true});
}
When the website has loaded and I click the button a first time, nothing happens. If I click a second time, the popover opens and it works normal.
What can I do for the popover to appear on the first click?
In your code, first time you click on button the popover start to init only, so until the second click, you see the effect,
I'm not sure about the version popover which you used. As the resource which I have found, they are using the jquery also.
https://github.com/klaas4/jQuery.popover/blob/master/demo.html
You can init the popover first, and then trigger click for it from any button which you want
First approach, bind popover directly into button
$(function(){
$("[name=usernameL]").popover({trigger: 'click'});
});
Second appoach, bind popover from a content div, and show popup from a button click
$("#divcontent").popover({trigger: 'click'});
$("[name=usernameL]").click(function(){$("#divcontent").trigger('click')});
What about this?
usernameL.onclick = function(e){
$("#" + e.currentTarget.id).popover({html : true}).popover('show');
}
try this
usernameL.onclick = function(e){
$("#" + e.currentTarget.id).popover({html : true});//Initializes popover
$("#" + e.currentTarget.id).popover('show');//show popover
}
try the jquery style,
i suppose the button is id usernameL
$('#usernameL').click(function(){
$(this).popover();
});
I have a Jquery Mobile listview with a delete button next to an link in each list item. When I click the delete button, the onclick event fires, the delete function runs but then the href is also followed, even though the button isn't nested within the href. I have added return false to the button to see if that would help but it doesn't! HELP!
Here's the code I'm using to dynamically populate my list....
$('#roomsList').append('<li><img src="img/delete-2x.png" class="delete" onClick="deleteRoom(\'' + currentRow.roomtype + '\',\'' + propertyID + '\'); return false;" />' + currentRow.roomtype + '</li>');
There shouldn't be any problems. Look at this example: http://jsfiddle.net/Gajotres/WEmNG/. I have created it two days ago for someone else but it is similar to your question. Instead of delete button I am showing custom checkbox on a listview. If you click a listview it will forward you to another page but if you click on the custom checkbox it will only activate event on chechbox.
Use my example to create a working delete button on a listview.
This is an example of event I am using on my custom checkbox:
$('.checkBoxLeft').bind('click', function(e) {
if($(this).find('input[type="checkbox"]').is(':checked')){
$(this).removeClass('checked').addClass('not-checked');
$(this).find('input[type="checkbox"]').attr('checked' , false);
} else {
$(this).removeClass('not-checked').addClass('checked');
$(this).find('input[type="checkbox"]').attr('checked' , true);
}
});
Append both the a and the li to the parent [ put them on the same level]. In this way they it should work easily.
I am developing my first firefox extension so I created a menu-button element and menu items.
Exactly like the FireBug button, I would like an event to be triggered when clicking on the main button, but also when clicking on a menu item. The problem is that when I click on the arrow next to the main button to display the menu items the main event is triggered. So my question is:
How do I differentiate the main button (the menu-button) and the arrow displaying the menu?
Here is my code generating the button:
function addToolbarButton() {
var document = mediator.getMostRecentWindow('navigator:browser').document;
var navBar = document.getElementById('nav-bar');
if (!navBar) {
return;
};
//main button
var btn = document.createElement('toolbarbutton');
btn.setAttribute('id', 'reportButton');
btn.setAttribute('type', 'menu-button');
btn.setAttribute('class', 'toolbarbutton-1');
btn.setAttribute('image', data.url('img/BookmarkKitchen.png'));
btn.setAttribute('orient', 'horizontal');
btn.setAttribute('label', 'Report');
btn.addEventListener('click', function() {
console.log("this=" + this.id);
event.stopPropagation();
}
, false);
//menu popup
var menupopup = document.createElement('menupopup');
menupopup.setAttribute('id', 'menupopup');
menupopup.addEventListener('click', function(event) {
console.log("this=" + this.id);
event.stopPropagation();
}
, false);
//menu items
var menuitem1 = document.createElement('menuitem');
menuitem1.setAttribute('id', 'menuitem1');
menuitem1.setAttribute('label', 'Test1');
menuitem1.setAttribute('class', 'menuitem-iconic');
menuitem1.addEventListener('click', function(event) {
console.log("this=" + this.id);
event.stopPropagation();
}
, false);
menupopup.appendChild(menuitem1);
btn.appendChild(menupopup);
navBar.appendChild(btn);
}
When I click on the main button, the console will write "this=reportButton". This is normal but when I click on the arrow next to the main button, the console will also write "this=reportButton". That means if I want to access the menu, the main event will be triggered. The only way I found to prevent this, is to press the button on the arrow, wait for the menu to show up and release it on a menu Item. This is not very user friendly and Firebug doesn't have this problem...
I hope I was clear enough. Thanks for answering this :)
Don't use the click event - in XUL it really means a mouse click. So if the user triggers a button by other means (e.g. keyboard), the click event will not be triggered. You should use the command event instead - and it has the additional advantage that it won't fire if the dropdown arrow is clicked.