I'm trying to use the Twitter Bootstrap popover plugin to bring up a popover when a <span> element is clicked.
All the files are including on the page, including bootstrap-tooltip.js and bootstrap-popover.js. This is my jQuery code to call the popover:
$('#supported-hosts').popover({
'animation': true,
'html': 'test',
'trigger': 'click'
});
However when I click the element nothing happens. There's no Javascript error in the developer console or anything.
I've also tried doing this to no effect:
$('#supported-hosts').on('click', function() {
$(this).popover('show');
});
I'm pretty clueless as to what's wrong because as far as I can tell from the Bootstrap docs I'm using it correctly.
Edit: Also the HTML is simply a span element:
<span id="supported-hosts">Supported filehosts</span>
In order to show a pop-over, you need to indicate what its content should be.
You can do this on the html tag itself:
<span id="supported-hosts" data-content="Popover content">Supported filehosts</span>
Or with JavaScript:
$('#supported-hosts').popover({
'content': 'Popover content'
'animation': true,
'html': 'test',
'trigger': 'click'
});
By default, the pop-over will use the title attribute of the element that triggers it, so you can use that as well, depending on your needs.
Related
My modal dialog works perfectly (meaning I can adjust every option), except that the button icons option has no effect. Here's the code I'm using to generate the dialog:
$('#alert_div')
.attr("title", "Delete all instances?")
.text("Are you sure you want to delete all instances of this event between the specificed dates? This cannot be undone.")
.dialog({
modal: true,
draggable: false,
position: { my: "top", at: "center", of: window },
buttons: [
{
text: "No",
icons: { primary: "ui-icon-check" },
click: function() {
$(this).dialog('close');
console.log('Clicked no.');
}
},
{
text: "Yes",
click: function () {
$(this).dialog('close');
console.log('Clicked yes');
}
}
]
});
I've looked at every relevant Stack Overflow question I could find – e.g. this one. Aside from attaching an element to the button on open, I don't know how to solve this. When I create elements elsewhere in the document and give them the proper class, the icons show up properly.
Here's the HTML jQuery generates for the button when the dialog is opened:
<div class="ui-dialog-buttonset"><button type="button" icons="[object Object]" class="ui-button ui-corner-all ui-widget">OK</button></div>
I'm assuming there should be something other than '[object Object]
in the icons attribute. Why is this happening? I'm using jQuery UI v. 1.12.0 and jQuery v. 3.0.0., and I'm not using Bootstrap.
Apparently, the problem is a bug in jquery-ui 1.12.0. If you substitute 1.11.4 for 1.12.0 in your fiddle, the problem goes away.
I ran your code (the code you published above, not the code in your fiddle) in my own test environment, and everything worked fine. (I downloaded 1.11.4 in May, when it was the latest stable version.) It seems that the button() method isn't getting called when dialog() is called. As you correctly surmise, there shouldn't be an object Object in the icons element. My button code looks like this:
<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icons" role="button">
<span class="ui-button-icon-primary ui-icon ui-icon-check"></span>
<span class="ui-button-text">No</span>
<span class="ui-button-icon-secondary ui-icon ui-icon-circle-check"></span>
</button>
Looks like maybe this is a "real genuine bug" in jQuery-UI 1.12.0. :)
Edit: looks like actually this is a "real genuine feature" in jQuery-UI 1.12.0, along with a host of other changes, some of which break compatibility with previous versions. See Harpo's "new syntax" link. Anyone using menus (especially menus, old ones will no longer work), radiobuttons/checkboxes, or a few other things, will want to read it.
As for getting two icons on a button, it's still possible with the new syntax, but you can't do it using the buttons parameter in the dialog() method. Instead, you'll have to do the button the standard way, adding spans for the icons. (The upgrade doc says that you can just put the second icon span in the markup, and use the icon parameter for what used to be the primary icon, but I wasn't able to get that to work in this context.) So, for the markup:
<div id="alert_div">
<button id="okButton">
<span class="ui-icon ui-icon-check"></span>
Ok
<span class="ui-icon ui-icon-circle-check"></span>
</button>
</div>
And then:
$('#alert_div').dialog({
open: function(e, ui) {
$('#okButton')
.button()
.on('click', function() {
$(this).dialog('close');
});
}
});
jQuery UI 1.12 introduced a new syntax for button icons, which I have confirmed fixes this problem (see this jsFiddle). Currently, it doesn't accept the deprecated options; a PR has been submitted to fix that. See my bug report for details. The following code works with jQuery UI 1.12 and jQuery 3.1.0:
$("#alert_div")
.attr("title", "Error")
.text("Please choose a calendar and enter both start and end dates.")
.dialog({
modal: true,
draggable: false,
resizable: false,
position: { my: "top", at: "top", of: window },
buttons: [{
text: "OK",
icon: "ui-icon-check",
click: function() {
$(this).dialog("close");
}
}]
});
Please have a look this is for Example, we can do any thing to it..
use style to make changes into it...
Thanks... :)
I have already read all the posts about this, but unfortunately none of them was helpful: jsfiddle and plunker links appear to be no longer working.
What I am trying to do is to simply put a button inside the bootstrap pop-over which makes a call to a function inside the scope of the directive I've created. The problem is that using jquery to grab the content it does not work since the scope appear to be outside. Also trying to create the content inside the function it won't work because it will be not compiled.
I created an example on jsfiddle, but somehow angularjs is not loaded in the right point and therefore it doesn't work either.
$("#pop-over-link").popover({
'placement': 'top',
'trigger': 'click',
'html': true,
'container': 'body',
'content': function() {
return $("#pop-over-content").html();
}
});
This is the piece of code that opens the pop over, grabs the contents and shows it.
Here the jsfiddle: http://jsfiddle.net/75zLT/2/
And here is the working example on my dropbox: https://dl.dropboxusercontent.com/u/19470623/hatethis/test.html
There were 2 issues your were not including ngRoute in your fiddle and your need to compile the content returned in the popover.
'content': function() {
return $compile($("#pop-over-content").html())(scope);
}
Also you do not need the timeout.
Example: Plunker
I've hit a bit of a wall with this one. My jQuery knowledge outside of just implementation is pretty poor.
I'm building the Magnific Popup (http://dimsemenov.com/plugins/magnific-popup/) jQuery plugin into my WordPress theme as a popup gallery. I've got it all wired up and working. It grabs images dynamically from the backend using custom fields. I can also get multiple instances working on the same page. HOWEVER, when scrolling through images in one popup gallery, it wont end at the end of the first gallery but rather, it will move on into the images in the second gallery. See example: http://www.oftenvisual.com/reset/galleries/.
Unfortunately I can't post the code here as it's too long, but hopefully the demo page helps. Because the galleries are generated dynamically and the client using the backend wont have the knowledge to add container with different classes, I need some way to also dynamically separate out the galleries. Any idea GREATLY appreciated!
Script calling the plugin
// Magnific
$(document).ready(function() {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: 'The image #%curr% could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title');
}
}
});
});
try to set different id_s on your .popup-gallery div's and then do
$('#popup-gallery1').magnificPopup....
$('#popup-gallery2').magnificPopup....
You may use jQuery contains selector to point "a" tag with specific class name - a[class*='popup-gallery-']. If you have different IDs for you pop-ups it just work as a charm. It just search for all "a" where class contains "popup-gallery-".
And if it matches, it fires up the Magnific Pop Up etc.
jQuery:
$(document).ready(function(){
$("a[class*='popup-gallery-']").magnificPopup({
//your settings goes here
});
});
HTML:
# first div
<a class="popup-gallery-1" href="#popup-1">First popup</a>
<div id="popup-1"> Your content here </div>
# second div
<a class="popup-gallery-2" href="#popup-2">Second popup</a>
<div id="popup-2"> Your content here </div>
You can simply use jquery's each with the same class, for example:
$('.popup-gallery').each(function() {
$(this).magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image', // override with class 'mfp-iframe' on delegate or any other supported type
gallery: {enabled:true },
});
});
And now if you have multiple .popup-gallery divs, they all work separately.
I have a twitter bootstrap modal on a page and it works pretty well. However, sometimes I want to change its caption and body dynamically while it's being shown.
How do I do that?
function showModal(){
$("#ajaxModal").modal({keyboard: false, show: true, backdrop: 'static'});
}
function hideModal(){
$("#ajaxModal").modal('hide');
}
///.............
showModal();
//.........
hideModal();
I had worked on same scenario..here is the example may be it works for you..
This is just sample scenario.. i had find the element in the modal myModal and passed my value, i had passed dynamically 'alertMsg'
$('#myModal').find('p').html('<span style="color:#4F2817;">'+alertMsg+'</span>');
I have a page where I need to use 2 different FancyBox styles for different elements on the page. To achieve that, I added tpl option and modified stylesheet accordingly. Here is what I have:
$(document).ready(function() {
$(".login").fancybox({
closeClick : false,
closeBtn : true,
tpl: {
wrap : '<div class="fancybox-wrap1" tabIndex="-1"><div class="fancybox-skin1"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>'
}
});
});
In my CSS, I added new styles for .fancybox-wrap1 and .fancybox-skin1. Styles work great BUT on the FancyBox with modified template "close" button completly disappears! I tried both adding and deleting closeBtn from tpl but it doesn't seem to make any difference.
I also have a demo here (eventually I will need different background-images for FancyBox, not just background-color, that's why I'm doing it).
What am I doing wrong? Any help will be greatly appreciated!
Your .fancybox-skin1 div still needs to have the fancybox-skin class applied to it. If you look at the Fancybox code version 2.1.2 (sometimes that's the only way to figure things out when they aren't well documented) you'll see that it finds the skin by searching for that class (line 884):
$.extend(coming, {
skin : $('.fancybox-skin', coming.wrap),
outer : $('.fancybox-outer', coming.wrap),
inner : $('.fancybox-inner', coming.wrap)
});
then it uses that reference to append the closeBtn (line 1440):
// Create a close button
if (current.closeBtn) {
$(current.tpl.closeBtn).appendTo(F.skin).bind('click.fb', F.close);
}