Javascript 使用ajax或jQuery在RubyonRails上更新数据库

我有一个文本字段输入，它包含数据库属性（ref）的值。正如您从代码中注意到的，当我关注文本字段时，将显示边框，当单击out时，边框将取消填充

我的问题是，当我单击out时，我希望文本字段中的数据将存储在数据库中，而无需提交按钮

<script>
$(document).ready(function(e){

    $('.class1').focusin(function(){
        $(this).attr('readonly',false);
        $(this).css('border','1px black solid');
    })

    $('.class1').focusout(function(){
        $(this).attr('readonly',true);
        $(this).css('border','0px white solid');

    })
} );
</script> 

<div>Ref: <%= text_field_tag(:ref,@ref.to_s,:readonly=>true, :class => "classe1" )%>  </div>

$（文档）.ready（函数（e）{
$（'.class1'）.focusin（函数（）{
$（this.attr（'readonly'，false）；
$（this.css（'border'，'1px黑色实体'）；
})
$（'.class1'）.focusout（函数（）{
$（this.attr（'readonly'，true）；
$（this.css（'border'，'0px白色固体'）；
})
} );
Ref:true，：class=>“classe1”）%%>

如何将值发送到应用程序？

发送ajax请求：。如果记录存在并且正在更新，则将“type”设置为“PUT”，如果是新记录，则将“POST”设置为“POST”。发送到的url很可能是控制器的名称，我认为您没有提供该名称。e、 g.“/控制器”

例如：

$.ajax({
  type: "POST",
  url: "/controller",
  data: {ref: $('.classe1').html().trim()}
});

---

如果你不能让它工作，你需要提供更多关于你正在使用的rails代码的信息，我做了一些一般性的猜测。

要更新特定的记录，你只需使用jquery为输入字段或文本框调用

blur

函数。使用输入字段的类名或id调用blur函数

$('#ref').blur(function() {
    update_ref_field();
});

调用ajax的JS函数：

function update_ref_field(){
    var ref_value = $('#ref').val();
    var url = '/controller_name/action_name/?ref='+ref_value;
    $.ajax({
       type: 'put',
       url: url,
       dataType: "jsonp",  
       // You can use this jsonp if your request related to cross domain
       error: function (result, status, xhr){
            alert('result='+result+'::status='+status+'::xhr= '+ xhr);
            alert('Error occurred while updating the record.');           },
       success: function(result, status, xhr){
           alert('result='+result+'::status='+status+'::xhr= '+ xhr);
           alert('Record updated successfully.');

    });
    return false;
}

更新代码

function update_ref_field(){
  var ref_value = $('#ref').val();
  var url = '/controller_name/action_name/?ref='+ref_value;
  $.ajax({
    type: 'post',
    url: url,
    dataType: 'script',
    error: function(data){
      alert('Error occurred while updating the record.');
    }, 
    success: function(data){
      alert('Record updated successfully.');
    });
    return false;
}

这是我的代码：
在视图上：

    <script> 
     function update_ref_field(){
     var ref_value = $('#ref1').val();
     var url = '/ModController/update_ref_field/?ref1='+ref_value;
    $.ajax({
        type: "POST",
        url: url,
        //dataType: "jsonp",
        // You can use this jsonp if your request related to cross domain
        error: function (result, status, xhr){
            alert('result='+result+'::status='+status+'::xhr= '+ xhr);
            alert('Error occurred while updating the record.');           },
        success: function(result, status, xhr){
            alert('result='+result+'::status='+status+'::xhr= '+ xhr);
            alert('Record updated successfully.');
        }});
       return false;
       }


        $('#ref1').focusin(function(){
            $(this).attr('readonly',false);
            $(this).css('border','1px black solid');
        })

        $('#ref1').focusout(function(){
            $(this).attr('readonly',true);
            $(this).css('border','0px white solid');
            $javascript:update_ref_field();


    })
} );

函数更新\参考\字段（）{
var ref_value=$（'#ref1'）.val（）；
var url='/ModController/update_ref_field/？ref1='+ref_value；
$.ajax({
类型：“POST”，
url:url，
//数据类型：“jsonp”，
//如果您的请求与跨域相关，则可以使用此jsonp
错误：函数（结果、状态、xhr）{
警报（'result='+result+'：：status='+status+'：：xhr='+xhr）；
警报（'更新记录时出错'）；}，
成功：功能（结果、状态、xhr）{
警报（'result='+result+'：：status='+status+'：：xhr='+xhr）；
警报（“记录已成功更新”）；
}});
返回false；
}
$（'#参考1'）。焦点（函数（）{
$（this.attr（'readonly'，false）；
$（this.css（'border'，'1px黑色实体'）；
})
$（'#ref1'）.focusout（函数（）{
$（this.attr（'readonly'，true）；
$（this.css（'border'，'0px白色固体'）；
$javascript:update_ref_field（）；
})
} );

在控制器上：
def update_ref_field（）
开始
@projj=Project.find（参数[：Project_id]）#projet courant
@local_date=Time.new（）.to_date
@sem=caluculer\u semaine（@local\u date）
@existe_mom_pour_cet_semaine=Mod.find（：all，：conditions=>{:project_id=>@projj.id，：semaine=>@sem}）
#ce CA对应一个un更新
开始
@每个人都做一件事
如果（参数[：参考1]）！=“”| |（参数[：ref1]）！=无
a、 更新属性（：ref=>params[：ref1]）
结束
如果a.保存
闪光[：注意]=“参考时间”
否则
闪烁[：错误]=“您的fr ref non aboutit”
结束
结束
救援异常=>e
将电子邮件放入电子邮件
放置e.backtrace.inspect
结束
将_重定向到：action=>'reunion'
结束
结束

当我使用tag_表单时，我工作正常，但我希望数据库上的更改将在后台进行

---

谢谢大家的帮助。
这个问题的解决方案是使用javascript函数调用控制器中的其他函数

 function loadXMLDoc(id, val, name)
{

    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            //document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            alert();
        }
    }

            //update_ref_field => methode in the contoller with complete the update in the data     base
            xmlhttp.open("GET","update_ref_field?ref1="+val ,true);
            xmlhttp.send();


}

---

感谢您的帮助，但它不起作用：此消息已显示在警报上：result=[object]：：status=error:：xhr=未找到您知道我该怎么做吗。感谢againI在aswer中编写了我的代码，请找到错误。感谢evry one，我找到了解决方案：）