We needed a PHP and jQuery image upload and crop tool and came up with the following. Hope it helps!
Before you start, ensure you have the following:
- PHP 4 or Higher (It has been tested on Version 5)
- Safe mode must be off! – A number of users have reported issues when safe mode is on.
- PHP GD Library
- jQuery ver 1.2.3 or Higher
- Image Area Select plugin by Michal Wojciechowski
- 1 Getting Started
- 2 The XML Data File
- 3 The HTML File
- 5 Grabbing XML tag attributes with jQuery
- 6 Updating the content of a DIV dynamically
- 8 Summary
- 9 Reference
- 9.1 SitePoint Articles
- 9.2 Documentation
- Create a new directory for the sample files on your machine.
- Download the latest version of JQuery. Make sure to rename the file to jquery.js so it will work with these examples (by default the name will include the version and look something like jquery-1.2.3.min.js) and place the file into the root of the project directory you created.
- Download the following sample files and place the contents into the root of your project directory.
- Grab your favorite text editor or IDE and open those three files up. I recommend Notepad++ or Aptana. Continue reading
Client-side Code (jQuery)
Now, on to the jQuery front end. First, we need to declare the timestamp of the current message as 0, and call the function that loads the messages from the server:
timestamp = 0;
Next, we’ll write the code for the form submission. jQuery allows us to add an event hook for the form’s submit event, as though we were adding an
onSubmit event within the HTML itself, except that we don’t have to touch the HTML. Here’s the submit event: Continue reading
To demonstrate the true power of jQuery, we’re going to make a fully featured Ajax chat application. This will allow users to post messages, and automatically update itself — all without any page refreshes. As we’re now dealing with a slightly more complex application, I’ll also take you deeper into jQuery, demonstrating other handy functions.
First, we’ll plan out the application. We won’t need much for this app — a front end, a back end, and the jQuery library. However, there will be a fair bit of code for both the back and front ends of the app, so our basic plan will let you know what to expect from the system. Continue reading