here i m having a hovercard example.
i m retrieving a text from a webservice and appending it to the div "name" on the hovercard.
(here ajax part executes only for the first label in the page. Rest of the labels hovercard are blank )
Ur help is really appreciated...
=============================================================================
script part :
=====================================================
$(document).ready(function () {
var hoverHTMLDemoAjax = '<div id="name"></div>';
$('.hoverme').hovercard({
detailsHTML: hoverHTMLDemoAjax,
width: 350,
onHoverIn: function () {
callerajax();
},
});
});
function callerajax() {
$.ajax({
type: "POST",
url: "WebService.asmx/divdata",
data: "{ }",
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function () {
$('#name').text(" Before send Loading....");
},
success: function (data) {
var fetchedData = data.d;
$("#name").empty();
$('#name').text(fetchedData);
},
error: function () {
alert("ERROR");
},
});
}
==============================================================================
Html part :
=============================================================================
hii i m <label id="2" class="hoverme" cid='23453453453'>Sheetal Sharma</label>
<br />
<br />
hii i m <label id="1" class="hoverme" cid='13453534534'>Durgesh Sharma</label><br /><br />
<br />
<br />
hii i m <label id="Label1" class="hoverme" cid='13453534534'>Durgesh Sharma</label><br /><br />