geeky

Javascript Error: submit is not a function

Just my luck and I ran into the dreaded submit is not a function javascript error.

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>

Why I prefer jQuery over YUI

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.

CSS Frameworks

I write my CSS from scratch and I know enough tricks/hacks to pull out most of all what I want to accomplish. Although I’ve always heard the yahoo YUI project and understand what its reset css achieves, I never knew there are so many other CSS frameworks out there. Hidden pixels has listed a great number of them. I don’t know if I will consider using them. I can’t see I will gain a lot of benefits from what I’ve done by using a framework but I might look into it since I have some time off work coming up :)

sIFR 3

sIFR lets you use your favorite font on your websites by cleverly working with Flash, JavaScript and CSS.

I saw it used in the Bella theme. I don’t know how compatible it is for all browsers but I might just try it out in my future themes :)

Wordpress widget

Man, I cannot believe how long I’ve been putting off implementing widgets for wordpress. I really want to be able to use those nice widgets although I don’t like the way some of the default ones are styled but I still think it will really make theme creation a lot easier. Here’s a tutorial on how to use multiple sidebars.

Free Web Design Vectors

Very nice collection here.

I like this desktop wallpaper site.

Other geeky finds:

Chinese URL

Wow, apparently we can now handle chinese URLs. The first one I noticed is this new soap opera’s official website: http://www.原來我不帥.tw/

Dodo’s Text Counter

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

another reason why I love foobar2000

I’ve been using foobar2000 as my media player for quite some time. It’s lightweight, highly customizable and uses little resource. Today while I was listening to some soothing music, I remembered back then I had a CD player that had a sleep function where you can set a timer to have it automatically turn off in 30 minutes. I thought would it be nice to do something like that with foobar since I leave my laptop on all the time by my bed. Sure enough, I didn’t have to look far, foobar’s got an awesome plugin foo_scheduler that does that and much more. It can perform many actions on a scheduled basis including, start, stop, lower volume, exit and even shutdown your computer. Alternatively this is the first thread I stumpled upon. It contains much valuable information for scheduling your computer.

twitter and pownce

Thanks to daynah. I now belong to two more these online social networking sites: pownce & twitter.

Hey, you can watch a video on twitter even.

pownce is prettier and better written and gives you more control but less popular than twitter.

Talking about great tools for online stalking.

It’s scary but it makes me want to recheck my cell phone plan to see if it charges extra for texting.

Oh yea 8 featured firefox plugins for twitter. I installed twitter box/twitter notifier. It works well.