I'm trying to use Dojo Toolkit 1.8 instead JQuery in a Rails 3.2.8 web application, mainly due of the lack of a complete and visually uniform widget based on JQuery. Followed these steps:
Unzip dojo, dijit and dojox directories into app/assets/javascripts
Changed in application.js //= require_tree . to //= require_directory .
Edited application layout (Not unobtrusive yet... just to effect of testing)
views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Dojo</title>
<%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag 'application' %>
<%= stylesheet_link_tag '/assets/dijit/themes/claro/claro.css' %>
<%= javascript_include_tag "dojo/dojo", :'data-dojo-config' => 'async: true' %>
<%= csrf_meta_tags %>
</head>
<body class='claro'>
<%= yield %>
<script>
require(["dojo/parser", "dojo/ready"], function(parser, ready) {
ready(function() {
parser.parse();
});
});
</script>
</body>
</html>
Created a controller named home and a template to the index action
views/home/index.html.erb
<input type="text" required="true" name="bday" id="bday" data-dojo-type="dijit/form/DateTextBox" value=<%= localize(Date.today - 21.days) %> />
<button id="button1" type="button" data-dojo-type="dijit/form/Button">Button 1</button>
Ok, Dijit works nice! But when I try to put some dojo code within a CoffeeScript file (assets/javascripts/home.js.coffee), a "ReferenceError: require is not defined" error message is raised on Firebug console. Sample code:
require ["dojo/domReady!"], () ->
alert('ok')
If I put a //= require dojo/dojo before the code above, it runs, but all dojo modules are loaded (not just domReady) and a "Error: defineAlreadyDefined" is raised on Firebug.
Is there any way to call the require function without having to reload the entire dojo.js or even access a dojo global variable?
Thanks
It was a slip of mine, I swapped the javascripts inclusion order. The correct is:
<%= stylesheet_link_tag '/assets/dijit/themes/claro/claro.css' %>
<%= javascript_include_tag "dojo/dojo", :'data-dojo-config' => 'async: true' %>
<%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag 'application' %>
Dojo wasn't loaded yet when I was trying to require modules within the coffeescript file.
Thank you for your attention.
Related
I'm using ...
Ruby on Rails 5
AngularJS 1.3.20
Chrome or FireFox Browser
It seems ng-change event does not work, when I request get method like link from other page. But when I user POST request to next page, it works.
When I change select box value, onchange event is not happen. I expect ng-change
should reach changeHandler function in sample.js and console.log("ChangeHandler!!!") show up.
In addition, I use Ruby on Rails application template. So ng-app and ng-controller is same as index1.html and index2.html.
** Additional Info
I tried Chrome ng-inspector for AngularJS Tool. But There is no angular panel shown up. But once reload same page, it shows up. What happend?
index1.html.erb
<html lang="ja" ng-app="MyApp">
<body ng-controller="MyController">
<!-- For GET Method Request -->
<div>
<%= link_to 'Index2', sample_index2_path %>
</div>
<!-- For POST Method Request -->
<div>
<%= form_tag sample_index2_path do %>
<%= button_tag "Click" %>
<% end %>
</div>
</body>
</html>
index2.html.erb
<html lang="ja" ng-app="MyApp">
<body ng-controller="MyController">
<div>
<form>
<select id="eventTest" ng-model="eventTest" ng-change="changeHandler()">
<option value="1">AAA</option>
<option value="2">BBB</option>
<option value="3">CCC</option>
</select>
</form>
</div>
</body>
</html>
sample.js
angular.module('MyApp',[])
.controller("MyController", ['$scope', function($scope) {
$scope.eventTest;
$scope.changeHandler = function () {
console.log("ChangeHandler!!!");
};
}]);
This works only POST, or Get and reload Browser.
There are any difference between output HTML source code GET and POST.
I'm stack over 3 days.
Please let me know and advice for me.
The reason why Angular Module does not work properly was JavaScript lib turbolinks.
I fixed this by modifying default setting reload -> false, or erasing data-turbolinks-track.
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
↓↓↓↓
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'false' %>
I'm trying to render data from a JSON file via $http.get().
But when i run the app, the JSON data isn't rendered, and the developer console shows an error:
ERROR:
Failed to load. Resource. The server responded with a status of 404 (Not found).
Routing Error
No route matches [GET] "/phones.json"
THOUGHTS:
I've read that $http.get() follows a relative path to the the given URL, so if phones.json is in the same folder as index.html.erb, i can't figure out why its not loading.
I'm wondering if i need to add something to routes.rb.
controllers.js
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('phones.json').success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}]);
routes.rb
Rails.application.routes.draw do
resources :home
root 'home#index'
end
application.html
<!DOCTYPE html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title ng-bind-template="Phone Library: {{query}}">Phone Library</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body ng-controller="PhoneListCtrl">
<%= yield %>
</body>
</html>
index.html.erb
<div class="container-fluid">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
{{ phone.name }}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
application.js
//= require angular
//= require angular-route
//= require angular-resource
//= require angular-ui-bootstrap
//= require turbolinks
//= require_tree .
gems added:
gem 'angularjs-rails'
gem 'angular-ui-bootstrap-rails'
gem 'responders', '~> 2.0'
file tree
note:
This is part of an Angularjs tutorial called PhoneCat, chapter5 (url:https://docs.angularjs.org/tutorial/step_05). Though i made a few detours earlier on to make it work, so unable to follow it exactly at this point.
I'm not an expert in Rails or Angularjs so any advice would be highly appreciated :)
I cannot get Angular to work with Rails asset pipeline. I have:
application.js
//= require angular
angular.module('myApp', [])
.config([function() {
console.log('In config.');
}]);
application.html.erb
<!DOCTYPE html>
<html>
<head>
<%= javascript_include_tag 'application' %>
</head>
<body ng-app="myApp"></body>
</html>
When I load the page I do not see the expected "In config" in the console. Where are no errors prompted, the source is loaded correctly. After refreshing the page two times, on the third load the console message does appear eventually.
If I replace <%= javascript_include_tag 'application' %> with simply <script src="/assets/application.js"></script>, the application does work as expected.
What am I missing here?
I'm new to web development, so I'm sorry if this is basic stuff. I'm not sure how to connect the code in my application.html.erb or crop.hmtl.erb to the actual files I downloaded. Specifically, I downloaded the files for Jquery UI and Jcrop(which is reliant on Jquery UI) and moved both of them into my application's vendor file (home/website/vendor). I then followed a Jcrop tutorial to install the plugin,but it doesn't work. I think my application isn't successfuly accessing one or both of the downloaded files. The Jcrop guide gave me a suggestion for what to put in my application.html.erb but said I might have to adjust the code according the actual paths. I don't know how to do this or even what to look up to research it. Can anyone help?
Application.html.erb: this is what the Jquery UI guide (http://learn.jquery.com/jquery-ui/getting-started/) told me to put
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>
</head>
This is what the Jcrop guide (http://deepliquid.com/content/Jcrop_Manual.html) suggested I put into my application.html.erb, but said I may have to adjust:
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
crop.html.erb
<% content_for(:head) do %>
<%= stylesheet_link_tag "jquery.Jcrop" %>
<%= javascript_include_tag "jquery.Jcrop.min" %>
<script type="text/javascript" charset="utf-8">
$(function() {
$("#cropbox").Jcrop();
});
</script>
<% end %>
<%= image_tag #thing.avatar.url(:large), :id => "cropbox" %>
Asset files (such as Javascript and CSS) should go in their respective folders inside of app/assets. For instance, if you place your files at the following locations within your application:
assets/javascripts/jquery.Jcrop.min.js
assets/stylesheets/jquery.Jcrop.css
You can then reference these files within your application.html.erb file (or crop.html.erb, using content_for) using the rails asset helpers:
<%= stylesheet_link_tag "jquery.Jcrop" %>
<%= javascript_include_tag "jquery.Jcrop.min" %>
Additionally, there is a jcrop-rails-v2 which may make the inclusion of JCrop assets easier.
Im just looking for a little clarity to better my understanding of the Rails asset pipeline. I have placed my stylesheets and javascripts within app/assets/javascripts and app/assets/stylesheets. Now i am trying to get these views to render on my page but so far nothing is showing.. I wanted to see if someone could confirm if the following looks correct
In my layouts/application i have
<%= stylesheet_link_tag "fullcalendar" %>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "jquery.js" %>
<%= javascript_include_tag "jquery.rest.js" %>
<%= javascript_include_tag "rails.js" %>
<%= javascript_include_tag "application.js" %>
<!-- these are needed for the calendar. -->
<%= javascript_include_tag "jquery-ui-1.8.11.custom.min.js" %>
<%= javascript_include_tag "fullcalendar.js" %>
<%= javascript_include_tag "calendar.js" %>
And my index.html.erb looks like
<html>
<head>
<link href="/stylesheets/fullcalendar.css" media="screen" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='/javascripts/jquery.js'></script>
<script type='text/javascript' src='/javascripts/fullcalendar.js'></script>
<script type='text/javascript' src='/javascripts/calendar.js'></script>
<script type='text/javascript' src='/javascripts/jquery-ui-1.8.9.custom.min.js'></script>
<script type='text/javascript' src='/javascripts/jquery.rest.js'></script>
Am I missing something or just being a real novice ( All constructive criticism welcome)
in Your layouts/application you just need this:
<%= javascript_include_tag "application" %>
<%= stylesheet_link_tag "application", media: "all" %>
and in app/assets/stylesheets/application.css
you just need:
*=require_self
*=require_tree .
and in app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require_tree .
And there's o need to include all the files
You'll have some problems in production if you include js files, to avoid it, you should add such files, ex: "fullcalendar.js" in config/production.rb, config.assets.precompile += %W(fullcalendar.js), and then run rake asset:precompile
You can see a quick overview in Ryan Bates Video: #279 Understanding the Asset Pipeline.
For more info go to the RailsGuide: Asset Pipeline.
Both helped me a lot.