I'm porting my symfony app to Ruby on Rails 4.2.0. My setup works fine in symfony. There is this old post on how to use dojo with RoR, but it uses deprecated code.
In my application.html.erb I have
<script>dojoConfig = {async: true}</script>
<%= javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js'%>
I replaced the symfony wrappers with Rails ones. I also changed the dojo version. I was using 1.9.1. Rails generates this html:
<script>
dojoConfig = {async: true}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js">
The last line is followed by a bunch of compressed javascript and the close script tag in Firebug.
I didn't make any changes in my home/index.html.erb where I'm testing this code. In app/assets/javaascipts/home.js, I have:
//require(["dojo/dom", "dojo/ready", "dijit/Tooltip"], function(dom, ready, Tooltip)
define(["dojo/dom", "dojo/ready", "dijit/Tooltip"], function(dom, ready, Tooltip)
{
ready(function()
{
var head = "<div class='footnote-text'>";
var tail = "</div>";
var fnt1 = head + dom.byId("fnb1").innerHTML + tail;
var fnt2 = head + dom.byId("fnb2").innerHTML + tail;
var fnt4 = head + dom.byId("fnb4").innerHTML + tail;
new Tooltip({ connectId: ["footnote1"],position:["after","above","below"],label: fnt1 });
new Tooltip({ connectId: ["footnote2"],position:["after","above","below"],label: fnt2 });
new Tooltip({ connectId: ["footnote4"],position:["after","above","below"],label: fnt4 });
new Tooltip({ connectId: ["footnote5"],position:["after","above","below"],label: fnt4 });
});
});
//require(["dojo/dom", "dojo/ready", "dijit/Dialog"], function(dom, ready, Dialog){
define(["dojo/dom", "dojo/ready", "dijit/Dialog"], function(dom, ready, Dialog){
ready(function(){
var fnt3 = dom.byId("fnb3").innerHTML;
myDialog = new Dialog({
title: "Contact Me",
content: fnt3,
style: "width: 300px"
});
});
});
The commented out require lines are what I use in my symfony app. As you can see, I replaced them with define as described on the dojo site. When I run it, I get the following error on the Firebug console:
ReferenceError: define is not defined
...define(["dojo/dom", "dojo/ready", "dijit/Tooltip"], function(dom, ready, Tooltip
If I used require instead of define, I get require is not defined.
Update
I tried installing dojo into the app and made some progress. I copied the download from dojo to vendor/assets/javascript/dojo. The dojo directory contains the subdirectories dojo, dojox, and digit
I then added
//= require dojo/dojo/dojo.js
to app/assets/javascript/application.js. I also changed the define back to require in the home.js file. When I reloaded the page, I got an error complaining that it couldn't find Tooltip. I then added:
//= require dojo/dijit/Tooltip.js
On reload it complained about a bunch of other missing js files. This is the same problem I had using symfony, which is why I went to the google image. How can I get to rails to search for the files in the vendor directories? This is one of the errors:
"NetworkError: 404 Not Found - http://amcolan.loc/dijit/_base/manager.js"
Update 2
Since require_tree worked for app assets, I thought it might work to vendor as well. I added
//= require_tree ../../../vendor/assets/javascripts/dojo
to my application.js file. When I reloaded the page, it took about a minute. My guess is that it's loading everything in the dojo directory tree, which is not surprising. The page load completed without any errors. When I hovered over a tooltip item (the purpose of the code is to show tooltips), Firebug cranked out about two thousand errors and quit. All the errors appear to be "ReferenceError: define is not defined"
Update 3
I went back to using the googleapi. My application.html.erb header looks like this
<head>
<meta charset="UTF-8">
<title><%= content_for?(:title) ? yield(:title) : "American Colonial Ancestors" %></title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<script>dojoConfig = {async: true}</script>
<%= javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js'%>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
I reversed the order of the javascript includes. The page reloaded without errors. The tooltip doesn't work, but it doesn't generate any errors when I hover over an item. I put a bad statement in the home.js code and it came up on the console so I know the code is being parsed. I may just have a bug in my page setup.
There may be more than one way to get Dojo toolkit to work with Ruby on Rails. This is the easiest if not the most efficient way. This works in Rails 4.2.0. I would imagine it would work in other versions as well.
In views/layouts/application.html.erb add the following prior to the inclusion of the site scripts:
<script>dojoConfig = {async: true}</script>
<%= javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js'%>
Change the version to the latest or to which ever one you want to use. Here I'm using version 1.10.3. The dojo site says there are other CDN's (Content Delivery Network) for the source code. I'm using google as it was in their example. Here are the pertinent parts of my head section:
<head>
<meta charset="UTF-8">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag "http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dijit/themes/claro/claro.css" %>
<script>dojoConfig = {async: true}</script>
<%= javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js'%>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= content_for :page_script %>
<%= csrf_meta_tags %>
</head>
If you are going to use any of the toolkit's dialog boxes, tooltips, etc, you will need to include a stytlesheet by adding something like this:
<%= stylesheet_link_tag "http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dijit/themes/claro/claro.css" %>
Change the version and the theme to your own requirements. Here I'm using the claro theme. You can see it in my head section above. I don't think placement is critical. You also need to declare your theme class in the body statement. Here's mine:
<body class="claro">
An older post on the subject had different javascript formatting. I don't think anything special is needed. Here's an example of a working script:
require(["dojo/dom", "dojo/ready", "dijit/Tooltip"], function(dom, ready, Tooltip)
{
ready(function()
{
var head = "<div class='footnote-text'>";
var tail = "</div>";
var fnt1 = head + dom.byId("fnb1").innerHTML + tail;
var fnt2 = head + dom.byId("fnb2").innerHTML + tail;
new Tooltip({connectId: ["footnote1"], position:["after","above","below"], label: fnt1 });
new Tooltip({connectId: ["footnote2"], position:["after","above","below"], label: fnt2 });
});
});
As mentioned in my question, I tried placing the Dojo Toolkit source in vendor/assets/javascript. Starting with with version 1.7, dojo started using Asynchronous Module Definition (AMD). It may be the case that the AMD loader is incompatible with the Rails pre-compile feature. I don't know enough about it to say for sure.
I am stuck at Delete/Destroy. Any help would be appreciated!
I am using Ruby 2.0.0 and Rails 3.2.6 on Mac 10.8.3 with Postgres.
This is the delete link which supposed to work:
<%= link_to 'Destroy', #product, method: :delete, data: { confirm: 'Are you sure?' } %>
But when I click on the Destroy link it directs me to the user's profile. I don't get any confirmation window and no action is done (delete). It seems it is just stayed at the same page. I am using Firefox but in IE and Chrome are the same.
This is what I have:
the gem "jquery-rails" is installed
applications.js (from app/assets/javascripts) has these lines:
//= require jquery
//= require jquery_ujs
//= require_tree .
application.html.erb (from app/views/layouts) has these lines:
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
In view source I see:
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="MVlJi+WJE1cwWoHnBrpRWIa13gqio0iPT3IL6kpQYdE=" name="csrf-token" />
in products_controllers.rb (from app/controllers) I have:
def destroy
#product = Product.where(:id => params[:id]).first
#product.destroy
respond_to do |format|
format.html { redirect_to products_url }
format.json { head :no_content}
end
end
in routes.rb (from config) I have:
resources :products
What is wrong with that Destroy link?
On the same RoR project the Edit link works fine.
So, why the link doesn't work? Is it a Javascript problem or some other problem which I am not seeing?
And here is the server's log: (It seems the "delete" action does not been executed)
Started GET "/products/9" for 127.0.0.1 at 2013-08-01 20:01:08 -0500
Processing by ProductsController#show as HTML
Parameters: {"id"=>"9"}
Product Load (0.1ms) SELECT "products".* FROM "products" WHERE "products"."id" = 9 LIMIT 1
Rendered products/show.html.erb within layouts/application (0.5ms)
Completed 200 OK in 27ms (Views: 25.8ms | ActiveRecord: 0.1ms)
One helpful way to handle path issues with Rails is to type "rake routes" in your console, in order to have a list of all the paths available to play with your ressources.
By declaring "resources :products" in your routes.rb file, "rake routes" will provide a list of Prefix/Verb/URI Pattern/Controller#Action for this particular resource. You will have something like:
Prefix Verb URI Pattern
product GET /product/:id(.:format) product#show
PATCH /product/:id(.:format) product#update
DELETE /product/:id(.:format) product#destroy
Take the word of the prefix column (product), add _path to this word (product_path), use the correct method (DELETE), pass the ids as parameters (in this case, you can just do product_path(#product)), and you're done. You will have :
<%= link_to "Delete", product_path(#product), method: :delete, data: { confirm: "Are you sure?" } %>
Perhaps (I'm just guessing, but one day I ran into a similar problem) if you design catalog or shop with a shopping cart based on the book Agile Web Development with Rails, the product model may contain a filter before_destroy :ensure_not_referenced_by_any_line_item that prevents the product from destroy in case if product listed in LineItems. If this is your case, you can clear list of LineItems in the ProductsController before destroying the product. Otherwise sorry.
I'm following the Beginning Rails 3, Updated book from Apress 2010. The problem I'm having is with loading a Template dynamically with Ajax using the jQuery adapter. Everything works but it appears to be rendering three times on the page.
Here is how I dynamically load it when the user clicks the "new comment" link.
views/articles/show.html.erb
<%= link_to "new comment",
new_article_comment_path(#article, :format => :js),
:remote => true,
:id => 'new_comment_link' %>
Then I render it as such.
views/comments/new.js.erb
$("<%= escape_javascript render :file => 'comments/new'," +
" :formats => [:html], :handlers => [:erb] %>")
.insertAfter('#comments');
Then I see this in the log.
Started GET "/articles/1/comments/new.js" for 127.0.0.1 at 2013-01-18 14:51:05 -0600
Processing by CommentsController#new as JS
Parameters: {"article_id"=>"1"}
Article Load (0.2ms) SELECT "articles".* FROM "articles" WHERE "articles"."id" = ? LIMIT 1 [["id", "1"]]
Rendered comments/new.html.erb (53.8ms)
Rendered comments/new.js.erb (54.6ms)
Completed 200 OK in 57ms (Views: 55.9ms | ActiveRecord: 0.2ms)
Notice it renders my erb and the js file? Somehow that ends up with showing up three times on my page.
Any clues on how to fix this? I'm using Rails 3.2.9, rails.js (latest), and jquery-1.9.0.
Thanks!
Solved it!
Turns out I was adding rails.js and jquery.js TWICE!
Here is the skinny: assets/javascripts/application.js is crucial for including javascript files into your app. Basically whatever gets defined there gets pushed out to the page. You simply need to make sure that it gets defined at least once in the app as such.
views/layouts/application.html.erb
<%= javascript_include_tag "application" %>
And that's it! The Ajax jQuery adapter should just work. Becareful not to add any additional files to the javascript folder as those will get pushed out as well and that's exactly what you don't want. Basically I was defining the adapter both through application.html.erb and manually by downloading both files. Hopefully this will help a lost poor soul somewhere along the way.
Happy Hacking.
I'm using Rails 2.3.8.
In my application.rhtml I have:
<%= javascript_include_tag "jquery.js"%>
And in my index.rhtml which uses application.rhtml for a layout I have:
<div id="search_residential"> <%= link_to "Residential",
"javascript:residentialSearchForm()", :onclick=> remote_function(:url => {:propertyType => 'residential', :controller => 'site', :action => 'searchform'}, :update => 'search_form', :method => :get)%></div>`
In my partial that should be rendered I have:
<%logger.debug "Residential Form Partial Rendered"%>
When I click the link my log outputs:
Processing SiteController#searchform (for 127.0.0.1 at 2012-10-05 11:11:02) [GET]
Parameters: {"controller"=>"site", "propertyType"=>"residential", "action"=>"searchform", "authenticity_token"=>"Iw3ID/4Lh5IReUwOnhhSUXfn2IIVUnYpqG1N7DE4BHg="}
Rendering site/searchform
Residential Form Partial Rendered
Rendered site/searchbar/_search_residential (5.2ms)
Rendered site/searchbar/_search_form (5.9ms)
Completed in 9ms (View: 7, DB: 0) | 200 OK [http://localhost/site/searchform?propertyType=residential&authenticity_token=Iw3ID%2F4Lh5IReUwOnhhSUXfn2IIVUnYpqG1N7DE4BHg%3D]
But nothing is shown on the website. If I remove the include for jQuery then the partial is rendered.
remote_function is a prototype helper and depends on prototype.js
Jquery would be conflicting at the $ namespace. Its advisable to not use prototype helpers.
Or You should initialize jquery in a noConflict mode.
This is an issue I have been working around for some time now thinking I would eventually stumble on an explaination. I have not and it's now becoming a little more problematic for me.
I used rails-generate-scaffold to create a simple (users and posts) application. This was done after installing jquery and jquery-ui. I added actions "login" and "auth" to the users controller. Login.html.erb contains some javascript that sends .ajax request to the users#auth action passing the login information (email and password) as parameters.
The the template auth.js.erb exists. The "auth" action responds to format.js. The request looks normal, but rails processes the request with the "show" action rather than the "auth" action.
In other words, a request to userscontrollers#auth (via .ajax) is being processed by userscontroller#show (as JS).
The problem goes away if I remove the "resources :users" route that scaffold added (the correct action is then called). But without this route other useful scaffold stuff becomes unuseable (like users#new).
From Gemfile: gem 'jquery-rails', '>=0.2.6'
Installed jQuery with: rails generate jquery:install --ui
From ../layouts/application.html.erb
<head>
<title>Tab1</title>
<%= stylesheet_link_tag :all %>
<%= stylesheet_link_tag 'jquery-ui-1.8.16.custom.css' %>
<%= javascript_include_tag :defaults %>
<%= javascript_include_tag 'jquery.min.js' %>
<%= javascript_include_tag 'jquery.min.js', 'jquery-ui.min.js' %>
<%= csrf_meta_tag %>
</head>
Here is ./log/development.log to shows the request and the response.
Started GET "/users/auth/?email=steve&password=[FILTERED]&_=1326063255777" for 24.11.242.181 at 2012-01-08 17:53:45 -0500
Processing by UsersController#show as JS
Parameters: {"email"=>"steve", "password"=>"[FILTERED]", "_"=>"1326063255777", "id"=>"auth"}
^[[1m^[[36mUser Load (0.2ms)^[[0m ^[[1mSELECT `users`.* FROM `users` WHERE `users`.`id` = 0 LIMIT 1^[[0m
Completed 404 Not Found in 6ms
ActiveRecord::RecordNotFound (Couldn't find User with ID=auth):
app/controllers/users_controller.rb:43:in `show'
Suggests that the request --> GET "/users/auth/?email ... is being processed by UsersController#show as JS
Thanks