Loading ...Posts tagged with ‘plugin’
Why I prefer jQuery over YUI
October 11th, 2008
While at work, I was trying to find a way to easily do server side pagination without writing all the lovely logic myself. Due to some constraints, I am unable to use more high end framework such as JSF and struts. Which in a way I believe is a good thing. I would have more control over just writing servlets. However, having written pagination logic before, I really did not want to write that again. Somehow I thought of jQuery. Just for amusement, I looked for jQuery pagination plugin and guess what I found it! By using this plugin, I can pass in some simple parameters such as total records, records per page, number of pages shown etc. to have jQuery generate a paginator for me. That’s beyond cool so I put it into action.
Upload Report Mock uses the jQuery pagination plugin but handles the pagination on the server side via php.
Ultimately what I also want to handle is the following scenario:
- I have a table of data, one of the column is editable.
- If the user clicks on the column of a particular table row, a modal window will pop up asking for additional information.
- The user fills out the information and submits.
- The window updates the info for that table via AJAX and updates the results screen
While I was eager for figure out how to accomplish that in jQuery, I found out that it is not one of the previously used javascript framework at work so they asked if I could look into YUI.
Digging into YUI, first I tried to accomplish the same thing using the YUI paginator widget. I spent two hours but it really does not seem like I can generate some href tags with this component like I could with the jQuery plugin. With jQuery, I could produce:
<div id="pagination">
<a class="prev" href="/work/eAdjusterActivityReport/uploadReport.php?page=1">Prev</a>
<a href="/work/eAdjusterActivityReport/uploadReport.php?page=1">1</a>
<span class="current">2</span>
<a href="/work/eAdjusterActivityReport/uploadReport.php?page=3">3</a>
<a href="/work/eAdjusterActivityReport/uploadReport.php?page=4">4</a>
<a href="/work/eAdjusterActivityReport/uploadReport.php?page=5">5</a>
<a href="/work/eAdjusterActivityReport/uploadReport.php?page=6">6</a>
<a href="/work/eAdjusterActivityReport/uploadReport.php?page=7">7</a>
<a href="/work/eAdjusterActivityReport/uploadReport.php?page=8">8</a>
<span>...</span>
<a href="/work/eAdjusterActivityReport/uploadReport.php?page=10">10</a>
<a href="/work/eAdjusterActivityReport/uploadReport.php?page=11">11</a>
<a class="next" href="/work/eAdjusterActivityReport/uploadReport.php?page=3">Next</a>
</div>
With YUI, I have to hook up the paginator with another javascript or YUI widget. So to make things easier, I looked into YUI’s datatable component and found an example to use it with server side pagination and sorting. That seems to accomplish the overall need of pagination. Although that’s a bit of overkill but I thought it’s worth a shot. I spent 8 hours implementing it via server side JSON. Here’s what I produced:
Upload Report Mock with YUI
Instead of 10 lines of javascript code like the previous, this one has 68 lines. But it does provide AJAX pagination so I thought that’s mostly fair.
Next I looked for a simple date picker calendar in YUI like the jQuery date picker plugin. The date picker is a necessary functionality of the application. With jQuery, it’s extremely easy to use. You add the plugin js & css links, and then you give your input css class or unique IDs and with jQuery selector, just call the plugin via:$("#startDate").datepicker()
Click on the start and end dates in Upload Report Mock to see it in action.
Using YUI, I looked into its calendar component. The closest thing I could find is this example.
Not only would it need all these extra js includes
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/event/event-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/button/button-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/container/container-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/calendar/calendar-min.js"></script>
It also requires another 76 lines of javascript code for just adding one date picker.
Despite the complication, I tried to make it work with my Upload Report Mock with YUI but I failed pretty miserably. Sure if I put in enough hours, I will eventually make it work but WHY? Why would you stop yourself from using something else that takes 2 seconds?
At this point, I presented my findings to my co-workers. I really hope they will accept jQuery. Yea sure it’s yet another new javascript framework but it will save coding time.
Here’s another comparison. I found a very YUI datatable like jQuery plugin flexigrid. Take a look at example 3. Lines of code to use server side pagination and sorting: 33. In my Upload Report Mock with YUI, I used 68 lines. Also let’s do a comparison to see which one makes more sense and is less verbose.
jQuery:
$("#flex1").flexigrid({
url: 'post2.php',
dataType: 'json',
colModel : [
{display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
{display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
{display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
{display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
],
buttons : [
{name: 'Add', bclass: 'add', onpress : test},
{name: 'Delete', bclass: 'delete', onpress : test},
{separator: true}
],
searchitems : [
{display: 'ISO', name : 'iso'},
{display: 'Name', name : 'name', isdefault: true}
],
sortname: "iso",
sortorder: "asc",
usepager: true,
title: 'Countries',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 700,
height: 200
}
);
YUI: click for source.
Dodo’s Picklist
March 23rd, 2008
I needed a pick list script at work. I looked around and found a jQuery plugin but it didn’t do all I wanted so I modified it. I thought I’d share my final results with you. I will contact the original author to see if he wants to include my changes to his version as well.
- Requires jQuery
- A modified version of jqmultiselects jQuery plugin
- Select options sorting code taken from select box manipulation
- Choose one or more to add or remove. Or add all or remove all at once
- Options are sorted to keep them in the same order
jQuery plugin – tableRowCheckboxToggle
February 26th, 2008
So since I’ve been playing with jQuery on my spare time while putting together an ajax site, I’ve decided to tackle a design issue I’ve run into many times at work with jQuery. This idea originally comes from phpMyAdmin. If you’ve used that software, you know that when you click on any table row, it automatically toggles the checked state of the checkbox in the first cell. I think that’s an extremely user friendly thing to have since checkboxes are so small and hard to click on.
Let me present you my friends, my first jQuery plugin. It generically adds the toggle function to any table rows you specify based on the css class names. It will by default toggle any checkboxes within the table row. However, you can manually exclude checkboxes based on name, id or css classes in the script. In addition to the phpMyAdmin function, I added an initialization step in the script that correctly marks a row when it’s considered checked on page load.
tableRowCheckboxToggle
- It generically adds the toggle checkbox function to any table rows you specify based on the css class names.
- It will by default toggle any checkboxes within the table row.
- You can manually exclude checkboxes based on name, id or css classes in the script.
- If there is any applicable checkboxes inside of the table row that are checked, it will apply a class to the table row.
- It also marks table rows when there are checked applicable checkboxes on page load.
