I am trying create Clint side in Zendesk framework.
I want to include custom js file to perform some action (to keep it separate).
directory structure
app-folder
assets
iframe.html
.
.
sevices
userServices.js
tmp
translations
en.json
manifest.json
I have included file like following (in iframe.html)
<script src="/base-app/services/userServices.js"></script>
i am getting following error
GET http://localhost:4567/base-app/services/userServices.js
net::ERR_ABORTED 404 (Not Found)
Move the 'services' folder under 'assets' and update the script tag to
<script src="services/userServices.js"></script>
Related
I'm currently trying Rails 6.0.0.rc1 which seems to have moved the default javascript folder from app/assets/javascript to app/javascript. The application.js file is now located in app/javascript/packs. Now, I want to add a couple of js files, but for some reason they don't get imported and I can't find any documentation on how this can be done in Rails 6. I tried a couple of things:
Create a new folder custom_js under app/javascript/packs, putting all my js files there and then add a require "custom_js" to application.js.
Copy all my js files under app/javascript/channels (which should be included by default, since application.js has require("channels")).
Adding require_tree . to application.js, which was the previous approach.
How can I load my own js files inside a Rails 6 application?
Get better-organized code and avoid multiple javascript_pack_tags in your application.html.erb file with this approach:
Add your custom example.js javascript file to app/javascript/packs.
Add require("packs/example") to your application.js file.
I would have liked to add a comment to Asim Hashmi's correct answer. But I don't have enough reputation, so I'll add my suggestion as an answer instead.
It isn't necessary to include the ".js" extension inside of the require.
You need to do the following steps to add custom javascript file to rails 6 (webpacker)
1.Create your custom file named custom.js in app/javascript/packs directory.
For testing purpose, write any console.log in it.
// app/javascript/packs/custom.js
console.log("custom js file loaded")
2. Go to your application.html.erb and add the following line at the end of your <head></head>
<%= javascript_pack_tag 'custom', 'data-turbolinks-track': 'reload' %>
3. Now execute rake assets:precompile
This will pack your javascript code (including our custom file we just added)
Now reload your page and you should see the message
custom js file loaded
In your browser console.
My custom js has functions which will be called by embedded javascript of serveral html pages. Following snippet works in Rails6, compiled by webpacker:
put custom js file in folder app/javascript/packs e.g. app/javascript/packs/my_functions.js
say_hello = function(a_text){
console.log("HELLO "+ a_text);
}
add javascript_pack_tag in html file, e.g. index.html.erb .
<%= javascript_pack_tag 'my_functions' %>
<!-- html here -->
<script>
$(document).ready(function(){
say_hello('ABer')
});
</script>
Note : This line is inside html body, not in head
<script src="/packs/js/my_functions-1db66368ebbd2fe31abd.js"></script>
I am trying to use a plugin called Shuffletext to give my text a shuffling effect that iterates through different strings. this is the code for it (just have it in the .erb file while trying to get it how to work cause its easier)
<div id="wrapper"></div>
<script type="text/javascript">
$('#wrapper').ShuffleText([
'Hello world !',
"I'm a jquery plugin",
"I like to <strong>shuffle text</strong> !"
],{loop: true, delay: 5000, shuffleSpeed: 50});
</script>
In a simple folder that just has a .html file and the plugin file it works fine, but when I put it into ruby it throws me this error
home:24 Uncaught TypeError: $(...).ShuffleText is not a function
at home:24
I've been trying for a few hours to try and fix this and I am stumped, any help is really appreciated, here is a link to the plugin if it helps
https://github.com/Nyl000/ShuffleText
I suppose, you didn't plug in this library correctly. I didn't find a gem that integrates this plugin into Rails asset pipeline, so you should put plugin file into vendor/assets/javascripts directory. Just copy shuffletext.jquery.js to this folder.
Then you can either add //= require shuffletext.jquery.js to manifest file (usually it's app/assets/javascripts/application.js) after jQuery, or manually add javascript_include_tag 'shuffletext.jquery' to required pages.
If you decided to require plugin in manifest, you can use it on every page where the manifest is plugged. Usually it is plugged in layout, so all pages that use this layout will have it.
If you decided to use javascript_include_tag, you also should add Rails.application.config.assets.precompile += %w( shuffletext.jquery.js ) to your config/initializers/assets.rb file. In this case you will get your plugin only on those pages where you have specified javascript_include_tag.
Scenerio is that I want to hide the physical paths of javascript files in my MVC web application & I tried to do so as following in my RouteConfig!
routes.MapPageRoute("js", "js/base.js","~/scripts/applicationbase.js");
But, the path produces 404 error!
And it worked when I removed the .js extension from the route like this:
routes.MapPageRoute("js", "js/base","~/scripts/applicationbase.js");
Does it means that a route with file extension can't be created? If not then how can I do that?
I'm working on a rails + angularjs app.
Here is my file structure:
app/
assets/
javascript/
templates/
home.html
partial.html
Inside the home.html.erb file I want to include the partial.html.erb file.
home.html.erb
<ng-include src="'partial.html'"></ng-include>
I also tried
<ng-include src="'<%= asset_path('partial.html') %>'"></ng-include>
But still doesn't work... Thanks for your help
Setup gem "angular-rails-templates"
It will automaticaly compile your templates into javascript, and make them available to angular. After that you may use ng-include as usual.
<ng-include src="'templates/partial.tpl.html'"></ng-include>
It's not a good idea to mix server templates and AngularJS' templates. Put your AngularJS templates in your public directory, then put in the src attribute the path to this template from the client.
public/templates/partial.tpl.html => <ng-include src="'/templates/partial.tpl.html'></ng-include>"
Another way to get the template from the client is to compile your templates to a JS file with html2js for example.
Um trying to load a javascript file as follows to my html.erb file
<script src="/public/javascripts/test.js" type="text/javascript" />
its available on the public folder and its in the root directory
root/public/javascript
but it giving me an error saying
"NetworkError: 404 Not Found - http://0.0.0.0:3000/public/javascripts/test.js"
what could possibly wrong ? is there a different way to include a javascipt file in rails ?
If the javascript file is in any of the asset folders (assets, vendor, bundle) for Rails 3.x) you can add the script to your html.erb file by adding the following:
<%= javascript_include_tag('test.js') %>
You don't use public. Public is the implied root of the server.
The server will look for a file in public, then try to route it through your router if it doesn't find a match.
You also may want to consider using the javascript_include_tag helper if you are using the asset pipeline.
Rails defaults to using the asset pipeline, so custom js files need to go into the app/assets/javascript directory. Than you wouldn't even need to load the file in your view.
but as to your question.
To serve the files from the public directory, you will need to enable a config setting
config.serve_static_assets = true
You'd commonly put this in one of you environment config files.
To server files from public directory do above setting and hit
config.serve_static_assets = true
<script src="/javascripts/test.js" type="text/javascript" />