I'm trying to add buttons to popover that will allow user to copy content.
I managed to build prototype: http://jsfiddle.net/Misiu/VUZhL/890/
but I have weird error when using tipsy inside popover:
After clicking on Click for action button I get popover with 2 buttons, they both have tooltips, sometimes after clicking on button tooltip stays visible.
My code:
$(function () {
$('#example').tipsy({
title: 'data-tipsy-title',
gravity: function () {
return this.getAttribute('data-tipsy-gravity') || 'n';
}
});
$(document).on('click', '#example, .tip', function (event) {
$(this).tipsy("hide");
});
$('#example').popover({
placement: 'top',
title: '',
html: true,
template: '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content no-padding"></div></div>',
content: '<div class="btn-group">' +
'<button type="button" title="link" class="btn btn-default tip number"><span class="fa fa-link"></span></button>' +
'<button type="button" class="btn btn-default tip" title="something else"><span class="fa fa-copy"></span></button>' +
'</div>'
});
$('#example').on('shown.bs.popover', function () {
//tipsy
$('.tip').tipsy({
gravity: 's'
});
//zero clipboard
var clip = new ZeroClipboard($(".tip"));
clip.on("copy", function (event) {
var clipboard = event.clipboardData;
var data = "";
if ($(event.target).hasClass("number")) {
data = "1st button"+new Date()
} else {
data = "second";
}
clipboard.setData("text/plain", data);
ZeroClipboard.deactivate();
});
})
//zero clipboard
ZeroClipboard.config({
hoverClass: "hover"
});
});
My questions:
1. How can this be fixed?
2. Is ZeroClipboard initialized in right place? I can't do that before, because buttons are added when popover is shown for first time.
Related
I have a menu which pops up during my program but I don't know the best way to close the menu when the close button is clicked. Here is the menu:
that.dom.container.style.height = $(that.dom.container).height()+"px";
that.dom.container.innerHTML =
'<div class="E_Trigger_WrapperInner">'+
'<h2 class="ui-widget-header ui-corner-all">' + i18n('triggerjs.running.head') + '</h2>'+
'<div class="E_Trigger_Warning">' + i18n('triggerjs.running.info') + '</div>'+
'<div class="E_Form_ButtonSet">'+
'<button class="E_Form_Button">' + i18n('triggerjs.running.close') + '</button>'+
'</div>'+
'</div>';
I have tried the below solution but this leaves a small bit of the box remaining like shown in the image.
$('div.E_Form_ButtonSet button', that.dom.container).click( function (e) {
that.dom.container.style.display = "none";
} );
Thanks
You can test : (with your own code)
and you can replace $('div') by $(this) if you touch the btn because this works about the function above
$('btn').click( function () {
$('div').style.display = "none";
});
OR
$('btn').click( function () {
$('div').remove();
});
It looks to me like you're adding the menu html dynamically, if so, a simple .click() function won't do the trick.
What you'll want to do is something like this:
$(document).on('click', '.btn', function(){
$('.element-you-want-to-remove').remove();
});
I have attempted to create a custom confirm UI dialog box, which works perfectly on the 1st attempt, and then on a second attempt of running it, I no longer get alerted of my choice as well as the window does not close. Why is that? What else am I doing wrong here that I perhaps overlooked?
Here is the HTML and Javascript in question:
<input type="button" id="Button" value="Click Me" />
$('#Button').click(function () {
confirmUI('is OK?', 'confirm', function () {
alert('click OK');
}, function () {
alert('click Cancel');
});
});
var confirmUI = function (text, title, callbackOkClose, callbackCancelClose) {
var $dialog = $('<div id="confirm_' + new Date().getTime().toString() + '"></div>');
$dialog.html('<div>' + title + '</div><div>' + text + '<div style="width:100%;"><input type="button" id="confirmCancel" value="Cancel" style="float:right;" /><input type="button" id="confirmOk" value="OK" style="float:right;margin-right: 10px" /></div></div>');
$('body').append($dialog);
var buttonString = '';
$dialog.jqxWindow({
minWidth: 300,
minHeight: 80,
draggable: true,
initContent: function () {
$('#confirmOk').jqxButton({
template: 'primary'
});
$('#confirmCancel').jqxButton({
template: 'default'
});
},
resizable: false,
closeButtonAction: 'close',
isModal: true,
okButton: $('#confirmOk'),
cancelButton: $('#confirmCancel')
});
$dialog.on('close', function (e) {
console.log('1');
if (e.args.dialogResult.OK) { //ok
if (callbackOkClose) {
callbackOkClose();
}
} else { //cancel or close
if (callbackCancelClose) {
callbackCancelClose();
}
}
});
return $dialog;
};
Here is a jsfiddle: http://jsfiddle.net/v0re8jeu/
Because you are creating that dialog for every button click, so things like $('#confirmOk') are no longer unique and return the selector for the button you clicked on first time. You should remove it from dom on close for the next one to work:
$dialog.on('close', function (e) {
console.log('1');
$dialog.remove();
I have a problem with the close button of the popover. The first time, i close the popover is fine, but the moment i open another one and try to close it, it does not work anymore.
Here my JS for the popover:
$(function () {
$('[data-toggle="popover"]').popover({
"html": true,
"title": '<span class="text-info"><strong>title</strong></span>'+
'<button type="button" id="close" class="close" >× </button>',
"content": function(){
var div_id = "tmp-id-" + $.now();
return details_in_popup($(this).data('url'), div_id);
}
}).on('shown.bs.popover', function(e){
var popover = jQuery(this);
$('.close').on('click', function(e){
popover.popover('hide');
});
});
});
Any clue what is causing this problem ?
Thanks!
second time a popover is created the $('.close') will get two elements.
if want to hide all popop use
$('[data-toggle="popover"]').popover('hide')
I'm getting crazy, I try to understood Tooltip behaviour but unsuccessfully.
1. The first issue is when I try to use it in on click event by plugin (button 1) -> if you will go to Fiddle than you will see that function inside of 'content' property is called twice every click... why?
2. I want to use Tooltip bound to an element (button 2) and show it in manual mode but then it's not working at all... why?
HTML
<div class="container">
<div class="row">
<div class="col-xs-12">
<br/>
I'm working! :-D <span class="badge b0">0</span>
<br/>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<br/>
I'm not working! :-( <span class="badge b1">0</span>
<br/>
</div>
</div>
</div>
JS
var i = 0, j = 0;
$('.container').popover({
selector: '.btn-success',
html: true,
placement: 'right',
container: '.container',
trigger: 'click',
content: function(){
$('.badge.b0').text(j++);
return 'test';
}
});
$('.container').popover({
selector: '.btn-danger',
html: true,
placement: 'right',
container: '.container',
trigger: 'manual',
content: 'test'
});
$('.container').on('click', '.btn-danger', function(){
$('.badge.b1').text(i++);
$(this).popover('show');
});
FIDDLE
http://jsfiddle.net/gepbmonh/8/
$('#add').click(function () {
addButton()
})
var ind = 0;
// adding buttons
function addButton() {
ind++;
// creating button
$button = $('');
$button.text('I\'m not working! :-( ' + ind);
$button.addClass('btn btn-danger has_popover');
$button.attr('data-html', 'true');
$button.attr('data-placement', 'left');
$button.attr('data-trigger', 'manual');
$button.attr('data-content', 'test ' + ind);
// creating badge
$span = $('<span class="badge b' + ind + '">0</span>');
$wrap = $('<div></div>');
$wrap.append($button).append($span);
// add to the stage
$('#buttons').append($wrap);
}
//inclick event
$('.container').on('click', '.has_popover', function () {
// find an appropriately badge
$badge = $(this).parent().find('.badge');
// get current value
var i = $badge.text();
i = parseInt(i);
// increase for one
i++;
$badge.text(i);
//showing popover
$(this).popover('show');
});
1) It isn't called twice every click, it is called once every click, but it is also counting the click that makes it go away, just the text only updates every other click.
2) I'm not really sure what you mean by this, could you explain further and I will edit my post.
I have the following input, which appears on click and disappears on the next click:
<a href="#;" class="asset_info" data-asset_id="{{ asset.pk }}"
data-toggle="focus" tabindex="0" data-placement="left" data-trigger="focus"
>Hello</a>
However, I only want the popup to disappear on the next click if the person is not clicking on the box. Here is what I have so far:
<script>
$(function () {
$(".asset_info").click(function() {
el = $(this);
asset_id = el.data('asset_id');
$.post("/get_asset_info/", {'asset_id': asset_id}, function(response) {
el.unbind('click').popover({
content: response,
html: true,
delay: {show: 200, hide: 100}
}).popover('show');
});
});
})
</script>
The following worked:
$('html').on('mouseup', function(e) {
if(!$(e.target).closest('.popover').length) {
$('.popover').each(function(){
$(this.previousSibling).popover('hide');
});
}
});