Develop Reference

Bootstrap Popover with Ajax call not showing data

I can't seem to update the popovers contents with Ajax result.
ASP.Net (MVC4):
public ActionResult GetEmployeeDetails(string employeeId)
{
var contract = UnitOfWork.ContractRepository.ContractBusinessManager.GetContract(int.Parse(employeeId), DateTime.Now);
return PartialView("_EmployeeDetails", contract);
}
Html:
<a data-toggle-popup-employee-id="#evaluation.EmployeeId" >#evaluation.Employee.FullName.ToTitle()</a>
Javascript:
$(document).ready(function () {
$('[data-toggle-popup-employee-id]').popover(
{
html: true,
placement: 'top',
title: 'Title',
container: 'body',
content: function () {
//$(this).off('hover');
var employeeId = $(this).data('toggle-popup-employee-id');
$.ajax({
async: false,
url: '#Url.Action("GetEmployeeDetails", "Evaluation")',
data: { employeeId: employeeId },
success: function (result) {
return result;
//var html = result;
//$(this).contents.html = result;
},
error: function (xhr) {
alert(xhr.responseText);
}
})
},
trigger: 'hover'
});
});
The call works fine and gives back the partial result as html but the popovers content is still empty...
UPDATE:
It appears that every time I hover over the link, 10 [Object, HTMLAnchorElement]
are added directly to the $('[data-toggle-popup-employee-id]').
Each object has InnerText and InnerHtml set to the employees name...?

I'd personally do something like the following...
$(document).ready(function () {
$('[data-toggle-popup-employee-id]').on({
mouseenter: function () {
var originator = $(this);
var employeeId = originator.data('toggle-popup-employee-id');
$.get('#Url.Action("GetEmployeeDetails", "Evaluation")', { employeeId: employeeId }, function (data) {
originator.popover({
html: true,
placement: 'top',
title: 'Title',
container: 'body',
content: data,
}).popover('show');
})
},
mouseleave: function () {
//
// Destroy so the data will referesh
//
$(this).popover('destroy');
}
});
});
This way we are initialising the popover in the callback of the ajax request.
Hope this makes sense.

$('.popover.in .popover-inner').html(data);

Hide dynamic element on iframe

I have a page which uses colorbox to load an iframe(proprietary information).
I need to hide an element in the iframe(takes a few seconds to load) with a specific class.
I tried this with no success. The console messages are not hit. One they are hit, I can then hide them using jQuery css.
$(function () {
'use strict';
$(".className").ready(function () {
console.log("className on class ready");
$(".className").css("display", "none");
});
$(document).on("ready", ".className", function () {
console.log("className on document ready");
$(".className").css("display", "none");
});
});
Colorbox init:
function ShowColorbox(fileId) {
'use strict';
var colorboxUrl = getColorBoxUrl();
$.ajax({
type: "GET",
url: colorboxUrl,
dataType: "json",
timeout: 30000,
success: function (previewLink) {
$.colorbox({ href: previewLink, iframe: true, width: "90%", height: "90%" });
},
error: function (jqXhr, textStatus, errorThrown) {
alert("failed");
},
complete: function () {
// Do nothing
}
});
}
Plain CSS approach(did not work either):
<style>
.className .UITextTranformUpperCase {
display: none;
}
</style>

Your colorbox uses a dynamic url for content. You have to be sure that the content is loaded before finding elements.
You just have to set the fastIframe property to false and add an onComplete handler and it should work :
$.colorbox({
href: previewLink,
iframe: true,
width: "90%",
height: "90%",
fastIframe: false,
onComplete : function() {
$('#cboxIframe').contents().find('.className').hide();
}
});
Please just verify that your colorbox iframe has the id cboxIframe. If not, update the iframe selector

This is the way I have done it in the past:
$('iframe.yourclass').load(function(){
$iframe = $('iframe.yourclass').contents();
$iframe.find('.class-selector').css('display','none');
});
However if the iframe is on the same domain, can you not write simple css to target the element. Or maybe you do not have access to the css?

How to refresh the bubbles content via ajax rather than refreshing entire bubble?

I am using the qtip2 Jquery plug-in to provide suggestions on keyup in an input but what I would like to do is instead of refreshing the entire tool-tip bubble every time the content is updated id rather just refresh the content of the tool-tip without closing it.
So effectively if there is no tool tip present it will show the tool-tip and call the content via Ajax but if there is an existing tool-tip it will just update the content of the existing tool tip.
http://jsfiddle.net/fDavN/11723/
Ok Iv updated my code and it kinda works but I am getting an error: typeError: $(...).updateContent is not a function.
Anbody know why?
$(document).ready(function() {
var title = 'KnowledgeBase Suggestions';
$('#name').on("keyup", function () {
if($(this).data('qtip') ) {
var getFormUrl = "http://qtip2.com/demos/data/owl";
$.ajax({ url: getFormUrl,
success: function (data) {
$(this).updateContent($(".qtip-content").html(data));
}
});
}
else {
$(this).qtip({
content: {
text: "Loading...",
ajax:{
url: 'http://qtip2.com/demos/data/owl', // Use href attribute as URL
type: 'GET', // POST or GET
data: {}, // Data to pass along with your request
success: function(data, status) {
// Process the data
// Set the content manually (required!)
this.set('content.text', data);
}
},
title: {
button: true,
text: title
}
},
position: {
my: 'top left',
at: 'center right',
adjust: {
mouse: false,
scroll: false,
y: 5,
x: 25
}
},
show: {
when: false, // Don't specify a show event
ready: true, // Show the tooltip when ready
delay: 1500,
effect: function() {
$(this).fadeTo(800, 1);
}
},
hide: false,
style: {
classes : 'qtip-default qtip qtip qtip-tipped qtip-shadow', //qtip-rounded'
tip: {
offset: 0
}
}
});
}
});
});

