CODEWITHSUNDEEP
jqueryruby-on-railsajaxforms
Stef Hej
Stef Hej

Reputation: 1377

(rails) working with forms and javascript

Every Ingredient has one Category.

First a user selects a Category then

store all ingredients of that category into a second select field.

<%= select("category", "category_id", Category.all.collect {|c| [ c.name, c.id ] }) %>

My approach is to update the second select field with ajax, but once placing the ajax call after the alert statement the whole function is not called anymore. 

$(document).ready(function(){
  $(document).on('change', '#category_category_id', function(){
    alert("changed");
    $.ajax({
      url: "categories/category_selection",
      type: "GET",
      data: {'ingredient=' + $('#ingredient_selection option:selected').value() },
    })
  });
});

Same with 

$('#category_category_id').live('change', function(){...})

Categories_controller.rb

class CategoriesController < ApplicationController
  def category_selection
    respond_to do |format|
       format.js {  }
    end
  end
end

Category_selection.js.erb

$('#category_category_id').after('
  <%= select_tag :category_selection, 
    options_from_collection_for_select(@ingredients, :id, :name), 
        :prompt => "Ingredient" %>
');

Upvotes: 1

Views: 32

Answers (1)

max
max

Reputation: 101811

{'ingredient=' + $('#ingredient_selection option:selected').value() }

Causes a syntax error. The brackets are interpreted as the beginning of an object literal but instead you have an expression which evaluates into a string.

You should pass a string or object as the data parameter.

data: 'ingredient=' + $('#ingredient_selection option:selected').value(),

or an object:

data: { ingredient: $('#ingredient_selection option:selected').value() },

I would recommend that you learn to use the browser console.

enter image description here

Upvotes: 1

Related Questions