Chennai T Nagar

Hide blocks in jQuery

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
  $("content").click(function(){
	$(this).hide();
  });
  $("#myid").click(function(){
	$(this).hide();
  });
  $(".myclass").click(function(){
	$(this).hide();
  });
});
</script>
</head>
<body>

<p>I am a paragraph</p>
<content>I am a content</content>
<ul id="myid">
<li>I am an unordered list identified as myid</li>
</ul>

<div class="myclass">
I am a div identified as myclass
</div>

</body>
</html>

The above snippet will help to hide the given blocks like in paragraph, content and unordered list blocks.

Initially it blocks everything. When we click any of the blocks, it will hide. After clicking the paragraph in the first line, this is what you see.

This helps to hide standard blocks using its tag or id or class names!

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

		<sc ript type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></sc ript>
		<sc ript type="text/javascript" src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></sc ript>
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

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.

Hiding a paragraph element with #jQuery

Way to Struts 1.2 DataSource

This post assumes you’ve downloaded the jquery js file and saved it in the same folder.

Code:

<html>
<head>
<script src="jquery-1.9.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>HIDING A PARAGRAPH ELEMENT WITH jQUERY</h2>
<p>THIS IS PARA 1.</p>
<p>THIS IS PARA2.</p>
<button>Click me</button>
</body>
</html>

Try it and let me know!

jquery – starter tutorial #4

If you haven’t checked the previous posts, please check the following
jquery – starter tutorial #3
jquery – starter tutorial #2
jquery – starter tutorial #1

We can more styles and animations. But I am too lazy to write all of those items here. But I feel I like to make a note of AJAX requests. One of the example below

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").load('01.html');
  });
});
</script>
</head>
<body>

<div><h2>Let AJAX change this text</h2></div>
<button>Change Content</button>

</body>
</html>