免责声明:我是Rails新手,因此如果我要解决此问题完全不对,我深表歉意。我正在使用jQuery UI的可拖动功能,并且在用户拖动元素后,我需要向数据库中添加新条目。我的JavaScript看起来像这样:

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


上面的代码在我的应用程序的javascript文件夹中的pages.js文件中。我知道如何通过使用将参数发送到控制器中的“创建”功能的表单操作来在数据库中创建新条目。该代码应具有以下效果:

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


除非没有表单,否则它应该异步发生,而无需重新加载页面。就像我说的那样,这可能是解决问题的简单方法,我不确定。但是,如果您知道可能对我有所帮助的库,gem或教程,那就太好了。

最佳答案

由于使用的是jQuery,因此应该利用jQuery的内置AJAX方法通过javascript与Rails服务器进行通信。

jQuery有一个$.ajax方法:http://api.jquery.com/jQuery.ajax/

例:

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

关于javascript - 从Rails应用程序中的javascript文件与数据库进行通信,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/8691322/

10-12 12:54
查看更多