We Keep Coding

How to create a popover which shows some value from back-end, and the popover has to display on mouse-over a label in c#?

Is it Possible to do this in a simple way?
Can anybody answer please.....!
This is the code for label, on mouse over, the pop-over has to show
<asp:Label ID="lblAuditInfo" runat="server" Text="Audit Info"></asp:Label>
Thanks in advance,

You can use a Javascript library to render the popovers, e.g. qtip2. Instead of providing the content text directly, you can load it using AJAX. Here I use jQuery for the AJAX call.
function registerTooltip_(element) {
// load tooltip content from backend ...
var loadContent = function () {
return $.ajax({
url: 'http://backend.com/tooltip',
type: 'GET',
data: { id: element.id }, // provide parameters for backend here!
})
.done(function (html) { // backend returns tooltip text or HTML markup
return html;
});
};
element.qtip({
content: {
text: loadContent
},
show: 'mouseenter',
hide: 'unfocus mouseleave', // Unfocus = click anywhere but tooltip & target
});
}

why qtip tool tip is not showing pop up on first click ,from second click its showing the tool tip

UPDATED Question :: its working from left click on the node ,inaddtion to that from the right click also it should work for us..on right click-->properties,pop shpuld be displyed on the actual node not on right click menu..as shown below ..when i click do right click on node,i will get right click menu !when i click view properties pop up should be displayed on the nodenot on the right click menu
I have 10-15 nodes in a layout,all nodes will be dynamic,on click of each node ajax call needs to be made and results of the ajax results needs to be shown using qtip tool tip.below is the code of it .on first click it is not showing the pop up but from seconf click its showing tool tip.why its not showing the pop on first click?????
var str = "#JP"+ nodeId;
$(str).qtip({
content: {
text: 'Loading...',
ajax: {
url: 'url',
dataType : 'text',
type: 'GET', // POST or GET
data: {}, // Data to pass along with your request
success: function(data, status) {
alert(data);
this.set('content.text', data);
},error : function(msg, url, line){
alert('msg'+ msg);
}
}
}
});

