Sending data from view to controller AJAX

Question

how can I send the var lang to the controller so I can use it in partiel. here is my shot:

  $("#search-select").on("click", function() {
    var lang = $('#search-select').dropdown('get value');
    $.get({
      url: translations_url
      data: lang,
      success: function(){
        console.log('data sent');
      }
    });
  });

EDIT

current code:

  $("#search-select").dropdown();

  $("#search-select").on("click", function() {
    var lang = $('#search-select').dropdown('get value');
    $.get({
      url: "#{translations_url}",
      dataType: "script",
      data: {
        lang: lang
      }
    });
  });

problem: params[:lang] still don't work in controller

Refer [this](https://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery) — Darpan Sanghavi, May 18 '18 at 13:25
1. Check if your js `lang` variable is not equal to `undefined` 2. Please, show us your params hash after AJAX request — taras, May 18 '18 at 14:31
@tbard here is the params hash after AJAX request: Parameters: {"lang"=>"cs", "_"=>"1526653165357"} — Arb, May 18 '18 at 14:41

score 0 · Answer 1 · answered May 18 '18 at 13:35

0

Set correct _path to your post method:

$.ajax({
    url: '<%= controller_path %>', method: 'POST',
    beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
    data: { lang: lang },
    dataType: 'json',
    success: function (data) {
      console.log(data);
    }
});

Now you can work with lang in your controller

def method
  params[:lang] # do something
  answer = 'Then, you can return some data to view'
  respond_to do |format|
    format.json { render json: answer }
  end
end

answered May 18 '18 at 13:35

Michael Arkhipov

737
8
19

Do you know how to get the controller_path ? and apparently i need js.erb, do you have any idea what I need to write in it? – Arb May 18 '18 at 13:40
You see your routes from `rake routes` command. What is your goal? – Michael Arkhipov May 18 '18 at 13:45
well since I can't use translations_path, I'm using "#{translations_url}" – Arb May 18 '18 at 13:57
@Arb `<% environment.context_class.instance_eval { include Rails.application.routes.url_helpers } %>` – Michael Arkhipov May 18 '18 at 15:10

Ravi Mariya · Answer 2 · 2018-05-18T13:42:28.940

0

you're missing , after url: translations_url, also if you can send data as JSON with key and value, like data: {lang: 'value'}, also you don't need to specify method name if you're using GET, see the below example

$.ajax({
  url: translations_url,
  data: {lang: 'value'},
  success: function(){
    console.log('data sent');
  }
});

if you need to use POST Method then include method: 'post' incase jquery ajax method doesn't call js.erb file you need to add dataType: 'script'

edited May 18 '18 at 13:42

answered May 18 '18 at 13:35

Ravi Mariya

1,210
15
19

apparently I don't have a js.erb so do you know what I need to write in it ? – Arb May 18 '18 at 13:39
`$("#div_id").html("<%= escape_javascript(render(:partial => 'partial_name', locals: {lang: @lang})) %>");` try this in your js.erb file – Ravi Mariya May 18 '18 at 13:41
I'm getting 500 error, xhr one, what do you think it comes from? – Arb May 18 '18 at 13:52
check if your using the right route, controller action and the log of your application – Ravi Mariya May 18 '18 at 13:58
I still can't use params[:lang] in the controller. (check the edit on the question) – Arb May 18 '18 at 14:13
`var lang = $('#search-select').dropdown('get value');` did you check what are you getting in lang? – Ravi Mariya May 18 '18 at 14:16
Yes, i'm getting the languages that I want there. – Arb May 18 '18 at 14:18
check your log, what is going in parameters, also, try to debug by yourself – Ravi Mariya May 18 '18 at 14:21

score -1 · Answer 3 · answered May 18 '18 at 14:00

You can't use route path helpers on the frontend. But you can send proper URL from backend to frontend via data-attribute:

#search-select{ data: { path: translations_url } }

And then in your js:

$("#search-select").on("click", function() {
    var url = $(this).data('path'),
        data = { lang: $(this).dropdown('get value') };

    $.get({
      url: url,
      data: data,
      success: function(){
        console.log('data sent');
      }
    });
});

I changed it, i'm using it like : url: "#{translations_url}", — Arb, May 18 '18 at 14:05

Sending data from view to controller AJAX

3 Answers3