jQuery and instant submit

delayedinsanity · 04-04-2010, 03:11 PM

You would think this would be one of the most common things to find a tutorial on, but I'm googling up a storm with absolutely no payoff.

I still haven't gotten around to learning how to do this, and I'm sure the concept would be easy if I did, but on the upside, the books ARE on order.

In the meantime, I would like to find a tutorial that shows me how to use jQuery similar to what this forum does with responses and the same as many comment systems, or even twitter for that matter. I want to submit a small 200 character text area and have it show up above the form instantly.

No, I'm not trying to create a social media site. Just a simple online task list for myself and I'd like to add the functionality to just spam it with entries and have them show up as I submit them. The PHP is easy, but I can't find a tutorial on how to do the ajax side.

Enfernikus · 04-04-2010, 11:03 PM

Wrote this up right quick...might be rife with syntactical errors

This is really just a matter of DOM traversal which is devilishly easy with the Sizzles library ( It's what jQuery uses under the hood to traverse DOM also developed by Resig )

We simply do a post to the script and wait for the response, one we get it back, we format it to our liking and insert this new element AFTER the last post item.

jQuery provides an easy method of doing this

element:last

js Code:

jQuery(document).ready(function(){
   jQuery('button[name="postTask"').click(function(e){
        e.preventDefault();
        
        var form = jQuery('form[name="task_form"]');
        jQuery.post('script.php', form.serialize(), function(response){
            if( response !== null ){
                /* We've gotten back date, we COULD use the data provided in the form variable 
                 * but the script might be doing some special data manipulation so, we use the response data 
                 * waiting for post back also gives the script the chance to disallow this action
                 * and simply return null
                 */
                 
                 // Assuming it returned in JSON
                 jQuery('<div>').addClass('task-item')
                                .append(
                                    jQuery('<h2>').addClass('task-item-header')
                                                  .html(response.title)
                                )
                                .append(
                                    jQuery('<div>').addClass('task-item-content')
                                                   .html(response.body)
                                )
                                .insertAfter('.task-item:last');                   
            }else{
                alert('Psssttt...you can\'t post items bucko');
                console.log('...because you suck');
            }
        });
        
   });
});

delayedinsanity · 04-05-2010, 01:59 AM

Now this may sound silly, and I appreciate the help, but how do you pass data from the php back to the jquery that called it? json_encode and set it to a Javascript variable called response?