How to use Select2 inside a bootstrap popover - javascript

I wonder how I get my Select2 dropdown working inside of a Bootstrap popover. I know the issue is that the popover content is loaded after the popover-event-click is initiated, so that the JS-code for the Select2 wont work. I just don't know how to fix it.
Example:
http://hammr.co/8234009/6/problems.html
Try pressing "submit" on the fourth problem named "Aaaah!" and you'll get the popover visible. Then try pressing the "Alabama"-dropdown (which is the Select2 dropdown) and it wont work (since the JS isn't initiated because the popover content is loaded after the DOM).
Anyone knows how to make it work?

yes possible
thanks to
bootstrap popover callback modification
/* override bootstrap popover to include callback */
var showPopover = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function() {
showPopover.call(this);
if (this.options.showCallback) {
this.options.showCallback.call(this);
}
}
$(this).popover({
container:'#maincont',
placement:'right',
html : true,
title: function() {
return $('#'+pk).html();
},
content: function() {
return $('#'+pk).clone();
},
showCallback : function() {
$(".popover-content select").select2({
containerCss : {"display":"block"},
allowClear: true,
});
},
});

Related

How do I display add and edit icons for custom function in jqGrid?

I am trying to have custom add and edit functions in jqgrid. I can get the add and edit functions to work correctly, but I can't get the add and edit icons to display correctly. Instead, an arrow(^) appears instead of the plus or edit.
What I've tried:
*Importing jquery-ui before and after the jqgrid
//jqgrid code
$('#jqgrid').jqGrid({
...
})
.navButtonAdd("#pager", {
caption:"Add",
buttonicon:"ui-icon-add",
onClickButton: function(){
$("#lui_jqgrid").show()
$('#addForm').show();
},
position:"last"
})
.navButtonAdd('#pager',{
caption:"Edit",
buttonicon:"ui-icon-edit",
onClickButton: function(){
$('#addForm').show();
},
position:"last"
});
I have the "ui-icon-add" and "ui-icon-edit" under button icon but they are not showing up. This project using backbone.js and I'm importing jquery-ui.js before jqGrid.
How can I get the icons to show up? Instead, I could just have the caption and no icon, but removing buttonicon still shows one.
Update your code with below one. You have some mistakes in your code.
The available buttons are ThemeRoller | jQuery UI, place the cursor the style class will be shown. Use those buttons in jqgrid.
.navButtonAdd("#pager", {
caption:"",
buttonicon:"ui-icon ui-icon-newwin",
onClickButton: function(){
$("#addForm").show();
},
position:"last"
})
.navButtonAdd('#pager',{
caption:"",
buttonicon:"ui-icon ui-icon-pencil",
onClickButton: function(){
$('#addForm').show();
},
position:"last"
});
OutPut on navgrid of jqgrid:

Adding Buttons with Functionality Using JavaScript in Bootstrap

I have created a modal window below to have customized buttons and functionality attached to those buttons using jQuery-UI. However, I want to do the equivalent in Bootstrap using JavaScript and not using data attributes. How would I do this? The Bootstrap website only gives the example of doing something like this using data attributes.
function showWindow(message) {
windowShowing = true;
$("#alertWindow").dialog(
{
height: 120,
modal: true,
buttons:
{
Continue: function(){$(this).dialog("close"); someProcedure();},
Exit: function(){$(this).dialog("close"); exitProcedure();}
},
close: function(){windowShowing = false;}
});
$("#alertWindowMsg").text(message);
}
You can add separate handlers and use the modal methods provided by Bootstrap. Something like
$(".close-button").click(function(){
$('#myModal').modal('hide');
exitProcedure();
});
$(".continue-button").click(function(){
$('#myModal').modal('hide');
continueProcedure();
});

Twitter Bootsrap: Popover and Auto Refresh

