Encapsulating Ajax and JQuery in Tipped js
Posted By : Manish Gupta | 09-Sep-2017
We know the power of AJAX technology, and this power gets beauty with jquery.
It is a very common requirement in every web application to send an Asynchronous request to the server to get the data and use it without actually refreshing the current page and hence important for us know it.
In this blog, we will learn how to show a jsp page as a tooltip and render the data as per the requirement using JQuery(tipped.js).
All we need to do is described below:
Suppose, we need to open a jsp page as tooltip when the mouse "hover" over a "ShowName".
Step 1: Download and include the following javascript files and the css file in the header part of current page
<script type="text/javascript" src="/js/jquery/jquery-3.1.1.min.js"><script>
<script type="text/javascript" src="/js/tipped/tipped.js"></script>
<link rel=""stylesheet" type="text/css"> href="/css/tipped/tipped.css"/>
Step 2: Create a hyperlink.
<p class="customTooltip">
<a href="javascript:void(0);" name="myName">ShowName</a>
</p>
<p class="customTooltip">
<a href="javascript:void(0);" name="yourName">ShowName</a>
</p>
Step 3: Use Tipped plugin feature
$JQ(document).ready(function(){
tooltip();
})
function tooltip(){
$JQ("p.customTooltip").each(function(){
var link = $JQ("a", this);
var data = link.attr("name");
if(link.length){
var url = '/myPackage/MyTooltip.jsp';
url += '&data='+data;
link.attr({
"data-tipped": url,
"data-tipped-options" : "ajax:true, position: 'rightmiddle', cache: false"
});
Tipped.create(link);
}
});
}
Step 4: Prepare the jsp(MyTooltip.jsp)
<%
String name = request.getParameter("data");
%>
Name is:<%= name %>
-------------------------------------------------------------------------------------------------------------------
Thanks.
-------------------------------------------------------------------------------------------------------------------
Request for Proposal
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Manish Gupta
Manish is a Java Developer with hands on experience in Core Java, JSP, Spring framework, JavaScript, JQuery, HTML, CSS, and SQL/PL-SQL. Tools used: Eclipse, Netbeans, DBeaver, Oracle SQL Developer, Toad, MS SQL Server. He is a keen learner and technology