带有 jquery datepicker 的 Ruby on rails

Posted 2023-05-09

【中文标题】带有 jquery datepicker 的 Ruby on rails

【英文标题】：Ruby on rails with jquery datepicker

【发布时间】：2015-01-24 23:43:55

【问题描述】：

我对 Rails 的经验很少，我正在尝试在我的 Rails 应用程序中使用 jQuery datepicker。

我的应用程序有多个子任务，它们有与之关联的模式，我在这些模式上有 datepicker 字段。

我想要的是当我选择一个日期时，应该对我的控制器进行 ajax 调用，它应该将所选日期保存在我的数据库中。 然后在保存时我通过 ajax 刷新我的页面。

这里是代码

这里的页脚是模态页脚，我刚刚为它创建了一个不同的部分，以便我可以在保存日期后刷新它，以便在此处反映所选日期。

/_footer.html.erb/

<div class="row" id="footer_<%=subtask.id%>">
    <div class="col-md-5" style="margin-bottom:-20px;float:left;">
        <a class="col-md-12 col-xs-12 btn btn-success">Start Date
        </a>
        <%= form_tag(:controller => 'subtasks', :action => 'updateDatestart',:remote=>'true') do %>
        <%= text_field_tag "text", :start_date, :class => "dateFilter form-control datepickerstart_#subtask.id"%>
        <%end%>
        <!--input class="form-control" id="datepickerstart_<%=subtask.id%>" type="text" placeholder="StartDate"-->
    </div>
    <div class="col-md-5" style="margin-bottom:-20px;float:right;">
        <a class="col-md-12 col-xs-12 btn btn-danger">End Date
        </a>
        <input class="form-control" id="datepickerend_<%=subtask.id%>" type="text" placeholder="EndDate">
    </div>
    <script>
    $(function()
        $('.dateFilter').datepicker(
            onSelect:function()
                updateTable("start");
            
        );
    );

    function updateTable(value)
    
        $.ajax(
            type: "POST",
            url: "/subtasks/updateDate"+value,


data:  subtasks:  id:<%=subtask.id%>,start_date:$('.dateFilter').datepicker().val(),
            success: function(data)
                console.log(data);
                $(".datepickerstart_<%=subtask.id%>").datepicker('setDate',$(".datepickerstart_<%=subtask.id%>").val());

              
        );
    
    </script>
</div>

/子任务控制器/

def updateDatestart
        @subtask=Subtask.find(params[:subtasks][:id])

        respond_to do |format|
            if @subtask.update_attribute(:start_date,params[:subtasks][:start_date])
            format.js
            end
        end
    end

/updateDatestart.js.erb/

$('#footer_'+ <%=@subtask.id %>).html('<%=j(render partial: "subtasks/footer",locals: subtask: @subtask)%>');

这里的问题是，通过日期选择器选择日期时，会发送正确的日期。到这里一切都很好，但我的日期选择器输入框仍然显示“开始日期”作为其值而不是所选日期。

另外一个问题是，一旦我为子任务选择了日期，现在每当我点击它时，它应该从数据库中获取该日期并显示给我，而不是再次显示“开始日期”作为值。

请帮帮我，我卡在这个问题上很久了。

好的，我已经找到了解决方案，在这里发布，以便如果其他人有同样的问题，他们的宝贵时间将被节省

/*Solution that worked for me*/

这是我的解决方案

1.First i removed the different action which i made for updatedatestart and updatedateend.Instead now i am using the same update method provided by ruby for both of them.

/*subtask_controller.rb*/

def update

        @subtask=Subtask.find(params[:id])
        #@task=@subtask.task
        #@subtask.description=params[:subtask][:description]
        respond_to do |format|
            #if @subtask.update_attribute(:description,params[:subtask][:description])
            if @subtask.update_attributes(params[:subtask])
                format.htmlredirect_to @project
                format.js
            else
                render new
            end
        end

我的 _footer.html.erb 文件

<div class="row" id="footer_<%=subtask.id%>">
    <div class="col-md-5" style="margin-bottom:-20px;float:left;">
        <a class="col-md-12 col-xs-12 btn btn-success" style="border-bottom-left-radius:0px;border-bottom-right-radius:0px;">Start Date
        </a>
        <%=form_for subtask,:remote=>:true,:method => :put do |f| %>
        <%=f.hidden_field :name%>
        <%= f.hidden_field :description,rows:'5',cols:'12',:class=>'myarea'%>
        <%=f.hidden_field :task_id%>
        <%=f.text_field :start_date,:class => "datepicker_#subtask.id form-control",:id=>"datepickerstart_#subtask.id",:style=> "border-top-left-radius:0px;border-top-right-radius:0px;"%>
        <%=f.hidden_field :end_date%>
        <%end%>
    </div>
    <div class="col-md-5" style="margin-bottom:-20px;float:right;">
        <a class="col-md-12 col-xs-12 btn btn-danger"style="border-bottom-left-radius:0px;border-bottom-right-radius:0px;">End Date
        </a>
        <%=form_for subtask,:remote=>:true,:method => :put do |f| %>
        <%=f.hidden_field :name%>
        <%= f.hidden_field :description,rows:'5',cols:'12',:class=>'myarea'%>
        <%=f.hidden_field :task_id%>
        <%=f.text_field :end_date,:class => "datepicker_#subtask.id form-control",:id=>"datepickerend_#subtask.id",:style=> "border-top-left-radius:0px;border-top-right-radius:0px;"%>
        <%=f.hidden_field :start_date%>
        <%end%>
    </div>
    <script>
    $(function()
        $('.datepicker_<%=subtask.id%>').datepicker(
            onClose: function(strDate, datepicker) 
                if(strDate == "") 
                return;
                
                $(this).parent().trigger('submit.rails')
            
        );

    );
    </script>
</div>

就是这样，这个解决方案对我有用。

【参考方案1】：

尝试使用form_for（您可能可以消除控制器参数）而不是form_tag：

<%= form_for(subtask, :action => 'updateDatestart',:remote=>'true') do |f| %>
   <%= f.text_field :start_date, :class => "dateFilter form-control datepickerstart_#subtask.id"
<% end %>

form_for 助手将读取您记录的属性。您还将为块使用变量f，并使用text_field 帮助程序而不是text_field_tag。