使用ajax或jQuery在rails上更新ruby数据库

时间:2013-03-15 15:06:22

标签: javascript jquery ruby-on-rails ajax

我有一个文本字段输入,它包含数据库属性(ref)的值。从代码中可以看出,当我专注于文本字段时,将出现边框,当单击时,边框将会破坏。

我的问题是,当我点击时,我希望文本字段中的数据将存储在数据库中而不需要提交按钮。

<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>

如何将值发送到我的应用程序?

4 个答案:

答案 0 :(得分:1)

要更新特定记录,只需使用jquery为该输入字段或文本框调用blur函数。使用输入字段的类名或ID调用模糊函数。

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

JS函数调用ajax:

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

答案 1 :(得分:0)

发送ajax请求:http://api.jquery.com/jQuery.ajax/。如果记录存在并且您正在更新它,则将“type”设为“PUT”,如果是新记录则设置为“POST”。发送给它的网址很可能是我认为你提供的控制器的名称。例如“/控制器”。

示例:

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

如果你无法使它工作,你需要提供一些关于你正在使用的rails代码的更多信息,我做了一些通用的猜测。

答案 2 :(得分:0)

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

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


    })
} );

控制器上的


        def update_ref_field()
    开始
    @projj = Project.find(params [:project_id])#projet courant
    @local_date = Time.new()。to_date
    @sem = caluculer_semaine(@local_date)
    @existe_mom_pour_cet_semaine = Mod.find(:all,:conditions =&gt; {:project_id =&gt; @ projj.id,:semaine =&gt; @sem})
     #ce cas对应un update
      开始
        @ existe_mom_pour_cet_semaine.each do | a |
          if(params [:ref1])!=“”|| (params [:ref1])!= nil
            a.update_attributes(:ref =&gt; params [:ref1])
          结束
          如果a.save
            flash [:notice] =“mise a jour de ref”
          否则
            flash [:error] =“mise ajour fr ref non aboutit”
          结束
        结束
      救援Exception =&gt; Ë
        把电子邮件发给你         放e.backtrace.inspect
    结束
    redirect_to:action =&gt;'reunion'
    结束
  结束

当我使用tag_form时,我工作正常,但我希望数据库的更改将在后台执行 感谢

答案 3 :(得分:0)

感谢大家的帮助。
这个问题的解决方案是使用一个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();


}