jQuery tablesorter plugin for data grids

I was searching for a new simple jQuery table plugin, only with sorting function. I came across a few. Testing a plugin should happen quickly. The plugin should be thrown out if it is not working even after 15 minutes! I neglected a few those malfunctioned when I tested.  I came across another plugin tablesorter

jquery-datagrid-plugin

Here is how I’ve added my table.

Added the below scripts.

http://code.jquery.com/jquery-2.2.0.min.js
http://code.jquery.com/ui/1.11.0/jquery-ui.js

Made suitable amendments on the following

  1. id
  2. class
  3. added thead and tbody tags


<table id="expenseList" class="tablesorter">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Info</th>
<th>Category</th>
<th>Amount</th>
<th>Currency</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

And finally,


$(document).ready(function() {
$("#expenseList").tablesorter();
alert("finished");
});
</script>

 

clay-horses-31.jpg
(c) https://3monthsinindia.wordpress.com

ToolTip with jQuery

Here is the tips for today. ToolTips are as useful as sign boards, aren’t they!

tooltip.PNG

 

<html>
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
	$(function(){
		$(document).tooltip();
	});
  </script>
</head>
<body>

Name: <input type="text" name="myname" id="myname" title="Enter your full name"/>
</body>
</html>

Menu with jQuery

Here is the snippet for today! Lets create a simple menu with jQuery.

menu

 


<html>
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
	$(function(){
		$("#menu").menu();
	});
  </script>
</head>
<body>
<div style="width:250px">
<ul id="menu">
	<li>India
		<ul>
			<li>Tamilnadu</li>
			<li>Andhra</li>
			<li>Maharashtra<li>
		</ul>
	</li>
	<li>Singapore</li>
	<li>Malaysia</li>
</ul>
</div>

</body>
</html>


Code snippet – accordion with jQuery

Here is another weekday tip. Let’s create an accordion.

accordion

<html>
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  //code.jquery.com/jquery-1.10.2.js
  //code.jquery.com/ui/1.11.4/jquery-ui.js
  
    $(function(){
        $("#myaccordion").accordion();
    });
  
</head>
<body>

Pongal

Celebrated in January

<h2>New Year</h2>

Celebrated in April

<h2>Ganesh chaturti</h2>

Celebrated in September

</body> </html>

 

Code snippet – Date Picker with jQuery

Here is the snippet for jQuery date picker.

calendar

<html>
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  //code.jquery.com/jquery-1.10.2.js
  //code.jquery.com/ui/1.11.4/jquery-ui.js
  
    $(function(){
        $("#mydate").datepicker();
    });
  
</head>
<body>

Date (Click for calendar): <input type="text" name="mydate" id="mydate"/>
</body>
</html>

The request sent by the client was syntactically incorrect

This seems to be a common error during form submission in Spring WebMVC. Hence finding the root cause behind this may be difficult.

I verified step by step and confirmed that my call reaches my controller. But it breaks with the following error.

400 The request sent by the client was syntactically incorrect

Rightly pointed out at http://stackoverflow.com/questions/20616319/the-request-sent-by-the-client-was-syntactically-incorrect-spring-mvc-jdbc-te this is my date issue. I had a date field in my form. You can check my previous post on how to add jQuery date picker.

Hence, I need to make some modifications.

I added the following initBinder() method in the controller.

@RequestMapping(value="/add_expense", method=RequestMethod.POST)
    public String addExpense(@ModelAttribute ExpenseDetail expenseDetail, Model model) {
        try {
            System.out.println("===> returning add_expense"+expenseDetail.getExpenseCurrency());
            model.addAttribute("expenseList", new ExpenseDAO().getExpenseRecords());
            model.addAttribute("expenseDetail", new ExpenseDetail());
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return "home";
    }
    
    public void initBinder(WebDataBinder binder){
        SimpleDateFormat sdf = new SimpleDateFormat("MM/dd/yyyy");
        sdf.setLenient(true);
        binder.registerCustomEditor(Date.class, new CustomDateEditor(sdf, true));
    }

28-1406550815-malarmalaikal

Enjoy!

Spring mvc and jQuery DatePicker

We have added a simple CSS using the ResourceHandlers.  Now, it is the time to test jQuery on a Spring MVC. First Step is to display the calendar object on the jsp.

Spring mvc and jQuery DatePicker

Insert the scripts and CSS to head part of jsp

http://code.jquery.com/jquery-1.10.2.js
http://code.jquery.com/ui/1.11.0/jquery-ui.js
<link rel=”stylesheet”
href=”http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css”&gt;

Add the following javascript. Replace expenseDate with your field id

$(document).ready(function() {
$(function() {
$(“#expenseDate”).datepicker();
});
});

Thats all. The calendar object should rendered on the browser window.