Category: jQuery

  • Drag and drop category management with CakePHP

    Today’s article is going to walk you through creating a slick drag and drop with AJAX category management system.

    CakePHP offers a really nice built-in tree management.  In fact, at a bare minimum you simply need to create a table with 2 extra columns, tell your model to act like a “tree” and rather than doing a find(‘all’) you do a generatetreelist() or a find(‘threaded’) and CakePHP takes care of the rest.

    After doing a quick test, I was quite impressed with what CakePHP did for me, but I was not satisified.  I wanted to create a really slick category management system that I can re-use and show off.  Well, in this tutorial I go about 90% of the way.  The only thing I didn’t have time to finish was, rather than redrawing my tree through AJAX, use DHTML and dynamically update my tree after dragging and dropping.  Don’t worry, I plan to finish this with a part two soon. (more…)

  • Drag and drop with animations in jquery

    Every year at Halloween, my company offers prizes to the best dressed employees.  For the past two years I have won as well as my co-worker that partakes in our crazy costumes.  You may be wondering what this has to do with drag and drop, don’t worry I’m getting.

    This years prize happened to be a monkey slingshot.  Basically you place your index and middle fingers in pockets attached to the monkey’s arms.  You then proceed to pull back and let fly.  Well, as you can imagine, we had a lot of fun with this guy, so much fun in fact we broke it 🙁

    So one day after work I was messing around with drag and drop and some jQuery tutorial animations.  I was quickly able to get a “mock slingshot” shooting at a target and this is what I want to share today. (more…)

  • How to add comments with AJAX in CakePHP

    In today’s article we are going to create a very basic blog that allows people to create a post and posts comments on that post via AJAX.  We are going to keep it extremely basic and just focus on that actual AJAX functionality.

    Ready? Let’s begin.  We are going to start by creating two database tables: posts and posts_comments. Also, I’ve got a very simple example of this same feature using Node.js tutorial.  Below is a sample create statement for the posts table: (more…)

  • Fixing slow drag and drop with scriptaculous

    Recently on a project I was working on, I was tasked with fixing drag and drop that was terribly slow.  The drag and drop was implemented with scriptaculous on a calendar system.  When you clicked an event to drag it it took about 5 seconds before the page would actually let you drag it!  This was clearly unacceptable and it has to be possible because Google Calendar is lightening fast.

     The first thing I did was download and setup jquery to see if it was related to how scriptaculous was created.  After setting up jquery, it was just as slow.  This lead me to believe that it was a fundamental problem with how the drag and drop was set up in both libraries. (more…)

  • Drag and Drop with AJAX Example

    At my work it’s quite clear to me that a lot of people have difficulty with both AJAX and Javascript drag and drop event functionality.  In this article, I thought I would provide a realistic and simplistic example of how to accomplish both AJAX and drag and drop together.

    By the end of this article you will be able to create an extremely slick content management system that works really smoothly. (more…)