Communicating with database from javascript file in Rails app

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.

I just answered a similar question that should help stackoverflow.com/questions/8692308/… — Msencenb
– Msencenb, Commented Jan 1, 2012 at 10:21

iwasrobbed · Accepted Answer · 2012-01-01 17:07:27Z

3

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();
            });
        }
    });
});

answered Jan 1, 2012 at 17:07

iwasrobbed

46.8k21 gold badges152 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bon Champion Over a year ago

You're a life-saver! Worked like a charm.

Collectives™ on Stack Overflow

Communicating with database from javascript file in Rails app

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related