A stab in the dark as I don't know what updateContent does but you might have an issue with how you are referencing $(this)
try changing
$('#name').on("keyup", function () {
var $this = $(this);
if($this.data('qtip') ) {
var getFormUrl = "http://qtip2.com/demos/data/owl";
$.ajax({ url: getFormUrl,
success: function (data) {
$this.updateContent($(".qtip-content").html(data));
}
});
}
else {
....
the reason is this is a different this when inside the ajax callback

jquery noty on close goto a url

i'm using the jquery noty plugin and when someone clicks the popup, i want it to goto a URL (below) but i cant figure this out... can someone give me a quick fix.. ?
URL i want it to goto: script.php?hidenoty=true
<script type="text/javascript">
function generate(layout) {
var n = noty({
text: "<?php echo $motd?>",
type: 'warning',
dismissQueue: true,
layout: layout,
theme: 'defaultTheme',
animation: {
open: {height: 'toggle'},
close: {height: 'toggle'},
easing: 'swing',
speed: 500 // opening & closing animation speed
},
timeout: false, // delay for closing event. Set false for sticky notifications
force: false, // adds notification to the beginning of queue when set to true
modal: false,
maxVisible: 3, // you can set max visible notification for dismissQueue true option
closeWith: ['click'], // ['click', 'button', 'hover']
callback: {
onShow: function() {},
afterShow: function() {},
onClose: function() {
$.ajax({ url: 'script.php?hidenoty=true' });
},
afterClose: function() {}
},
buttons: false // an array of buttons
});
console.log('html: '+n.options.id);
}
function generateAll() {
generate('topCenter');
}
$(document).ready(function() {
generateAll();
});
</script>

Change this line...
$.ajax({ url: 'script.php?hidenoty=true' });
to this...
window.location.href = 'script.php?hidenoty=true';
ajax is used specifically to load something without changing the page, so the opposite of what you want :)

Why does the Jquery dialog keep crashing on $(this)?

I am having a hell of a time trying to figure out why the code below crashes when the dialog is closed or cancelled. It errors on lines that use ($this) in the dialog button function.
For some reason if I hard code values into addTaskDialog.html(AddTaskForm); it works. I have even hardcoded the returned ajax form and it worked... This problem happens in all browsers.
$(function ()
{
/*
* Initializes AddTask Dialog (only needs to be done once!)
*/
var $dialog = $('<div></div>').dialog(
{
width: 580,
height: 410,
resizable: false,
modal: true,
autoOpen: false,
title: 'Basic Dialog',
buttons:
{
Cancel: function ()
{
$dialog.dialog('close');
},
'Create Task': function ()
{
}
},
close: function ()
{
$dialog.dialog('close');
}
});
/*
* Click handler for dialog
*/
$('#AddTask').click(function ()
{
/* Ajax request to load form into it */
$.ajax({
type: 'Get',
url: '/Planner/Planner/LoadAddTaskForm',
dataType: 'html',
success: function (AddTaskForm)
{
$dialog.html(AddTaskForm);
$dialog.dialog('open');
}
});
});
});
});

Ok I think I know what is going on. On your success callback you are referencing $(this) in AddTaskDialogOptions the problem is that the in this scope $(this) no longer refers to $("#AddTask") so you will need to set a variable to keep a reference to $(this) like so:
var that;
$('#AddTask').click(function ()
{
that = $(this);
/* Ajax request to load form into it */
$.ajax({
type: 'Get',
url: '/Planner/Planner/LoadAddTaskForm',
dataType: 'html',
success: function (AddTaskForm)
{
var addTaskDialog = $('<div></div>');
addTaskDialog.dialog(AddTaskDialogOptions);
addTaskDialog.html(AddTaskForm);
addTaskDialog.dialog('open');
}
});
});
var AddTaskDialogOptions = {
width: 580,
height: 410,
resizable: false,
modal: true,
autoOpen: false,
title: 'Basic Dialog',
buttons:
{
Cancel: function ()
{
that.dialog('close');
},
'Create Task': function ()
{
}
},
close: function ()
{
that.dialog('destroy').remove();
}
}

I figured it out. I'm not sure where I got this code, but it was causing the problems, so I took it out and it all works fine.
close: function ()
{
$dialog.dialog('close');
}