【问题标题】:Rails3 UJS update not displayingRails3 UJS 更新不显示
【发布时间】:2012-01-17 00:19:24
【问题描述】:

我在获取 UJS 调用以更新页面显示时遇到问题。我想在选择框发生更改时更新 div 的值(我已经到处搜索,但无济于事)。

我像这样设置更改功能(我正在使用 Haml):

%script
  $("#timesheet_worker_id").change(function() {
  -# This works, so we know we're responding to the change event: 
  -# alert('Fired the change function');
  $.ajax({url: "/timesheet_show_worker_name",
  async: false,
  data: 'selected=' + this.value,
  dataType: 'script'})
  });
  });

我的控制器有以下内容:

def show_worker_name
  calculated = 'Adam Bilbo'
  render(:update) {|page|
    ### The following works just fine!
    #page << "alert('This is a test')"
    ### This doesn't; DOM is updated but not displayed; test data for now
    page << "$('#timesheet_worker_name').val('Adam Bilbo')"
  }
end

我的观点有(我正在使用 simple_form):

=f.association :worker, :collection => Worker.all(:order => 'worker_number'), :prompt => 'Select a worker', :label_method => :worker_number, :label => "Worker Number", :input_html => {:class => 'startField'}
%p{:id => :timesheet_worker_name}

当 ajax 调用完成时,我检查 DOM 并且值在那里;即,在 控制台:

$('#timesheet_worker_id").val()

显示“Adam Bilbo”,但该值未显示在我的页面上。

我正在运行 Rails 3.0.9 和 gem jquery-rails 1.0.9;任何帮助找出我忽略的东西都非常感谢!谢谢。

已解决-@iWasRobbed 下面的解决方案有效。但是,基本问题是在更新“#timesheet_worker_name”时使用 val() 而不是 text(),因此我的原始方法也适用于该更改。

【问题讨论】:

    标签: javascript jquery ruby-on-rails ruby-on-rails-3 ujs


    【解决方案1】:

    让我们稍微重构一下……

    :javascript
      $('#timesheet_worker_id').change(function() {
        $.ajax({
          url: '/timesheet_show_worker_name',
          data: { 'selected': $(this).value },
          success: function (json) { 
            $('#timesheet_worker_name').text(json.name);
          },
          error: function (response) {
            alert('Oops, we had an error.');
          }
        });
      });
    

    您的控制器操作将是:

    def show_worker_name
      calculated = 'Adam Bilbo'
      render :json => { :name => calculated }, :status => :ok
    end
    

    【讨论】:

    • 对不起;与我的原始代码相同。页面没有显示,但是DOM值已经设置好了。
    • 对不起,我什至没看#timesheet_worker_name是什么...你不能用val()设置段落p元素。您需要改用:$('#timesheet_worker_name').text(json.name);。我更新了我的答案。再次抱歉!
    • 成功了;谢谢@iWasRobbed!这也意味着我的原始示例适用于从 val() 到 text() 的相同更改...我对其进行了测试。
    猜你喜欢
    • 1970-01-01
    • 2011-06-27
    • 1970-01-01
    • 1970-01-01
    • 2011-09-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多