I'm using Twitter Boostrap with a website re-design, and I need some jQuery help. I'm using the 'Popover' add-on that is packaged with bootstrap, and I have it in a #div tag (#onlinedata to be specific), and I'm using jquery to reload the div every 10 seconds. This works fine, however, if you happen to be hovering over the link that activates the popover when the div refreshes, the popover gets stuck.
I'm using this code for the refresh:
setInterval(function(){
$("#onlinedata").load("http://website.com #onlinedata");
}, 10000);
And if needed, the code that activates the popover:
$(function () {
$('a[rel=popover]').popover({
placement:'right',
title:'Title',
content: $('#div-that-contains-data').html()
});
});
Is there a way to avoid the popover from being stuck open when the div reloads?
Any help is greatly appreciated.
Associated HTML
The $id is a key specific for each popover because I have multiple popovers.
The popover portion which is hidden until the popover_controller is hovered:
<div id="controller_popup_$id" style="display:none;">
<div style="font-size:11px">
//data_fetched_from_database
</div>
</div>
The link that triggers the popover
<li>Link Title</li>
And finally, the current javascript I'm using (it gets looped through the database records so each record gets the following javascript):
$(function () {
$('a[rel=popover_controller_$id]').popover({
placement:'right',
title:'Title (this is fetched from the database for each popover)',
content: $('#controller_popup_$id).html()
});
});
$(document).ready(function() {
// refreshing code
setInterval(function() {
$('#controller_popup_$id').hide(); // close any open popovers
// fetch new html
$('#onlinedata').load('http://website-link.com #onlinedata', function() {
// after load, set up new popovers
$('a[rel=popover_controller_$id]').popover({
placement:'right',
title:'Title (this is fetched from the database for each popover)',
content: $('#controller_popup_$id').html()
});
});
}, 10000); // 10 second wait
});
**New Code Witch Semi-Works**
I'm using the following code which semi-works. The only problem I'm having is after it reloads the #onlinedata div, it multiplies the popover links.
$(document).ready(function() {
$('a[rel=popover_controller_$id]').popover({
placement:'right',
title:'Title',
content: $('#controller_popup_$id').html()
});
// refreshing code
setInterval(function() {
// fetch new html
$('a[rel=popover_controller_$id]').load('http://websiteurl.com/ #onlinedata', function() {
$('a[rel=popover_controller_$id]').popover('destroy'); // remove old popovers
// after load, set up new popovers
$('a[rel=popover_controller_$id]').popover({
placement:'right',
title:'Title',
content: $('#controller_popup_$id').html()
});
});
}, 10000); // 10 second wait
});
Like this answer, I think you will need to reapply the plugin to the new DOM elements that have been load-ed. This effectively means adding a copy of the popover code after the load call. If old popovers are hanging around, you may have to hide them. This gives us:
$(document).ready(function() {
// refreshing code
setInterval(function() {
$('a[rel=popover]').popover('destroy'); // remove old popovers
// fetch new html
$('#onlinedata').load('/onlinedata.html #onlinedata', function() {
// after load, set up new popovers
$('a[rel=popover]').popover({
placement:'right',
content: $('#div-that-contains-data').html()
});
});
}, 10000); // 10 second wait
});

Tinymce on keypress I am try to display the preview of the content

I am trying below code
$('textarea.tinymce').keypress(function(){
dealDescription = $('textarea.tinymce').tinymce().execCommand('mcePreview');
$("#deal_preview div").text(dealDescription);
});
But I am not using jquery tinymce editor suppose I use jquery tinymce and other jquery UI component not working properly so I am directly using the tinymce component.
Now I need to show content preview in preview box for each key press.
Im using this in tinymce 4.x
tinymce.init({
selector: "#tinymce-textarea",
setup : function(ed) {
ed.on("change", function(e){
$('#tinymce-livepreview').html(tinymce.activeEditor.getContent());
});
ed.on("keyup", function(){
$('#tinymce-livepreview').html(tinymce.activeEditor.getContent());
});
}
});
Explanation:
on("change") is for detect changes on mouse event if u click toolbar icon or selection from the menu. It also able to detect the keyboard event but only after lost focus (not real time).
on("keyup") is for detect changes on real time keyboard event
Could be done after initialisasing as well by getting the active editor:
tinyMCE.activeEditor.on('keyup', function () {
// your nicely formatted code here
});
There's also an editors array you can iterate over if you need it.
I try with below code is working fine
tinyMCE.init({
mode : "exact",
elements : "text",
setup : function (theEditor) {
theEditor.onKeyPress.add(
function (theEditor) {
previewContent(theEditor);
}
);
},
});
function previewContent(editorObject){
var content = editorObject.getContent();
document.getElementById("previewContent").innerHTML = content;
}

Close a cluetip when the mouse is off of the link

Is there an option to close a cluetip dialog when the mouse is moved off of the link? There is the mouseOutClose option, but it doesn't close the cluetip if you don't hover over it first.
Here is an example:
http://plugins.learningjquery.com/cluetip/demo/ - the first link under the jTip Theme
In the clueTips core file
replace the code:
if (opts.mouseOutClose) {....}
with
if (opts.mouseOutClose) {
var closectip;
$cluetip.hover(function() {
clearTimeout(closectip);
},
function() {
$closeLink.trigger('click');
});
$this.hover(function() {
clearTimeout(closectip);
}, function() {
closectip = setTimeout(cluetipClose, 1000);
});
}
I found the solution from a jquery forum here is the link
http://plugins.jquery.com/content/cluetip-doesnt-close-mouseout
Its working for me.
I had the same trouble, and I got a solution.
It's working.
So, what we all want is a way to
1- showing cluetip when link is hovered, then discard it when mouse goes out
2- BUT keep cluetip opened if the mouse did go inside so that it can click on links inside the cluetip
This is how to do it.
Just add this parameter :
sticky: true,
onShow: function(){
$('.mylink').mouseout(function() { // if I go out of the link, then...
var closing = setTimeout(" $(document).trigger('hideCluetip')",400); // close the tip after 400ms
$("#cluetip").mouseover(function() { clearTimeout(closing); } ); // unless I got inside the cluetip
});
}
This is it !
It's because the sticky option is set to true...

Categories