Question

Disclaimer: I’m a rails newbie, so I apologize if I’m going at this problem entirely wrong. I’m using jQuery UI’s draggable functionality, and after a user drags an element, I need to add a new entry into a database. My javascript looks like this:

$(function() {
    $( ".staged" ).draggable({ appendTo: 'body',
        containment: 'window',
        scroll: false,
        helper: 'clone',
        stop: function(e,ui) {
            // around here, I'd like to create a new entry in the database called "placed_images"
            var url = this.getAttribute("src");
            x = ui.offset.left;
            y = ui.offset.top;
            var div = document.createElement("div");
            div.className += "placed";
            div.innerHTML = '<img src="'+url+'" class="placed" style="top:'+y+'px;left:'+x+'px;">'
            document.getElementById('page').appendChild(div);
            $(function() {
                $( ".placed" ).draggable();
            });
        }
    });
});

The above code is in the pages.js file in the javascript folder of my app. I know how to make a new entry in a database by using a form action that sends params to the “create” function in a controller. The code should have the same effect as:

form_for(:placed_image, :url => {:action => 'create'}) do |f| ...

Except without a form and it should happen asynchronously, without a page reload. Like I said, this might be a boneheaded way of going about this, I’m not sure. But if you know of a library, gem, or tutorial that might help me out, that’d be greaaaat.

Answer 1

Since you’re using jQuery, you should utilize jQuery’s built-in AJAX methods for communicating with the Rails server from javascript.

jQuery has an $.ajax method: http://api.jquery.com/jQuery.ajax/

Example:

$(function() {
    $( ".staged" ).draggable({ appendTo: 'body',
        containment: 'window',
        scroll: false,
        helper: 'clone',
        stop: function(e,ui) {
            // generate 'placed_images' on server
            $.ajax({
                data: { 'some_data_to_send_to_server':'any_data_goes_here' },
                type: 'POST',
                url: '/some_path_to_your_controller',
                success: function () {
                    // it worked!  
                },
                error: function (response) {
                    // we had an error
                }
            });

            var url = this.getAttribute("src");
            x = ui.offset.left;
            y = ui.offset.top;
            var div = document.createElement("div");
            div.className += "placed";
            div.innerHTML = '<img src="'+url+'" class="placed" style="top:'+y+'px;left:'+x+'px;">'
            document.getElementById('page').appendChild(div);
            $(function() {
                $( ".placed" ).draggable();
            });
        }
    });
});