I can't for the life of me get templateUrl from a custom directive to link to html template file in my Rails app. I've tried using the angular-rails-templates gem as well as some other methods. Here's what I have so far:
angular application:
window.App = angular.module('myTestApp', ['templates']);
App.directive('testingDiv', [function(){
console.log('hey')
return {
templateUrl: {
restrict: 'AE',
templateUrl: 'test.html'
}
}
}]);
(I see the console logged message, so I know I'm getting in there)
test_page.html.slim
testing-div
app/assets/templates/test.html
<div>TESTING!!!!</div>
The order I require relevant assets in my application.js file:
//= require angular
//= require angular-rails-templates
//= require angular-ui-bootstrap-tpls
//= require angular-resource
//= require_tree ./angular
UPDATE:
I tried just
return {
template: '<div>TEST</div>'
}
and it didn't show up either. Think it has something to do with the slim file?
//= require_tree ../templates or it won't work. I just checked in our code.
Edit: I think there is a mistake in your syntax, fixed version below:
App.directive('testingDiv', [function(){
console.log('hey')
return {
restrict: 'AE',
templateUrl: 'test.html'
}
}]);
Related
I tried adding https://github.com/ejbeaty/CellEdit to my Rails application. The code in https://github.com/ejbeaty/CellEditworks works perfectly as standalone; but when I include celledit.js inside my Rails application, i get this error in my broswer development console:
TypeError: jQuery.fn.dataTable is undefined
While the same code works fine in standalone application, why am I getting this error in Ruby on Rails app? What does this error mean? And how do I resolve it?
NOTE:
The error is coming from the function definition shown below:
jQuery.fn.dataTable.Api.register('MakeCellsEditable()', function (settings) {
var table = this.table();
jQuery.fn.extend({
Add the jquery rails gem to your Gemfile:
gem 'jquery-rails', '~> 4.3', '>= 4.3.1'
Run run bundle install.
Then include the dependencies in the correct order in your app/assets/javascripts.js:
...
//= require jquery
//= require jquery.dataTables.min
//= require dataTables.cellEdit
//= require_tree .
//= require_self
In this case I just downloaded the files and placed them in app/assets/javascripts.
If you are using Turbolinks you want to hook the initialisation onto the turbolinks:load event as document.ready only happens on the initial page load:
//= require jquery
//= require jquery.dataTables.min
//= require dataTables.cellEdit
//= require_tree .
//= require_self
$(document).on('turbolinks:load', function(){
var table = $('#myTable').DataTable();
function myCallbackFunction (updatedCell, updatedRow, oldValue) {
console.log("The new value for the cell is: " + updatedCell.data());
console.log("The values for each cell in that row are: " + updatedRow.data());
}
table.MakeCellsEditable({
"onUpdate": myCallbackFunction
});
});
If you are not using Turbolinks then just use jQuery.ready(function(){...}) instead of $(document).on('turbolinks:load', function(){});.
I am using Rails 5 with react-rails gem. I want to use server-side rendering, but I see this error:
React::ServerRendering::PrerenderError in Home#index
Encountered error "# ExecJS::ProgramError: TypeError: Cannot read property 'serverRender' of undefined" when prerendering Main with {}
This is my /assets/javascripts/application.js:
//= require rails-ujs
//= require jquery
//= require react
//= require react_ujs
//= require_tree .
This is javascripts/components.jsx:
class Main extends React.Component{
render(){
return (
<h1>Hello</h1>
);
}
}
and this is the view:
<%= react_component('Main', {}, {prerender: true}) %>
Without prerender option, everything works.
I've had a similar issue and here's how I solved it
run command rails generate react:install
This will create the components folder and some required files under your javascripts/ dir.
Now, place your components.jsx in /assets/javascripts/componets directory
refresh the page.
I'm running rails 4.2.10 and haven't tested rails 5 but I'm guessing this should do the trick.
Let me know how you get on
I'm working with Rails 4 and AngularJS. I've got my app working. Controllers, directives, services, etc. However, my main app.js file refuses to fire the config and run functions. I've got some console.logs in there to test how far it gets. Here's the code:
angular-app/app.js
'use strict';
console.log('we see the app.js file'); // This works
var app = angular.module('bruno', [])
console.log(app) //This works
// This is where is stops working
app.config(function ($httpProvider) {
alert('config'); // Can't see this
$httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');
})
app.run(function () {
console.log('App is running'); // Can't see this
});
Like I said, my other controllers are working just fine. The console doesn't show any errors and everything loads just as it should.
Rails application.js file:
//= require angular-app/app
//= require_tree ./angular-app/templates
//= require_tree ./angular-app/modules
//= require_tree ./angular-app/filters
//= require_tree ./angular-app/directives
//= require_tree ./angular-app/models
//= require_tree ./angular-app/services
//= require_tree ./angular-app/controllers
I've re-written this every which way I can think of, but to no avail. I'm kinda stumped. I've done it with and without the var app. Hoping this wonderful community can at least help me see something I can't.
Additional Info
I'm using gem 'angular-rails-templates'
Rails 4.2.3
AngularJS 1.3.16
If you need anything else from me just ask. Who knows, maybe by tomorrow morning I'll see things differently. :-)
As it turns out, I was mistakenly re-using the same module name inside another controller. Which was overwriting the module name in app.js. All fixed now.
I use react-rails gem and met specific trouble: prerendering doesn't work. I've wrote the code, but send an exception to me:
Encountered error "ReferenceError: Terminal is not defined" when prerendering Terminal with {}
Here is the sources of my code:
#= require jquery
#= require jquery_ujs
#= require turbolinks
#= require react
#= require react_ujs
#= require components
#= require_tree .
components.js.coffee
#= require_tree ./components
terminal.js.jsx.coffee
Terminal = React.createClass
render: ->
`<div>fffs</div>`
And the view:
= react_component 'Terminal', {}, prerender: true
I'm using default react-rails settings and don't know what's going wrong (I can't understand why react can't find a Terminal component).
Your using prerender: true for server rendering, therefore your need to make sure your component is globally accessible:
#Terminal = React.createClass
render: ->
`<div>fffs</div>`
Read more about it on react-rails documentation.
In the application.js file, I have the requirements, and the on JQuery declaration:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require jquery.pjax
//= require_tree .
jQuery ->
$('#id').pjax('[data-pjax-container]')
However, I am getting the error Uncaught SyntaxError: Unexpected token > in the console. The jquery.ja and jquery.pjax.js files are loading in the resources and network tab of the inspector, so i know it is at least getting the jquery and pjax.jquery code, however, the shortcut `jQuery -> to signify document.ready, throws the error.
When I switch the code to :
$(document).ready(function() {
$('#ce').pjax('[data-pjax-container]')
});
I don't get the error. What is the correct shortcut for document.ready in Rails? I was following the PJAX tutorial here that says to use this notation.
What your are typing is Coffeescript syntax, that's the reason why its a syntax error.