Entry level javascript with rails: updating a div on form submit (3.1/jquery)

Question

I have a basic page, with a div containing text, and a form to update that text, on rails 3.1/jquery. I do not know jquery or js well so I'm just poking about with the coffeescript for the controller.

None of the tutorials I've found seem be relevant, and the few I've found are ancient. I can see what is going on, sort of: I can get an js alert on ajax success, for the form as a remote form (that puts to the server and the update on the controller works -- the basic text gets changed, but I need to refresh the page to see the changes).

So I have 2 basic questions I'm working through:

• Do I need to fiddle with js partials or can I just put this into the js/coffeescript for the page? Seems like this can be handled without a messy bunch of partials.

• how exactly do you control replacing information with js/jquery: .html, .load, and several other functions seem to be implicated, but I haven't found the right combo.

All the tutorials I've found are either too old or too verbose for a basic hit-the-ground- running understanding of doing some basic jquery stuff within rails. I'm trying to work toward paring down and speeding up form submissions with js/json. A newish, clear, simple tutorial for the uninitiated would be great, but anything pointing me in the right direction of learning would be great.

Yeah, I've posted no code yet but if I can this little bit working, I'll post that.

Answer 1

I do not know Ruby however this is pretty easily handled with jQuery.

You can do an AJAX form submission and update your <div> element after the AJAX call returns success.

//bind some code to the submit event for your form
$('#form_id').bind('submit', function (event) {

    //preventDefault(); is the same as return false; except you can run code after preventDefault();
    event.preventDefault();

    //make a GET request to your server-side script
    $.get('path/to/form_action.rb', $(this).serialize(), function (response) {

        //this is the callback for the AJAX call
        $('#div_id').html('<span>This is my <strong>new</strong> fancy text</span>');
    });
});

Some notes:

• You can also use the $.post() ( http://api.jquery.com/jquery.post/ ) method rather than $.get() ( http://api.jquery.com/jquery.get/ ) and send the data using the POST method.
• event.preventDefault(); will stop the form from submitting normally so you can handle its submission with your own code.
• The response variable within the AJAX callback is the response that your ruby script outputs after handling the form submission.
• $(this).serialize() in the $.get() call is adding your form input data to the AJAX call: http://api.jquery.com/serialize/

Answer 2

Where you have the alert() on ajax success, do something like this:

$("#myDivId").text(myText);

Where myText is either the text you submitted to the server, or the response from the server - whichever is most appropriate for your situation.

More generally speaking, to replace the text of an element use $("#myElementId").text("new text") . To replace the HTML of an element use $("#myElementId").html("<b>new HTML</b>")