Problems with AJAX and IE

I had set up a page with a nice drag and drop interface and it worked lovely in Firefox and Opera. But when I went to try it in IE, it would work once and then not again.

What was happening was that after the drop, the page would refresh and the drop area would be created again inside of the old one. Firefox ignored it but IE decided that it wanted things to be right for a change.
So adding this little bit of code between script tags:

if (document.all) { Droppables.drops = [] }

before the creation of the drop area meant that it would clear out the area for a new one to be created.

This page has the full explanation:
AJAX problem with drag and drop for Internet Explorer using Scriptaculous

This page is handy

Drag ‘n drop tutorial with the CakePHP 1.2 Ajax helper, Prototype framework and Scriptaculous library
Drag and Drop explained really nicely. The only thing that I have changed from his method is to put a letter in front of the id name for each option that will be dragged. This I then strip in the controller and play as usual. I made this change because my pages weren’t validating any more.

Drag and Drop ordering

Here is a very useful link that walks you through how to create a simple drag and drop section for a website. It creates a list and lets you move items around the list so that you can order them as you wish. With a little bit of CSS, this could turn into a really nice simple organiser.

http://dustinweber.com/cakephp/cakephp-sortable-ajax-drag-drops-the-basics/

I did find that I had to edit my javascript includes a little bit though. I had the scriptaculous libraries loaded with this tagged on at the end
?load=effects
With this in place, I was getting errors that sortable wasn’t defined. Once I removed it, it all worked perfectly.

Using autocomplete and Scriptaculous

Using this fine page as a reference (http://metapundit.net/sections/blog/ajax_autocomplete_with_scriptaculous), I finally got the autocomplete function working as I wanted.
I wanted to show a venue with some extra info in brackets and when it was selected, to update a hidden input with the id of the venue from the database.

The secret to this was realising that even though I was passing the id of the link tag, it was numberical which is not allowed. So following metapundit’s advice, I added auto_ to the front of the id value. This was then stripped off with javascript and the number put into the hidden input.

Also, a nice thing about the scriptaculous autocomplete is that if you want to show extra info but not have it passed to the page, enclose it in