If you use apache log4j, you can get very frustrated sometimes that it does not log based on what you defined in your log4j.properties file. This is because if your java web application contains other jars that also have log4j.properties, the log4j will use the first log4j.properties on the classpath which most of the times is NOT what you defined for your web app. I never knew a solution to this until recently my coworker was able to use spring to get around it. In your spring context, add
<bean class="org.springframework.beans.factory.config.MethodInvokingFactoryBean"> <property name="targetClass" value="org.springframework.util.Log4jConfigurer"/> <property name="targetMethod" value="initLogging" /> <property name="arguments"> <list> <value>log4j.properties</value> </list> </property> </bean>
This will make sure the one you defined for your web app is used.

Also I recently wrote a groovy script in ant. I learned that you can use ivy to cache as instance of a jar and then you can use it in your ant script.
<target name="groovyScript"> <ivy:configure url="http://ivy.rainhail.com/ivyRepository/ivysettings.xml" /> <ivy:resolve conf="ant"/> <ivy:cachepath pathid="cp" conf="ant"/> <taskdef name="groovy" classpathref="cp" classname="org.codehaus.groovy.ant.Groovy"/> <groovy> <!-- your groovy script here --> </groovy> </target>

Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

A while ago, I blogged about the SIFR 3. And there are many other solutions to render text in fonts that your client’s machine does not have. For example, generating the text as an image. BTW wasn’t there a wordpress plugin that does this? I wasn’t able to find it in my quick search. Can someone enlighten me?

One thing I hate about all these solutions is that you may no longer highlight the text in order to copy its content in all the browsers I know. It just bugs me to no end when expected browser behaviors get changed because you want some fancy fonts for your site.

I wish more browsers would implement the @font-face css rule so maybe then we can get around this issue?

Other frameworks are just not as user friendly IMO.

Here’s the scenario.

While coding javascript along, you get a form via id or name on your html page and calls the submit() function on it. You think it should just behave as expected (submits the form) instead nothing happens and in firebug, you get a submit is not a function error. You are like WTF is going on? You start to wonder if you remembered the syntax correctly so you do some research and all the pages tell you yes it’s just submit() and nothing else.

Finally you start to search on the error “submit is not a function” you get to this page and you learned:

The reason was the statement “formObj.submit();” in the javascript was colliding (resulting in ambiguity within the browser) with the form button, which was also named “submit”.

So just rename the element within the form tag that is named “submit” will fix the problem.

Here’s an example.

HTML:
<form id="search"><input name="something" /><input type="submit" name="submit" /></form>

Javascript:
function submitForm() { document.getElementById('search').submit(); }
gives “submit is not a function” error.

Change HTML to:
<form id="search"><input name="something" /><input type="submit" name="NOT_SUBMIT" /></form>

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.

• 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

• 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

Live demo + Documentation + Download

Just when I thought I was 100% done with the revamp of New Millennium, I noticed an UI issue in IE. I’m surprised I didn’t notice this before. It shouldn’t be anything new. I did some google research but didn’t find anyone mentioning it either.

Applying background image to input tags should be nothing new. You see the little search icons for search inputs all over the web now but did anyone notice in IE if you have a background image set to no-repeat and someone puts some very LONG text in the input field, the background image SCROLLS with the text? This causes very odd behavior.

Here’s my input background-image. I pick this one so I can do background image affect on hover by manipulating background-position.

CSS:
input.formInput { width: 255px; background: #a99787 url(formInput.gif) left top no-repeat; border: 0; padding: 3px; height: 22px; color: #302721; } input.formInput:hover, input.formInput:focus { background-position: -261px top; }

In Firefox, it looks great but in IE if you start putting very looooooooooooooooong text in the input, it will look like crap.

Try it out yourself

So does anyone have a good solution for this issue?

If I were to do it, I’d wrap the input in a container and put the background image on the container and hopefully by applying the hover affect on the container, it would get the desirable effect. Of course I will need to test out my theory. But it’s past midnight so I should get some sleep for now.

AND it does work. check it out.

Man, I just love IE.

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.

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.

Download version 1.0

Live demonstration

jQuery plugin tableRowCheckboxToggle