Java Discover: jQuery

Notify Popup using jQuery

Hi we may have seen notify popup in various websites like displaying messages to user for couple of seconds and disappears automatically. Its pretty simple by using notify.js file and just need to call notify method with message text along with its type as parameter (optional). Different messages types and notify styles are "success", "info", "warn" and "error".
Apart from basic notification we can get elements position notifications also with their different positions like left, right, top, bottom etc., For complete API details you can their official site http://notifyjs.com/

Lets see simple example for using notify in our web application.

SAMPLE CODE:

<html>
<head>
<script src="jquery-1.10.2.js"></script>
<script src="notify.min.js"></script>
</head>
<body>

<ul style="list-style:none;line-height:40px;">
<li><div onclick='$.notify("Steve Success Story...", "success");'>Click for SUCCESS</div></li>
<li><div onclick='$.notify("Get detail information on legal battle...", "info");'>Click for INFO</div></li>
<li><div onclick='$.notify("Carefull on public internet...", "warn");'>Click for WARNING</div></li>
<li><div onclick='$.notify("Oops, Page not found !!!", "error");'>Click for ERROR</div></li>
</ul>
</body>
</html>

OUTPUT:

Rich Dynamic Table using JQuery DataTable

jQuery

When we see about recent Web Developments and role of HTML 5, AJAX, jQuery UI and other plugins into the world of Web made more and more changes which brings rich UI and sophisticated enhancements for the end users. At the same time we need to know that all end user machines should be with updates and latest software versions.

We all may know that few months back Google has enhanced all its web products and asked all users to use browsers with latest version. And also by using AJAX we can get just piece of update information from server to client instead of requesting for complete web page. So it makes response as faster and less load to the web server.

In recent web development world we can see lot and lot of plugins and tools to develop web application. As a plugin which I have came across is DataTable plugin which gives more functionality and rich UI for the developers with just few line of code. Lets assume few years back if we need to display a table in web page with 5 to 6 columns and with 1000 rows. So developer need to keep in mind like Pagination, each column sorting, search, records editing and finally giving rich UI and they need to write code for each functionality and need to integrate with those tables.

But DataTable is one of the plugin which makes complete work into few integration steps. Now lets see simple example code as how to use DataTable.

In below example if we see table we have created with id "javadiscover_table" and same id has been associated with dataTable in jQuery ready function. Thats it, remaining things are related to our custom requirement and we can add multiple properties like search feature enable/ disable, page counts, custom column sorting etc., Also here we have used jQuery UI for our rich table look.

You can download complete code and supporting js and css files in below link.

DataTable Example Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<html>

 <head>
  <link rel="stylesheet" href="dtable.css"/>
  <link rel="stylesheet" href="jquery-ui-1.8.4.custom.css"/>
  <script type="text/javascript" charset="utf-8" src="jquery.js"></script>
  <script type="text/javascript" charset="utf-8" src="jquery.dataTables.js"></script>
  
  <script type="text/javascript" charset="utf-8">   

   jQuery( document ).ready(function( jQuery ) {
     $('#javadiscover_table').dataTable( {
      "sDom": '<"top"iflp<"clear">>',
      "aaSorting": [[ 4, "desc" ]], // Column sorting
      "bJQueryUI": true

     } );    
   });
   
  </script>
  
 </head>

 <body>
  <table cellpadding='0' cellspacing='0' border='0' class='display' id='javadiscover_table'>
   <thead>
    <tr>
     <th>Source</th>
     <th>Destination</th>
     <th>Type</th>
     <th>IP Address</th>
     <th>Start Time</th>
     <th>End Time</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Source</th>
     <th>Destination</th>
     <th>Type</th>
     <th>IP Address</th>
     <th>Start Time</th>
     <th>End Time</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td>Raj</td>
     <td>Sundar</td>
     <td>Audio Call</td>
     <td>10.70.54.81</td>
     <td>2013-10-29 09:10:57</td>
     <td>2013-10-29 09:11:14</td>
    </tr>
    <tr>
     <td>David</td>
     <td>Anand</td>
     <td>Audio Call</td>
     <td>10.70.54.83</td>
     <td>2013-10-29 09:46:34</td>
     <td>2013-10-29 09:46:59</td>
    </tr>
    <tr>
     <td>Rex</td>
     <td>Bill</td>
     <td>Video Call</td>
     <td>10.70.54.40</td>
     <td>2013-10-29 10:09:18</td>
     <td>2013-10-29 10:09:30</td>
    </tr>
    <tr>
    <td>Alex</td>
     <td>Gates</td>
     <td>Video Call</td>
     <td>10.70.53.123</td>
     <td>2013-10-29 10:38:14</td>
     <td>2013-10-29 10:38:17</td>
    </tr>
    <tr>
     <td>Steve</td>
     <td>Ronald</td>
     <td>Audio Call</td>
     <td>10.70.53.221</td>
     <td>2013-10-29 10:38:30</td>
     <td>2013-10-29 10:39:13</td>
    </tr>
    <tr>
     <td>Jobs</td>
     <td>Zen</td>
     <td>Video Call</td>
     <td>10.70.54.190</td>
     <td>2013-10-29 10:50:52</td>
     <td>2013-10-29 10:51:22</td>
    </tr>
    <tr>
     <td>Tim</td>
     <td>Tony</td>
     <td>Audio Call</td>
     <td>10.70.54.194</td>
     <td>2013-10-29 10:52:04</td>
     <td>2013-10-29 10:53:12</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

OUTPUT:

Notify Popup using jQuery

Rich Dynamic Table using JQuery DataTable

Get updates in your email box

Recent Posts

Labels

Category

Labels

Services

More Category

Followers