We Keep Coding

Bootstrap Popover from Ajax

I created a jQuery plugin that loads data from AJAX and then display the data from popover. And when the user click the button again, the button will display the popover instead of reload the data from AJAX.
Here's the code (and this is the jsfiddle https://jsfiddle.net/petrabarus/spqdqqhL/)
$.fn.myButton = function () {
return this.each(function() {
$(this).on('click', function () {
var w = $(this);
w.off('click');
w.button('loading');
$.post('/echo/html/', {html: "Content", delay: 1}, function(content) {
w.button('reset');
w.popover({content: content})
.popover('show');
});
});
});
}
$('.my-button').myButton();
The popover loads, but the weird thing is that after the popover being displayed for the first time, I have to click twice to hide the popover. But after that the popover works fine: one click to display and one more to hide so on.
What is that happening and how to fix it?

Try this :
$.fn.myButton = function () {
return this.each(function() {
$(this).on('click', function () {
var w = $(this);
w.off('click');
w.button('loading');
$.post('/echo/html/', {html: "Content", delay: 1}, function(content) {
w.button('reset');
w.popover({content: content});
//.popover('show');
w.trigger( "click" ); // this is not proper way but it is working
});
});
});
}
$('.my-button').myButton();

Bootstrap tooltip lazy load with delay and show

I am currently using the following code to initialize a lazy initialization version of Bootstrap tooltip. After the first hover everything works fine in regards to the delay, but on the initial hover it shows right away. I know this is because of the $(this).tooltip('show'); method, but I dont know how to use the delay and show at the same time. I have to use the $(this).tooltip('show'); because once hovered the element doesnt show the tooltip unless I move out and back in.
$(element).on('hover', '.item', function () {
matchup = ko.dataFor(this).Matchup;
if (matchup) {
if ($(this).attr('data-original-title') != '') {
$(this).tooltip({ title: matchup.Title, html: true, delay: 1000 });
$(this).tooltip('show');
}
}
});
Updated Answer
$(element).on('mouseenter', '.item', function (e) {
matchup = ko.dataFor(this).Matchup;
if (matchup) {
if ($(this).attr('data-original-title') != '') {
$(this)
.addClass('tooltip-init')
.tooltip({ title: matchup.Title, html: true, delay: { show: 1000, hide: 0 } })
.trigger(e.type);
}
});

try use trigger
try the following code
$(this).tooltip({
title: matchup.Title,
html: true,
trigger: 'hover',
delay: delay: { show: 2000, hide: 3000 }
}).trigger('hover');

I found Holmes answer using delay to work, but not reliably. When moving through a series of items, the hover seemed to stop showing. With the help of another stackoverflow answer leading to this jsfiddle by Sherbrow, I simplified the code and got it working in this jsfiddle. Simplified code below:
var enterTimeout = false;
$('[rel="tooltip"]').tooltip({trigger:'manual'}).on('mouseenter', function() {
var show = function(n) {
enterTimeout = setTimeout(function(n) {
var isHovered = n.is(":hover");
if (isHovered) n.tooltip('show');
enterTimeout = false;
}, 750);
};
if(enterTimeout) clearTimeout(enterTimeout);
show( $(this) );
});
$('[rel="tooltip"]').on('mouseout click',function() {
$(this).tooltip('hide');
});

JQuery Tooltip Not Allowing Button to be Clicked

I'm using JQuery tooltip plugin and I'm trying to simulate a input button on hover, which it does successfully but I cannot click on said button. It's like it never exists in the DOM, or maybe it does but then is instantly removed. I'm not sure why the click is not binding.
http://jsfiddle.net/BgDxs/126/
$("[title]").bind("mouseleave", function (event) {
var evt = event ? event : window.event;
var target = $(evt.srcElement || evt.target);
evt.stopImmediatePropagation();
var fixed = setTimeout(
function () {
target.tooltip("close");
}, 200);
$(".ui-tooltip").hover(
function () { clearTimeout(fixed); },
function () { target.tooltip("close"); }
);
});
$("[title]").tooltip({
content: "...wait...",
position: { my: "left top", at: "right center" },
open: function (event, ui) {
var _elem = ui.tooltip;
window.setTimeout(
function() {
var html = "<input type='button' value='Card Information' class='card_info_popup'></input>";
_elem.find(".ui-tooltip-content").html(html);
},
200);
},
track: false,
show: 100
});
$('.card_info_popup').on('click', '.container', function() {
alert('click');
});

You're using event delegation wrongly here since .container is not the child of your input with class card_info_popup, so you need to use:
$('body').on('click', '.card_info_popup', function() {
alert('click');
});
instead of:
$('.card_info_popup').on('click', '.container', function() {
alert('click');
});
Updated Fiddle

change:
$('.card_info_popup').on('click', '.container', function() {
alert('click');
});
to
$(document).on('click', '.card_info_popup', function() {
alert('click');
});
Updated Fiddle

Try this.
You have to use event delegation to enable the click event on the newly created tooltip button
http://learn.jquery.com/events/event-delegation/
$(document).on('click', '.card_info_popup', function() {
alert('click');
});

You have to delegate on('click'); to a static element then bind it to the dynamically generated popup.
I have updated your fiddle: http://jsfiddle.net/BgDxs/130/
Here is the updated code:
$('body').on('click', '.ui-tooltip input.card_info_popup', function() {
alert('click');
});

JQuery Passing Variables on Button Click

I am using JQueryUI Dialog box to show a link. I have 20 buttons with 20 different links. I wan't to pass that link so the Dialog box knows which link to open.
Here is the code:
$(function () {
$(document).ready(function () {
$('#dialog').dialog(
{
autoOpen: false,
modal: true,
open: function (event, ui) {
var id = $(this).data('aid'); // It does not work here
$(this).load("Link?id=" + id);
},
hide:
{
effect: "explode",
duration: 500
}
});
});
$('input[type=submit]').click(function () {
var id = $(this).data('aid'); // Works here. I wan't to pass this.
$("#dialog").dialog("open")
});
});
MVC/Razor:
<input type="submit" value="Show" class="button" data-aid="#Model.item.id" />
Does anyone have any suggestions on how I can accomplish this?

Prior to opening the dialog, set a data property to #dialog - which is inturn accessible as this inside the open() callback:
$("#dialog").data('aid', $(this).data('aid')).dialog("open");
Now this should work:
...
open: function (event, ui) {
var id = $(this).data('aid'); // Now it will work here
$(this).load("Link?id=" + id);
},
...

jQuery : how to prevent animation in related div?

is there any option to prevent slideUp() when hover its related div ?
$('#member1').hover(function () {
$("#memberdetails2").hide();
$("#memberdetails1").stop(true, true).slideDown();
}, function () {
$("#memberdetails1").stop(true, true).slideUp();
});
$('#memebr2').hover(function () {
$("#memberdetails1").hide();
$("#memberdetails2").stop(true, true).slideDown();
}, function () {
$("#memberdetails2").stop(true, true).slideUp();
});
DEMO http://jsfiddle.net/sweetmaanu/zDYyB/

Are you talking about something like this?
http://jsfiddle.net/zDYyB/2/
If you want the members detail to be always visible, remove
$('#company').on('mouseleave', function(e) {
$('.membersare').hide();
});