JSP is still a popular technology for developing view part of Struts and Spring based Java application, but unfortunately it doesn't have rich UI support available in GWT, or any other library. On other day, we had a requirement to display HTML tables inside tabs, basically we had two tables of different data set and we need to display them in their own tabs. User can navigate from one tab to other, and CSS should take care of which tab is currently selected, by highlighting active tab. Like many Java developers, our hands on HTML, CSS and JavaScript is little bit tight than a web guy, and since our application is not using any UI framework, we had to rely on JSP to do this job. Since display tag is my favourite, I had no problem to dealing with tabular data, our only concern was how we will develop tabbed UI by just using HTML, CSS, JavaScript or may be jQuery. It looks everything is possible with these technology, we eventually able to develop our JSP page, which can show data in tabs. So if you need to create tabs in JSP page, you can use this code sample, all you need to ensure is you have required libraries e.g. display tag library, JSTL core tag library and jQuery. I will explain you step by step how to create tabs in html or jsp page.
Read more �
Showing posts with label JQuery. Show all posts
Showing posts with label JQuery. Show all posts
Monday, February 17, 2014
Wednesday, December 25, 2013
How to redirect a page or URL using JavaScript and JQuery
Redirecting a web page means, taking user to new location. Many website use redirect for many different reasons, e.g. Some website redirect user from old domain to new domain, some redirect from one page to another e.g. a more relevant page. If you are Java programmer, and worked previously with Servlet and JSP, then you might be familiar with SendRedirect and Forward methods, which are used to redirect user in web applications. Actually there are two kinds of redirect, Server side redirect and client side redirect. In Server side redirect, server initiate redirection, while in client side redirect, client code does the redirection. Redirecting a web page using JavaScript and JQuery is a client side redirection. Well, HTTP redirection is a big topic and different people do it differently. e.g. bloggers mostly used platform like WordPress, Blogger feature to redirect a page, though this might be restricted to same domain. In this JavaScript and JQuery tutorial, we will learn a new JQuery tip to redirect a page.
Monday, October 28, 2013
How to use multiple JQuery UI Date Picker or Datepicker in HTML or JSP page
We often needs to use multiple JQuery date picker in one HTML or JSP page, classical example is online flight booking for return trips, where you need to pick departure date and arrival date from two separate datepickers. While designing HTML forms either statically or dynamically using JSP, you may want to associate date picker with multiple input text field, paragraph or any other HTML elements. By using JQuery UI and some help from CSS ID and class selector, we can easily use multiple datepicker in one HTML page. All you need to do is, declare a CSS class say .datepicker and apply that class to all HTML elements which needs date picker, for example we have associated date picker with 4 input text fields, which has .datepicker class. By using a class, it becomes extremely easy to select all those elmeent using JQuery class selector, and once you got all those element, you can just call datepicker() methos. This method does all the hard-work and associate a date picker object with selected items, that's it. Now you are ready to use multiple date picker in your HTML or JSP page, let's see the complete code. By the way if you are just starting with jQuery than I highly recommend Head First Query, it�s easy to read and contain some non trivial example to learn jQuery quickly.
Thursday, August 22, 2013
3 CDN URL to load jQuery into Web Page from Google, Microsoft
jQuery is one of the most popular and powerful JavaScript library, but in order to use it, you need to load into your webpage using standard HTML <script> tag. Based on whether your webpage is public accessible or for a organization, you can either choose to load jQuery library from local file system, bundled inside your web application or you can directly download using one of the content delivery network (CDN) e.g. Google or Microsoft CDN. Choosing CDN to download jQuery can offer a performance benefit because there servers are spread across the globe. This also offer an advantage that if visitor of your site has already downloaded a copy of jQuery from the same CDN, then it won't have to be re-downloaded. By the way if you want to bundle jQuery into your web application or want to load it from local file system, you can always download latest version of jQuery from jQuery site at http://jquery.com. Installing jQuery required this library to be placed inside your web application and using the HTML <script> tag to include it into your pages e.g. <script type="text/JavaScript" src="scripts/jquery-1.10.2.js"></script>. jQuery site offers compressed and uncompressed copies of jQuery files, uncompressed file is good for development and debugging, but can slow down page loading if used in production. Compressed file saves bandwidth and improves performance inproduction. In this article, I am sharing couple of CDN URLs from where you can directly load jQuery files into your web page, this includes popular Google CDN, jQuery CDN and Microsoft CDN.