Link for all dot net and sql server video tutorial playlists
Link for slides, code samples and text version of the video
In this video, we will discuss how to retrieve tooltip text from database and display using jquery tooltip widget.
The tooltip text should be retrieved from the database using ajax and display it using jquery tooltip widget
Stored procedure to retrieve tooltip text by fieldname
Create proc spGetTooltip
@FieldName nvarchar(50)
as
Begin
Select * from tblTooltip
where FieldName = @FieldName
End
WebService
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;
namespace Demo
{
[WebService(Namespace = ”
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class TooltipService : System.Web.Services.WebService
{
[WebMethod]
public void GetTooltip(string fieldName)
{
string cs = ConfigurationManager.ConnectionStrings[“DBCS”].ConnectionString;
Tooltip tooltip = new Tooltip();
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand(“spGetTooltip”, con);
cmd.CommandType = CommandType.StoredProcedure;
SqlParameter parameter = new SqlParameter();
parameter.ParameterName = “@FieldName”;
parameter.Value = fieldName;
cmd.Parameters.Add(parameter);
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
tooltip.FieldName = rdr[“FieldName”].ToString();
tooltip.TooltipText = rdr[“TooltipText”].ToString();
}
}
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(tooltip));
}
}
}
jQuery code
$(document).ready(function () {
$(‘.displayTooltip’).tooltip({
content: getTooltip
});
function getTooltip() {
var returnValue = ”;
$.ajax({
url: ‘TooltipService.asmx/GetTooltip’,
method: ‘post’,
data: { fieldName: $(this).attr(‘id’) },
dataType: ‘json’,
async: false,
success: function (data) {
returnValue = data.TooltipText;
}
});
return returnValue;
}
});
HTML
<table>
<tr>
<td>First Name</td>
<td>
<input id=”firstName” class=”displayTooltip” title=”” type=”text” />
</td>
</tr>
<tr>
<td>Last Name</td>
<td>
<input id=”lastName” class=”displayTooltip” title=”” type=”text” />
</td>
</tr>
<tr>
<td>Department</td>
<td>
<input id=”department” class=”displayTooltip” title=”” type=”text” />
</td>
</tr>
</table>
