免责声明:我是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/