Adventures with jQuery

Man, I never realized that I could actually learn to enjoy Javascript. It looks just like PHP or even gasp Ruby code to me at times. :)

For my current paid side project I've been using jQuery to do some cool transformational effects. On the page that shows the details for a villa, there's a little section, sort of a sidebar, that has things like the number of rooms, price, etc. Visitors are then allowed to share the information by sending an email.

So, being a guy who always wants to learn I said "Hell, lemme whip up some Ajax goodness so that we don't have to do any page refreshes." Then I said "How the hell do I do that with jQuery any way." Long story short, I got it to work. I'm finally getting the hang of this stuff. How easy was it? Lemme show you:

First, I put all the different divs that will be displayed into the main page. Perhaps this is sloppy, but I'm just a beginner at this. I then went to the style sheet for that particular page and added in:

#email {
    display: none;

#email_thankyou {
    display: none;

That made sure those two divs wouldn't show up until I turned them on.? Then, I created an href of the style in a successful effort to avoid having the page scroll up to the top when they click on the link.? Then, we added in the following jQuery magic:

function shareVilla() { $("#details").hide("fast"); $("#email").fadeIn("slow")); }

Man, I love helper functions that actually read like English.

So then I made sure to hack an existing form validation script to then use some Ajax and post the data to an external PHP script that will send the email.? Here's what I added in, again in jQuery style:

$.post("foo.php", { send_to: document.res_form.send_to.value, email:, from: document.res_form.from.value, your_email_address: document.res_form.your_email_address.value, textarea: document.res_form.textarea.value, villa_description: document.res_form.villa_description.value, villa_url: document.res_form.villa_url.value}, function(){ $("#email").hide("fast"); $("#email_thanks").fadeIn("slow"); });

Again, I find that code to be very readable which means I can actually go back to it later and figure out what it was doing. So, it works:? content fades in and out, data gets posted to an external script, so all that's left is to test to make sure that the emails actually do get sent out.

A tip of my hat to John Resig for creating a great, compact Javascript library.? Steal from the best, I always say.