Rails 4.2.2 - How to create jstree dynamically?

Question

In rails 4.2.2, I am using jstree and ancestry gems for files structure. Right now I am able to generate the ancestry data but I am not able to access it in jstree function. I have referred from this tutorial . When I used the same example I got an error like below,

NoMethodError (undefined method `category_path' for #<Module:0x00000004b1cd40>):
app/models/category.rb:12:in `block in build_display_ancestry'
app/models/category.rb:7:in `each'
app/models/category.rb:7:in `build_display_ancestry'
app/models/category.rb:21:in `viewed_ancestry'

Model code is,

class Category < ActiveRecord::Base
  has_ancestry
  belongs_to :user
  belongs_to :asset

  def self.build_display_ancestry(category_hierarchy, tailored_hierarchy_data = [])
    category_hierarchy.each do |category_data|
      state = category_data['children'].empty? ? 'leaf' : 'open'
      custom_display_data = {
        :data => category_data['name'],
        :state => state,
        :metadata => { href: Rails.application.routes.url_helpers.category_path(category_data['id']) },
        :children =>  build_display_ancestry(category_data['children'], [])
      }
      tailored_hierarchy_data << custom_display_data
    end
    tailored_hierarchy_data
  end

  def self.viewed_ancestry
    build_display_ancestry(self.arrange_serializable, [])
  end

end

Controller code is,

class Users::CategoriesController < ApplicationController
  def index
  end

  def view_ancestry
    render json: { data: 'Categories', state: 'open', metadata: { href: categories_path }, children: Category.viewed_ancestry }
  end
end

View is

<div id="category-hierarchy"></div>

<script type="text/javascript">
  $(document).ready(function(){
  $("#category-hierarchy").jstree({
    "json_data": {
        "ajax" : {
            "url" : $("#category-hierarchy").attr('data-path'),
            "data" : function (n) {
                return { id : n.attr ? n.attr("id") : 0 };
            }
        }
    },
    plugins : ["themes", "json_data", "ui"],
    themes : {"theme": "default", "icons":false, "dots": true, "open":true},
    core: {"animation": 100}
   }).bind("select_node.jstree", function(e, data) {
    if (jQuery.data(data.rslt.obj[0], "href")) {
        window.location = jQuery.data(data.rslt.obj[0], "href");
    }
  })
 });
</script>

Route is,

get 'users/categories/index' => 'users/categories#index', :as=> :categories
get 'users/categories/view_ancestry' => 'users/categories#view_ancestry', :as=> :users_categories_view_ancestry

Here, do I need to create category_path route or not? If yes, what should be the action? Please help me to solve this issue and also give me some examples(with full code) link to refer.

Answer 1

jsTree changed it's syntax, a lot, check on theres web page. i was able to pass (from same tutorial :)) this step by changing code from tutorial as:

.jstree({ 'core' : {
    'data': {
            'url' : '<some url>/<JSONdatasource>',
            'data' : function (n) {
                return { id : n.attr ? n.attr('id') : 0 };
            }
    }
  }
})

just follow (all the) changes on the web page, although very inconvinient i must say.

edit. note, although a question (as asked) indeed have problem with undefined method, the root/underlying problem at time of my answer is a changed syntax for JSON data for jsTree nodes.

Answer 2

You can enter rake routes | grep categor rake routes | grep categor in your rails app directory, using your terminal to see which routes are available.

You probably should be using rails resource routes though:

http://guides.rubyonrails.org/routing.html

namespace :users do
  resources :categories do
    collection do
      get :view_ancestry
    end
  end
end