Bootstrap custom popover doesn't appear on first click - javascript

Actually i'm tying to show a custom popover after the user press on an anchor then he can choose an item and i'd do some server operations after it.
The issue is that after i press the first time on the anchor nothing happen but if i press again the pooper will be shown.
Then i would hide the popover if the user press on the background.
Here is the function which i hire from the anchor
<script>
function pop(id) {
$("#" + id).popover({
html: true,
content: function () {
return $('#popover-content').html();
}
});
}
</script>
While here is the code of the popover that i'm trying to show
<li id="popover-content" class="list-group" style="display: none">
CHIUSO
RISOLTO
IN ATTESA
SCADUTO
</li>

Have you tried this jQuery script?
$(function() {
$('[data-toggle="popover"]').popover()
})
As shown here.
Tell us if it works.

The $().popover({...}) method registers the popover but does not show it yet. So the first exectuion of your pop(id) function will just register the popover on the element.
When you want to show the popover on click you have to also programmatically show it after you register it so your function should look like this.
function pop(id) {
// register the popover
$("#" + id).popover({
html: true,
content: function () {
return $('#popover-content').html();
}
});
// show the popover
$("#" + id).popover('show');
}

Related

Multiple bootstrap popovers on page but only the first one that's clicked works as desired

I have multiple popovers which are placed in different cells of a jquery datatable.
//popover needs to be triggered onclick on this i element
<i tabIndex ="0" class="fa fa-info-circle popoverIcon" aria-hidden="true" data-placement="bottom" data-toggle="popover" ></i>
//this is hidden by css
<div class="popover-content hidden"><div>Popover text</div></div>
Popover initialization:
$('#MyDataTable').on('mouseenter', '.popoverIcon', function (event) {
$(this).popover({
html: true,
content: function () {
return $(this).next().html();
},
title: "Comment",
trigger: "manual"
});
});
I want the popover to have all trigger: "click" functionality, but be dismissable by clicking OUTSIDE the popover element area (popover area = the popover box itself or the mentioned i element). I have applied a solution I found here How to dismiss a Twitter Bootstrap popover by clicking outside?
It looks like that. The function to SHOW popover:
$('#MyDataTable').on('click', '.popoverIcon', function (event) {
//if popover closed - open it
if (!popoverOpen) {
$(this).popover('toggle');
popoverOpen = true;
}
});
The function to HIDE popover:
$(document).on('click', function (e) {
if (popoverOpen && !mouseOnPopoverArea) {
$('[data-toggle="popover"]').each(function () {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
popoverOpen = false;
}
});
The strange thing is, it works perfectly, but ONLY with the very first popover I open. When I try to open the second, third, fourth (...) one, nothing is happenning. When I go back to the first one I clicked, it works again. What could be the matter?
$('#MyDataTable').on('click', '.popoverIcon', function (event) {
//if popover closed - open it
if (!popoverOpen) {
$(this).popover('toggle');
popoverOpen = true;
}
});
in this you are calling on click event on only one id so try to assign different ids and on click events on them accordingly
Try to access the pop over by first targeting it's parent element using parent() through $this and then finding the pop over element in it using find()

Onclick function doesnt work more than twice

I have a button that opens up the relevant accordion tab (TAB 2), when I first click the button it opens tab2, if I go back and click it a second time it works (goes to TAB2) BUT if i click it a third time nothing happens:
My button:
<a onclick="changeTab2();">
My function:
<script>
var tabHeight = $('.tab.active').height();
function animateTabHeight() {
tabHeight = $('.tab.active').height();
$('.tabs-content').stop().css({
height: '100' + '%'
});
}
function changeTab2() {
var getTabId = $('.tabs-header .active a').attr('tab-id');
$('.tab').stop().fadeOut(300, function () {
$(this).removeClass('active');
}).hide();
$('.tab[tab-id=' + 2 + ']').stop().fadeIn(300, function () {
$(this).addClass('active');
animateTabHeight();
});
}
</script>
No idea to why it stops working.
Click event is binding only in the page load. That is why it is working in the first place. Try to dynamically bind click function each time the tab is opened.
Set id to a and bind click event.
<a class="t1" id="subDiv1"></a>
$('#subDiv1').unbind("click");
$('#subDiv1').bind("click",function(){
// place your code here
});
Now call this inside the #tab-1 click function.

How to open one dialog- box from multiple buttons on the same html page

Div with class ="front" is clone more than once on a html page ,button nested (class=poperbtn) clone as well, the button use is to open dialog-box/pop up (class="poper"), for example : if I have 4 divs -> class=front which means 4 buttons -> class="poperbtn", everytime I click on one of these buttons the dialog-box must pop-up, how to do this? is it possible? here is a code example.
//Dialog - box open button
<div class="front">
<input type="button" class="poperbtn" value="push it!" /> </div>
// Div for Dialog box
<div id="poper"> <h1>here I am </h1></div>
//To avoid using id I select button (id=poperbtn) this way - works fine I got id="poperbtn" button .
var _btnToDialog = "";
$(".front").live("click", function () {
_btnToDialog = $(this).next().children().eq(0);
});
//Dialog box Jquery function - I am not sure about this code.. got stuck here..
$(function () {
$("#poper").dialog({
autoOpen: false,
width: 650,
height: 600,
});
$(_btnToDialog).click(function () {
$("#poper").dialog("open");
});
});
});
**According to comments,I changed the button - has no Id only class.
You can hang click handler for all input inside .front elements.
Due to dynamically created elements it should be, for example
$(document).on("click", "selector", function() {})
instead of
$("selector").click(function() {})
So finally code will look like:
$(document).on("click", ".front input", function() {
$("#poper").dialog("open");
});
You can add class (for example, .button) for required inputs. Then code can be simplified to:
$(document).on("click", ".button", function() {
$("#poper").dialog("open");
});
Update. With inputs class .poperbtn it will be
$(document).on("click", ".poperbtn", function() {
$("#poper").dialog("open");
});
You can also have a look at this JSBin solution. There are many ways you can approach this problem it depends on what the desired behavior is you want to provide and the way you have already things in your codebase.

