We Keep Coding

How do I refresh the qtip label to display new label for specific button on hover?

I have several buttons on my page and I want to show the full name on a tooltip instead of abbreviated name (which is displayed on the button) onhover/onmouseover.
So something like a button with the word USA on it, on hover, I want to use qtip to display United States of America on a label tooltip.
Here's my attempt:
JavaScript side:
$('#USA').mouseover(function () {
Objects.ToolTip("#USA", "United States of America");
}).mouseout(function () {
// $("#USA").qtip('destroy', true);
$('.qtip').remove();
});
$("#JP").mouseover(function () {
Objects.ToolTip("#JP", "Japan");
}).mouseout(function () {
// $("#JP").qtip('destroy', true);
$('.qtip').remove();
});
where ToolTip:
ToolTip:function(elementId,toolTipContent){
$(elementId).parent().mouseover(function (event) {
$(this).parent().qtip({
overwrite: false,
content: toolTipContent,
once: false,
show: {
event: event.type,
ready: true
},
position: {
my: 'top center',
at: 'top center',
target: 'mouse',
adjust: {
x: 0,
y: -35,
mouse: true
}
},
style: {
classes: "qtip-tooltip-for-ellipse"
}
}, event);
});
}
Html/css side:
<div id="countries-panel" style="margin-top: 0">
<div style="margin-top: 10px">
<button id="USA" class="standard-button-with-icon" data-val-btnname="USA-btn" style="width: 70px; height: 20px" onclick="CountryBtn.Click('Cbtn')"><span class="c-button">USA</span><span class="circle c-circle" style="background-color: rgb(255,0,0)"></span></button>
</div>
<div style="margin-top: 10px">
<button id="JP" class="standard-button-with-icon" data-val-btnname="JP-btn" style="width: 70px; height: 20px" onclick="CountryBtn.Click('Cbtn')"><span class="c-button">JP</span><span class="circle c-circle" style="background-color: rgb(0,0,255)"></span></button>
</div>
</div>
So, the problem I am having is the 'USA' full name keeps showing for all my buttons instead of the new content for each button.
So like when I'm hovering for USA button, I get United States of America. If I'm hovering on JP button, I get United States of America as well even though it's supposed to be Japan.
The code above might be confusing but it shows my attempts to remove or destroy the qtip label and reinstantiating the new label for the next button hover. However, it doesn't work. It completely deletes the qtip label and doesn't show the new label again.
So I am wondering how can I refresh the label to show different things for different buttons on my page?

Your code is fine till this part;
$(elementId).parent().mouseover(function (event) {
$(this).parent().qtip({
....
});
});
.....
So basically you are calling ".parent" twice.
just remove ".parent()" from $(this).parent().qtip and it will work just fine.

