After getting the Portlet drag and drop working, or so I thought, it looks like I am going to have to abandon that approach. It turns out the drag and drop works just find – it does what it is supposed to. However, getting the new arrangement information so it can be sent back to the server as an Ajax post does not. I am unable to get any sort of serialization to work and even the Portlet example indicates it is obsolete and references jQuery UI.
I have subsequently found a jQuery based Table Drag-and-Drop solution which looks like it will do what I want. I am now in the process of implementing this in hopes that it will be a little easier to work with. Stay tuned …
Today I got the first part of Ajax based Drag and Drop Event Ordering working. A few weeks ago when I was skimming the Internet looking for some Ajax tips I found this interesting jQuery demo called Portlets. You really need to see the example to get the idea of how it works. When I found it I knew it was exactly what I was looking for to do event order (and hopefully heat sheets at some point).
I finally got some cycles to work on it yesterday and earlier today I got the first phase of it working. I can display the events to the user and they can drag and drop them to order them however they see fit. This part of it works as I hoped it would. Now that it is working, I need to get Ajax handshaking worked out so the database gets updated with the new sort order. Hopefully that won’t be to difficult but working with this type of Ajax problem is new ground for me.
Drag and Drop Event Ordering
I haven’t made much progress over the last few weeks as I have been working on a project at work which was taking a lot of my free cycles. Fortunately the project at work also uses phpHtmlLib so some of the work I did for the work project will roll out to this project as well.
Even though I haven’t put a lot of active cycles into wp-SwimTeam, I have been looking for some ideas on how to deal with event ordering better. Event ordering was one of the last things I checked in and I went back and used it and it is clunky.
I have concluded that Event Ordering and ultimately heat sheet management needs to be AJAX based so drag and drop can be implemented. I want to implement something similar to this jQuery Portlet demo. Since I have never done anything with AJAX (other than a Google Maps implementation), this is new ground for me.
It is interesting to go back and revisit code which I wrote early in this project. When I go back and look at it, I ask myself why I implemented things the way I did. The change to the tabbed menu bar has required me to go back and visit almost every page which is presented as a menu to a user of the system.
Some of the early functionality like Age Groups and Seasons had a clunky implementation of the decision tree logic and resulted in processing the same variables to make decisions repeatedly. I have migrated the code I developed latter on for things like the Roster and Events pages and implemented “Guidance” for all pages as well.
Now that I have all of the code cleaned up, at least I think I have it all done, I need to return to the Events functionality. I need the ability to add events to a meet and then re-order them. The standard events can be used to seed the events for a meet and reordering works although it is clunky. This should probably be done with AJAX so events can be dragged and dropped into the desired order.
Last night I fixed the Google Maps problem by re-coding the way I was getting the data from Google. I had been using a class called Phoogle but have eliminated it in favor of a direct AJAX solution using Google’s AJAX API.
Instead of embedding this new solution in the wp-SwimTeam plugin, I implemented as a widget in phpHtmlLib. It works pretty well too!