Display box on an input through clicking on img

I want that if i click on the image, then the box display in the input field using $('.daterangepicker').show();.
On onclick:
onclick="OpenDatePicker('DateAge')
Markup:
<span class="DateLabelImage" style="cursor: pointer" onclick="OpenDatePicker('DateAge')"><img class="calendarImage" src="../../img/StatImg.png"></span>
<input type="text" id="DateAge" placeholder="Click to open Date Box" class="AgeChangeInput range"/>
Script:
<!-- Call datepicker through image button -->
<script>
function OpenDatePicker(DatePicker)
{
var classIt = '.' + DatePicker;
alert(classIt);
// Click on any Input Field.
$(classIt).on('click', function()
{
alert('Good');
// Show Box on click Date.
$('.daterangepicker').show();
});
}
</script>
I tried using:
.on('click', function()
but this is not working as i am not clicking on the input field instead i am clicking on the image.
http://jsfiddle.net/vikramjakkampudi/9NMgT/1/
function OpenDatePicker(DatPicke)
{
var classIt = '#' + DatPicke;
alert(classIt);
// Click on any Input Field.
$(classIt).on('click', function()
{
alert('Good');
// Show Box on click Date.
// $('.daterangepicker').show();
$('.ui-datepicker-div').show();
});
}
click event should bind in ready or document.ready function .
another thing is 'DateAge' is an id not a class so you should call by '#' not '.'.
I thing following will work.
$(document).ready(function () {
$("#DateAge").click(function () {
alert('Good');
$('.daterangepicker').show();
});
});
I think it should be # instead of a .. Secondly I can't find .daterangepicker in the markup. I did the change as I mentioned. Here is the link
http://jsbin.com/feyunagi/1/edit

jQuery slideToggle breaking when you press a link inside a div

I have having a little trouble with the slideToggle when I have a link inside of the slideup panel. What I am trying to do is have the ability to press a button and a div will slide up and display related posts and once you press another or the related project button on the page it will close the toggle and reveal another effect that I am using (100% width and heigh popup). The script I am using works perfect but I am running into one problem. When I click a related post inside of the slideToggle it causes the div to slide down instead of going to the page that represents the link.
Here is my code below and an example http://jsfiddle.net/K8vBg/15/.
$(document).ready(function(){
// build a variable to target the #menu div
var menu = $('#menu')
// bind a click function to the menu-trigger
$('#menu-trigger').click(function(event){
event.preventDefault();
event.stopPropagation();
// if the menu is visible slide it up
if (menu.is(":visible"))
{
menu.slideUp(1000);
}
// otherwise, slide the menu down
else
{
menu.slideDown(400);
}
});
$(document).not('.projectHolder-small,#projectSpecs').click(function(event) {
event.preventDefault();
if (menu.is(":visible"))
{
menu.slideUp(400);
}
});
})
If I change .projectHolder-small,#projectSpecs in the .not function to just read #menu then I am able to click the link inside of the panel but the panel will not slideDown when I click another button on the page. The popup from #project specs will just go over the panel instead of closing it.
Is there something I am missing in my script?
Thank you
Try changing the $(document).not().click() to:
$(document).click(function(event){
if(!$(event.target).closest('.projectHolder-small,#projectSpecs').length){
if (menu.is(":visible")){
menu.slideUp(400);
}
}
});
I am using closest() instead of the usual is(), so that even clicking on the children elements of '.projectHolder-small,#projectSpecs' the panel won't close.
I rewrote the script to the following and it works perfect
$(document).ready(function () {
var $frm = $('#menu').hide();
var $bts = $("#menu-trigger").on('click', function () {
var $this = $(this)
$bts.filter(".selected").not(this).removeClass('selected');
$this.toggleClass('selected');
if ($this.hasClass('selected') && $frm.is(':visible')) {
$frm.stop(true, true).slideUp(function () {
$(this).slideDown()
});
} else {
$frm.stop(true, true).slideToggle();
}
});
$bts.filter('.selected').click();
$("#projectSpecs, #menuButton").click(function () {
$bts.filter(".selected").removeClass('selected');
$frm.slideUp();
});
});

Categories