Rails3 UJS 更新未显示

发布于 2024-12-27 11:44:37 字数 1427 浏览 1 评论 0原文

我在调用 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(),因此我原来的方法也适用于该更改。

I'm having trouble getting a UJS call to update the page display. I want to update the value of a div when a select box changes (I've googled all over the place but to no avail).

I setup the change function like so (I'm using 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'})
  });
  });

My controller has the following:

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

My view has (I'm using 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}

When the ajax call completes, I inspect the DOM and the value is there; i.e., in
the console:

$('#timesheet_worker_id").val()

displays 'Adam Bilbo', but the value is not displayed on my page.

I'm running Rails 3.0.9 and gem jquery-rails 1.0.9; any help figuring out what I'm overlooking is most appreciated! Thanks.

RESOLVED - Solution by @iWasRobbed below works. However, basic issue was using val() instead of text() when updating '#timesheet_worker_name' and so my original approach also works with that change.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

っ左 2025-01-03 11:44:37

让我们稍微重构一下......

: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

Let's restructure this a little bit...

: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.');
      }
    });
  });

And your controller action would be:

def show_worker_name
  calculated = 'Adam Bilbo'
  render :json => { :name => calculated }, :status => :ok
end
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文