Tag Archives: jQuery

jQuery selection copy

Posted on by

Here’s a jQuery scenario I encountered today at work. I found the solution interesting.

I have 2 identical selection dropdowns. When I select from the first one I want to copy the selection value into the second. However, I also have a change event attached to the second selection dropdown. In order to make sure I trigger the second dropdown’s change event, instead of doing:

$('#firstSelection').change(function() {
	$('#secondSelection').val($(this).val());
});

I have to do the following:

$('#firstSelection').change(function() {
	var selectedIndex = $(this).attr('selectedIndex');
	$('#secondSelection').attr('selectedIndex', selectedIndex).change();
});

Creative overlay/popup with jQuery

Posted on by

While doing a presentation on jQuery at work today, I went over a particular example I put together earlier today. I thought I’d share it with you here.

In the past, we have used popups for editing values inside of a input box. The most well known example I can think of is smilies on a forum script.

There are shortcuts to insert smilies on the right side of the your textarea. Then if you want more, you click on the more link. A popup window shows up, in the new window, you may click on any of the smiley to insert the shortcut into the textarea where your post is.

There is nothing wrong with the old way. It’s working fine but I believe there is a better way to handle this kind of scenario.

Take a look at this example. (More complete example)

When you click on “Edit Input”, a layer slides out and then if you click on anywhere else on the page to indicate you are done with that input field, the layer goes away. On the layer that slides out, you may display more smiley shortcuts.

Benefits of the new way:

  1. You are not making another http request
  2. You are not opening another window so you don’t have to worry about popup blockers
  3. You don’t have to worry about the parent window child window crap in javascript
  4. The layer is on the same page as your regular input, it’s a lot easier to access its content
  5. Your code is probably is easier to understand.

HTML:

<div class="editing"><span id="trigger">Edit Input</span>
<div id="toolWrapper">Some kind of editing tool</div>
</div>

Very simple. Just an input box with a layer next to it. Within the layer is a trigger link (you may use an nice image icon if you wish).

CSS:

#trigger {
	cursor: pointer;
}
#toolWrapper {
	position:absolute;
	z-index:100;
	top:20px;
	left:20px;
	background:#eee;
	border:1px solid #111;
	display:none;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	width:250px;
	padding-right:20px;
	height:200px;
}
div.editing {
	position: relative;
	display: inline;
}

The CSS utilizes the positioning trick. The outer wrapper (div.editing) is relatively positioned so the insider layer (#toolWrapper) may be positioned absolute to the outer one.

jQuery:

$(function() {
	$("#trigger").click(function() {
		$('#toolWrapper').toggle(function() {
			$(document).click(function(event) {
				if (!($(event.target).is('#toolWrapper') || $(event.target).parents('#toolWrapper').length || $(event.target).is('#trigger'))) {
					$('#toolWrapper').hide(500);
				}
			});
		});
	});
});

Uses the new toggle(showOrHide) method – the logic depends on where you click on the page. I will let you digest it yourself. Read the jQuery api if you need :)

Now take a look the time editor I wrote for work. It uses the slider widget from jQuery UI. I will not go over the javascript used. Feel free to view source if you are curious.

jQuery just got a new forum!! WOOHOO. I never liked discussion groups anyway. Forum is much more preference community format for me.

Firebug command line

Posted on by

If you do any javascript programming at all, you absolutely need to get the firebug plugin for firefox. It’s by far the best free tool out there. I’ve had the plugin since it first came out. However, I just learned about its command line feature today when I was reading this peeling away jQuery wrapper post.

How did I miss such any important new feature? Once you can get auto updates for plugins for firefox, you stop visiting the plugin site. So you don’t really pay attention to all of its new features. I am however extremely happy to learn about it today.

firebug command line

jQuery tip: Did you know you could prevent an event from executing more than once by doing

$("#someAnchorId").one("click", function(){
    //implementation
});

Mystique Theme

Posted on by

I spent most of the day customizing the Mystique wordpress theme. The theme is ridiculously great. It has all of the features I’d ever dream of. In fact, I got rid of some of my plugins + widgets because this theme covers them.

Also, the theme author uses jQuery on all of the UI effects. Another score for jQuery :)

YOU + YOU rule my world! Thank you!

Added a new page Nostalgic Old Layouts.

Why I prefer jQuery over YUI

Posted on by

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 Text Counter

Posted on by

I needed a text counter at work. I searched around trying to find a jQuery plugin that fits the bill but I didn’t find anything. So I wrote one myself. Check it out :) It should be pretty flexible.

  • Requires jQuery
  • Define the maximum of characters the user may input
  • May be applied to one or more input text or textarea fields
  • Also disable the user from entering more characters after s/he reaches the maximum

Live demo + Documentation + Download

Dodo's Picklist

Posted on by

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.

Dodo's Picklist

Live demo + Documentation + Download

new millennium with web 2.0

Posted on by

After much anticipation, it’s finally here!!

I present you the completely rewritten New Millennium – New Millennium with web 2.0 :)

It’s done in ajax with the help of jQuery. The idea is to create a site with no page refresh. Although it was fun, toward the end it was getting a bit tedious. I felt like doing a cross-stitch. Overall, I found ajax coding with no IDE support hard to debug. Some of the bugs eluded me quite a bit. I’ve done extensive testing on the final product. I hope it’s a good one.

It has been a very nice learning experience. I think jQuery is awesome but it’s a client side only library. So if I go try GWT and I should have a very good comparison.

jQuery and Tamper data rock

Posted on by

I’ve been working on a UI design at work and some of the build in components have border=”1″ on their generated table code. To achieve a consistent look, I always want border=”0″ on the table so I can control the table border with CSS. There is no way as far as I know you can get rid of the table border with CSS once the source have border=”1″ in the table tag. But you can get rid of all table borders with this single line of code in jQuery:

$("table[border!='0']").attr("border", "0");

It completely rules!!

While debugging, I also found this awesome Firefox plugin: Tamper data. It lets you hijack a post/get http request on the fly so you can view and modify the submitted parameters. I used to use WebScarab. But this is so much lighter weight. Although it only works in Firefox while WebScarab, a proxy server, would work with any browsers.