Try using qTip2 (http://qtip2.com) and check this demo:
http://jsfiddle.net/craga89/L6yq3/
$('a').each(function() {
$(this).qtip({
content: {
text: function(event, api) {
$.ajax({
url: api.elements.target.attr('href') // Use href attribute as URL
})
.then(function(content) {
// Set the tooltip content upon successful retrieval
api.set('content.text', content);
}, function(xhr, status, error) {
// Upon failure... set the tooltip content to error
api.set('content.text', status + ': ' + error);
});
return 'Loading...'; // Set some initial text
}
},
position: {
viewport: $(window)
},
style: 'qtip-wiki'
});
});

Jquery not responding inside AJAX form results display

I've just started to really work in jquery and AJAX and for the most part I've seem to have the hang of it but this one little bit of code is not working.
I have a page that displays a summary of articles. When you click on the article name a popup window displays and the article information is show along with a X icon in the upper right hand corner that is to close the article window.
I'm handling the form processing via AJAX and it works great. The window pops up, all the proper information is displayed. The issue I am running into is the Close button function.
When you click on the close button, nothing happens. The jquery I have for it doesn't seem to respond. If I just use pure jquery/css the window appears and the close button works. If I handle the form with HTML/PHP it displays the window and the close button works.
Only when I handle the call via AJAX does the close button not respond and I am at a loss why this is.
Here is the simple jquery code for the close button:
$('.newsClose').click(function(){
$('#newsWindow').hide();
});
This is the AJAX call:
$(document).ready(function() {
$('#agentNewsForm').submit(function(e) {
e.preventDefault();
$.ajax({
type : 'POST',
data : $('#agentNewsForm').serialize(),
url : '/search/customer/agentNewsView.inc.php',
beforeSend : function() {
$('#processing').show();
},
error : function() {
$('#processing').hide();
$('#ajaxFormError').show();
},
// success callback
success : function (response) {
$('#processing').hide();
$('#newsWindow').html(response).show();
},
complete : function() {
$('#processing').hide();
},
timeout : 3000,
});
return false;
});
});
I'm sure it's something very simple that I am missing. Any thoughts?

$(document.body).on('click', '.newsClose' ,function(){
$('#newsWindow').hide();
});
See this SO:
Jquery event handler not working on dynamic content

Your code to close the window is only firing on document load, and your close button is inside #newsWindow, you can resolve this in one of two ways ...
$('#newsWindow>.content').html(response).show(); and keep your close button outside of the .content area.
or you can use the on method which will bind your close click on all new dom added to the document.
$(body).on('click', '.newsClose', function(e){ e.preventDefault; $('#newsWindow').hide(); });

Try this:
(function($){
var $newsWindow = $('#newsWindow');
$('body').on('click','.newsClose',function(e){
e.preventDefault();
$newsWindow.hide();
});
$('body').on('submit','#agentNewsForm',function(e){
e.preventDefault();
var $el = $(this);
var $process = $('#processing');
var $error = $('#ajaxFormError');
var _data = $el.serialize();
$.ajax({
type : 'POST',
data : _data,
url : '/search/customer/agentNewsView.inc.php',
beforeSend : function() {
$process.show();
},
error : function() {
$error.show();
},
success : function (response) {
$newsWindow.html(response).show();
},
complete : function() {
$process.hide();
}
});
});
})(jQuery);

Dynamic div content fades before it should

I know that jQuery has a tooltip object, but I wanted to get a few things straight making my own for launching into using something that I didn't fully understand. I want the content to be displayed dynamically, but first I tried my hand using:
css: .hiddenEl{display:none;}
$(document).ready(function () {
$('#showElement').click(function () {
getText()
});
function getText() {
$.ajax({
//...ajax options
success: function (data) {
//if I use this line of code when a div with
// class hiddenEl is already on the page, it works
$('.hiddenEl').text(data.d).fadeToggle();
//when I create the div dynamically it fades in
//,and immediately fades back out.
//var $div = $('<div>').addClass('.hiddenEl').text(data.d).appendTo('body').fadeToggle();
},
error: function (xhr) {
console.log('failed: ' + xhr.status);
}
});
}
});
I'd like to know why in the version where I'm filling the div with dynamic content that it fades back out once the animation is done and in the first one it works as expected (which means the div is hidden on the second click) and how I can fix it. Secondly, I'd like to see how my version compares to someone else's who might write their own custom tooltip
EDIT: here's a non-AJAX way that's doing the same thing.
$(document).ready(function () {
$('#showElement').click(function () {
getText()
});
var array = ['first', 'second', 'third'];
function getText() {
$.ajax({
success: function (data) {
console.log('success');
//if I use this line of code when a div with
// class hiddenEl is already on the page, it works
// $('.hiddenEl').text(data.d).fadeToggle();
//when I create the div dynamically it fades in
//,and immediately fades back out.
var $div = $('<div>').addClass('.hiddenEl').text(array).appendTo('body').fadeToggle();
},
error: function (xhr) {
console.log('failed: ' + xhr.status);
}
});
}
});

Jquery UI calendar in ajax loaded dialog

I have link with onclick="open_dialog" which opens jquery ui dialog. It loads its content with ajax and that content loads another content test2.php with ajax that has input tag with class="calendar". Problem is that, if i click on input it won't show any calendar. Maybe somebody knows why?
function open_dialog() {
var url = 'test.php';
var dialog;
if ($('#test').length) {
dialog = $('#test');
} else {
dialog = $('<div id="test" class="type_' + type + '" style="display:hidden;"></div>').appendTo('body');
}
dialog.load(
url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog({
open: function(event, ui) {
$('.calendar').datepicker();
}
});
}
);
return false;
}

Sorry, but i found the answer:
I had to call calendar in second ajax call like this:
$('#content_in_test_dialog').load(
'test2.php',
function(response, status, xhr) {
$('.calendar').datepicker();
}
);

At first you should to find the problem?
1) first add alert('first line of open_dialog function'); and check is call or not.
2) second check that is calendar added self html content to html page. May be it added self content, but some css style hide it.