Preventing Multiple Submissions with Prototype and jQuery

If there is one problem that plagues me across applications, its users that are too antsy to wait for the page to come back after hitting submit on a form. Even worse, some people just instinctually double and triple click. How do you keep these pesky users from duplicating records or charging themselves three times for that item in your e-shop? Click "more" to see how I do it in Prototype and jQuery.

 

Example of using Template in Prototype

In response to a blog post by Ray Camden about jQuery and duplicating form fields, I put together an example of using the Template class in Prototype. As an added bonus, I designed this example to also handle form resets and to feature a controller based design. You can click here to view a demo of the example in action. Read more to get the break down of the code.

 

CFGrid Displays No Data Until Sort

So, another annoying bug, but at least I found a solution this one. I'm using Prototype and trying to get CFGrid running. Things went OK except that when I made a grid, it would load looking like the example to the left; no data listed. If you clicked on the "Students" header, you'd get the full list of students like the example on the right.

I was finally able to find an article in the House of Fusion mail archive that described no only the problem, but a solution:

Solution! After tearing the Javascript apart for both libraries, I found the problem. Both libraries use a function called "defer", which basically just delays performing that action until the interpreter's callstack is empty. My solution then was to change the name of this function in Prototype and then just change the name wherever Prototype references it also. None of the Prototype plugins I have use the function, so it's seems like it's pretty low-key.

So I quickly did a find and replace and changed Prototype's "defer" to "pdefer" and things started up fine.

 

Prototype.js on IE smashed by id="tblStudents"

Ok, so here is the weirdest IE bug I've ever seen.... the weirdest by far. I was trying to get some sortable table code up and running and after I got it going in FireFox, IE 7 was throwing fits. I narrowed it down to a specific instantiation of the table that I had on my page, and then started hacking things out. I pulled out all my custom DisplayTable code. I remove all of my custom code completely. I removed Scriptaculous.

Turns out IE has a weird behavior where it adds a global scope variable with the same name as any id, so that you can just say tblStudents.innerHTML = 'whatever' without needing to fetch the element. My lack of a var keyword before my variable ment it was trying to reference that variable and causing a conflict.

 

Prototype Based State Manager

I've known that you could use anchor tags as a way to manage the state of a Javascript application for a while now, but I've never really messed with how that is actually setup. I got bored on Friday, and this is what I came up with.

 
Post a job. Find one. authenticjobs.com