I have a jquery web service that affects css class of tooltip on the same page.
The problem is this; when the page initially loads, tooltip css works fine, but after web service call vith a button on page, tooltip class lost and it is shown as standard view. What will cause this?
c# Code Block
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace SampleWeb {
public partial class Sample: System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
if (!IsPostBack) {
GetDataForPageLoad();
}
}
public void GetDataForPageLoad() {
StringBuilder sb = new StringBuilder();
lblData.Text = string.Format("<a title=\"click to view topic {0}.\" class=\"masterTooltip\"><img width=\"50px\" src='images/Chrysanthemum.jpg' alt=\"{0}\" /></a><br/>", "XXX");
}
[WebMethod]
public static string GetData() {
return string.Format("<a title=\"click to view topic {0}.\" class=\"masterTooltip\"><img width=\"50px\" src='images/Chrysanthemum.jpg' alt=\"{0}\" /></a><br/>", "XXX");
}
}
}<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Sample.aspx.cs" Inherits="SampleWeb.Sample" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>test</title>
<style type="text/css">
.tooltip {
display: none;
position: absolute;
border: 1px solid #b83e3e;
background-color: #d84949;
border-radius: 5px;
padding: 5px;
color: #fff;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function GetData() {
$.ajax({
url: 'http://localhost:6878/Sample.aspx/GetData',
type: 'POST',
data: '',
dataType: 'json',
contentType: 'application/json',
success: function(data) {
var obj = document.getElementById("lblData");
obj.innerHTML = obj.innerHTML + data.d;
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input id="Button1" type="button" value="Get" onclick="GetData();" />
<br />
<br />
<asp:Label ID="lblData" runat="server" Text=""></asp:Label>
<script type="text/javascript">
$(document).ready(function() {
// Tooltip only Text
$('.masterTooltip').hover(function() {
// Hover over code
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
}, function() {
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip')
.css({
top: mousey,
left: mousex
})
});
});
</script>
</form>
</body>
</html>I'm not certain, but I suspect this line is your problem:
obj.innerHTML = obj.innerHTML + data.d;
You hook up your tooltips with this line:
$('.masterTooltip').hover(function() {
which hooks up a hover handler on all .masterTooltip elements on the page ... at that moment (with "that moment" being when the page loads and triggers the DOM ready event).
But when you mess with the innerHTML of an element you are effectively removing the old elements and replacing them with new ones, and since you haven't hooked up a hover handler to those new ones, they don't work.
If I'm correct I see two possible solutions:
1) Put all that $('.masterTooltip').hover(function() { code inside a function. Call that function onReady, as you currently are, but then call it again after the innerHTML change to hook up the handler to the new elements
2) Don't remove the old elements at all; instead of using innerHTML to replace the old lblData contents:
var obj = document.getElementById("lblData");
obj.innerHTML = obj.innerHTML + data.d;
try using jQuery to just add a new element:
$('#lblData').append('<span>' + data.id + '</span>');
// I'm not even sure the span is needed, but I added it to be safe
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments