2012-01-17 1 views
1

ページ表示を更新するためにUJS呼び出しを取得できません。選択ボックスが変更されたときにdivの値を更新したい(私はすべての場所で検索したが役に立たない)。Rails3 UJS更新が表示されない

Iセットアップので、(私は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() 

ディスプレイ「アダムビルボ」、その値は、私のページには表示されません。

私はRails 3.0.9とgem jquery-rails 1.0.9を実行しています。私が見落としていることを理解するのに役立つものが最も高く評価されます!ありがとう。

解決済み - 以下の@iWasRobbedによる解決策が有効です。しかし、基本的な問題は、 '#timesheet_worker_name'を更新するときにtext()の代わりにval()を使用していたため、私の元のアプローチもその変更に対応していました。

答えて

0

レッツ・再編、この少し...

: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 
+0

申し訳ありません。私の元のコードと同じです。ページには表示されませんが、DOM値が設定されています。 – JESii

+0

申し訳ありませんが、 '#timesheet_worker_name'は...' val() 'でパラグラフ' p'要素を設定することはできません。あなたは '$( '#timesheet_worker_name')。text(json.name);'を使う必要があります。私は自分の答えを更新しました。またすみません! – iwasrobbed

+0

それはトリックでした。ありがとう@iWasRobbed!そして、それは私の元の例がval()からtext()へ同じ変更で動作することを意味します...私はそれをテストしました。 – JESii

関連する問題