This works now: http://jsfiddle.net/slicedtoad/6vgt8ju3/4/
You were adding a hover listener twice, basically. Once with .mouseover and once in CountryToolTip.
// Create the tooltips only when document ready
$(document).ready(function () {
var CountryToolTip = function (elementId, toolTipContent) {
//No more .mouseover here
$(elementId).parent().qtip({
overwrite: false,
content: toolTipContent,
once: false,
show: {
event: event.type,
ready: true
},
position: {
my: 'top center',
at: 'top center',
target: 'mouse',
adjust: {
x: 0,
y: 10,
mouse: true
}
},
style: {
classes: "qtip-tooltip-for-ellipse"
}
}, event);
}
$('#USA').mouseover(function () {
CountryToolTip("#USA", "United States of America");
}).mouseout(function () {
$("#USA").qtip('destroy', true);
});
$("#JP").mouseover(function () {
CountryToolTip("#JP", "Japan");
}).mouseout(function () {
$("#JP").qtip('destroy', true);
});
});
That is the jsfiddle code, for your app it looks like you need to define CountryToolTip like:
ToolTip:function(){...
instead of
var CountryToolTip = function(){...

CarouFredSel add content dynamically

I try to add content on the fly to a CarouFredSel slider. The content is inserted fine but CourFredSel does not recognize the new content. Is there a way to tell the slider that the slide count has changed?
jQuery(document).ready(function() {
jQuery('#carousel').carouFredSel({
items: 4,
direction: "left",
responsive: true,
infinite: false,
circular: false,
scroll: {
items: 2,
duration: 1000
},
next: {
button: "#slider-button-next",
key: "right",
onBefore: function () {
loadAdditionalContent();
}
},
prev: {
button: "#slider-button-prev",
key: "left"
},
auto: {
play: false
}
});
});
function loadAdditionalContent () {
jQuery('#carousel').trigger('insertItem', ['<img src="http://dummyimage.com/200x200" class="added" />']);
}
Here is a fiddle that describes the problem: http://jsfiddle.net/bg0xyj8k/

there is nothing wrong with your code:
fix this in jsfidle: use external reference without https: http://cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.2.1/jquery.carouFredSel.packed.js
I did some changes in your code, did not understanding what are you trying to do there.
jQuery( "#slider-add-items" ).click(function() {
loadAdditionalContent();
});
function loadAdditionalContent () {
id++;
jQuery('#carousel').trigger('insertItem', ['<img src="http://dummyimage.com/200x200" class="added" id="'+ id +'" />']);
}
http://jsfiddle.net/bg0xyj8k/2/
UPDATE
- be more precise when you are asking someting
FIX 1: insert at next click before fist visible element - http://jsfiddle.net/bg0xyj8k/3/
FIX 2: insert on last position of the slider when next clicked - http://jsfiddle.net/bg0xyj8k/4/ - result => infinite next click

jQuery - multiple instances of dialog boxes won't open

I have the following problem:
I use dialog boxes to show different pages/content inside of them, however when two different dialog boxes are opened it crashes and they cannot be opened again. Everything is fine as long as one box is opened, it can even be opened multiple times. When I open second dialog box neither of them can be reopened. I have already tried to "destroy" the dialog on closing (as suggested here Jquery Dialog opening multiple dialogs) but it didn't help, I still can open only one instance of each box and when two different ones are opened it crashes and neither of them reopens.
I have something like that in html:
<ul>
<li>link1 title</li>
<li>link2 title</li>
</ul>
And then in the javascript:
$("#link1").click(function () {
$(function () {
$('<div>').dialog({
modal: false,
open: function ()
{
$(this).load('somePage.php');
},
height: 500,
width: 1300,
title: 'title1'
});
});
});
$("#link2").click(function() {
$(function () {
$('<div>').dialog({
modal: false,
open: function ()
{
$(this).load('otherPage.html');
},
height: 535,
width: 880,
title: 'title2'
});
});
});

Your $(function () { is not at the right place:
$(function () {
$("#link1").click(function () {
$('<div>').dialog({
modal: false,
open: function ()
{
$(this).load('somePage.php');
},
height: 500,
width: 1300,
title: 'title1'
});
});
$("#link2").click(function() {
$('<div>').dialog({
modal: false,
open: function ()
{
$(this).load('otherPage.html');
},
height: 535,
width: 880,
title: 'title2'
});
});
});
The code inside $(function() {…} is executed at document loading, the perfect time to register event handler on our HTML elements.

jQuery does not work when reload the page content via ajax

I use Bootstrap to display a popover, until there is with all this code below everything works normal.
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
I only need to load the content of the page via ajax, then I changed the code because when I load the content dynamically I need to delegate events, changed the code and it looked like this:
$('body').on('click','.emoticons',function()
{
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
});
Now my troubles started. The code works however when I click the first time it does not work, so it works when I click more than once on the link. What to do?

What's happening is that when you are clicking on the .emoticons and executing your popover function, it is at that moment that you are binding it to your click. That's why it doesn't work the first time, but it works afterwards. It starts listening to the click event after that.
Ideally, the solution is to run the .popover function when the new content is loaded (on your AJAX callback).
If you want to just copy paste my code and see if it works, you can do this:
$('body').on('click','.emoticons',function()
{
// Convert this element into a popover and then display it
$(this).popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {
return $('.emoticonimg').html();
}
}).popover('toggle');
});
But, I would NOT recommend this code specifically, since you are re-initializing your popover every time you click on it.
It's better and more clear if you bind all popovers after your AJAX request is done:
$.ajax( "BlaBlaBla.php" )
.done(function() {
// Convert all emoticons to popovers
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {
return $('.emoticonimg').html();
}
});
});

It doesn't work the first time because the first click if firing off the body onclick handler which binds your popover.
Try something like this in your $(document).ready() function.
$(".emoticons").click(function(){
$(this).popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
});

Show Popup on Click

Following code, but it is not working.
$('#img').on('click', function () {
$("#new").dialog({
autoOpen: true,
position: { my: "center", at: "top+350", of: window },
width: 1000,
resizable: false,
title: 'Add User Form',
modal: true,
open: function () {
$(this).load('#Url.Action("_new", "Help")');
},
buttons: {
"Add User": function () {
addUserInfo();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
return false;
});
I have a partial view name _new in Help Folder Under Views.
Can someone guide me too achieve it. I am using MVC4 framework :)

You have to move the click to the anchor (a) instead of the img. The click event will never reach the img.
See jsfiddle.