Rails - How to get the file path inside JavaScript in Rails app? - javascript

I am working with a Rails app in which I am trying to specify a json file path inside my javascript. But, it seems like I am not being able to get the file as I should get. I tried both : absolute and relative path to that file. But, nothing worked for me. I know about Rails.root which I used in my rake task to specify a file path before. But, my need this time is to specify a file path inside JavaScript in a Rails app. I am trying to locate the flare.json file. I put that in my app/assets/data/flare.json and tried this :
<script type="text/javascript">
d3.json("/app/assets/data/flare.json", function(error, root) {
.....
}
</script>
But, I get the error in JavaScript console :
GET `http://localhost:3000/app/assets/data/flare.json 404 (Not Found)`
Anyone could please help me which is the correct way of specifying a file path in javaScript in Rails app ?

So let me get this right, you want to load a json file with d3? If this is the case, consider this: The in-browser javascript environment doesn't have access to file resources on the server side. You can load them by specifically exposing files via the server and then do AJAX requests to retrieve them with javascript. So for example:
Move the file to the public directory within your app and then change the javascript to
d3.json("/flare.json", function(error, root) {
.....
}

Put this in config/application.rb
# Enable the asset pipeline
config.assets.enabled = true
config.assets.paths << "#{Rails.root}/app/assets/something"

Related

Node.js file not found, issue with my path format?

I'm working on a node.js application to interact with the Twilio API. I have a problem getting my files to associate in the way I expected. My file directory structure looks like this
myapproot
-public
---form.js
-routes
---index.js
-views
---index.html
-app.js
-config.js
-server.js
In index.html, I conclude the page with the following script declaration:
<script type="text/javascript" src="../public/form.js"></script>
But when I load up the page, I get the following error:
GET: http://localhost:1337/public/form.js 404 (not found)
If I follow the path-link provided by VS code, it shows that js file, but it's not getting loaded into my view. Is there a mistake with my path declaration?
Essentially, what that command is doing is this:
<script type = 'Text/JavaScript' src = 'http://localhost:1337/public/form.js'>
So, what I'd suggest that you try is to set up the server-side code to handle requests to that directory on your server.

can´t load resource javascript with relative path ${pageContext.request.contextPath}

im trying to load a script from a folder i defined in the classpath into a jsp page like this
<script src="${pageContext.request.contextPath}/src/main/webapp/WEB-INF/asset/javascript/formToJson.js"></script>
but i got a 404 error and the url seems good based on the local location of the folder inside the project.
In the classpath i added the asset folder which contain a package called javascript.
this is the first time that i work with relative paths is probably im missing something in my configuration
Any advice will be appreciated
Try changing to:
<script src="${pageContext.request.contextPath}/WEB-INF/asset/javascript/formToJson.js"></script>
Generally, resources under /src/main/webapp/ is deployed in Web application's context path.

navigate up the folder structure

Under my wwwrooot folder I have a sub folder named scripts which has the following structure:
scripts (folder)
options.js
components (folder)
require.js
jquery.js and many more in this folder
I have the following script on my ASP.NET webpage (under _Layout.cshtml):
<script src="~/scripts/components/require.js" data-main="scripts/options"></script>
This is supposed to go to my wwwroot folder to scripts/components and start require.js, where as a parameter I am passing script/options.js file.
(quick note: this was given to me, I did not create it).
Unfortunately, it returns the error that it could not localize my options.js file. By looking into the console window, the GET function should be expecting the following path:
http://localhost:8000/scripts/options.js
whereas on my page GET function is trying to access the following file:
http://localhost:8000/app/scripts/options.js
I believe it is caused by the fact, that my MVC start page is under App controller (to be more precise it is App/index.html).
I believe (correct me if I am wrong), that the problem can be fixed by somehow removing the /app/ from the search string. Unfortunately, I don't quite know how to do it.
Any help on this matter would be more than welcome.

How to Use or Import jQuery custom builder in a Notepad, Sublime etc...

I just want to ask how to use the jquery custom builder since i separate the folder of jquery custom builder to the Login Folder. Here is the folder path for the jquery custom builder
And here is for the Login Folder
I have tried this kind of syntax for getting the Directory of the js file and to other files to but it doesn't seems to work.
<script src = "‪../htdocs/WebSite/jslib/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
i hope you can help me with this since i'm just starting jquery i also read the guide for using jquery i follow the instruction but it's still the same.
Thanks
Where is the html file that imports jquery script tag? It seems like just path problem. Usually, URI paths are based on app server root. There are so many ways managing URI, but XAMPP might let file resource paths show up same as URI paths.
When app server root is located on c:/foo/bar/:
c:/foo/bar/lib/jquery.js -> http://localhost:xxxx/lib/jquery.js
c:/foo/bar/index.html -> http://localhost:xxxx/index.html
So in index.html, import resource as this way.
<script src="‪lib/jquery.js"></script>

Angularstrap popover data-template making GET requests

I'm trying to convert an Express app templated with EJS to Angular. When trying to use the Angular Strap popover I want the popover content to show the data from a HTML partial. The problem is when I reference the file the server makes a GET request for that route and cannot be found.
My express configuration has the index.html file in a templates folder. The statics are in a public folder in a neighboring directory. The complete folder structure looks like this:
app
--public
--templates
-index.html
-user.html
The popover content I want is in user.html and it's being referenced from index.html. My angular code looks like this:
<a
title="User Info"
data-content="test"
data-template="/user.html"
bs-popover>whatever</a>
I've tried user.html, /user.html, and any combination of those. In the console it throws a 404 error from the root saying that http://hostname.com/user.html doesn't exist. My question is, how do I reference a partial html file in angular and get it to point to the right file and not to a GET request to the server?
I've also tried using angular-ui-bootstrap but it lacks partials support.
Thanks!
The files need to be in the folder defined by your Express configuration as the statics folder. So /user.html is looking in public/user.html for the file. If it doesn't find it, then it sends a GET request to the server.

Categories