I want to insert an external javascript file in my JSF page. So what I did is:
Now, the JSF file is named start.xhtml and both are sitting in the same folder. However, when I ran , there is nothing happend [ The javascript supposed to pop up alert when I click]. I checked the page source, and apparent in the .
What did I do wrong to get the RES NOT FOUND? I even put absolute path but nothing happened :(. Me sad panda.
Fyi, I am using the latest Netbeans.
Thanks,
Song.
Try including your script this way
<script src="#{facesContext.externalContext.requestContextPath}/yourPathAfterWebpages/scriptFile.js" type="text/javascript"></script>
First of all, an absolute path must work. It's not question of Netbeans or Glassfih, or JSF - it's a browser thing. And if your browser had a fault preventing it from fetching Javascript from valid urls, you would have noticed. So if your Javascript does not load, there's a 99% chance it's a plain typo, a stupid mistake (forgetting directory name, adding an extra slash or such things), and nothing to do with any of the mentioned technologies.
The other theory (just a theory - I don't have enough data to prove it) is that you have a standard mapping, showing all the faces files in a "virtual" faces directory (/faces/*). So that when you put your index.xhtml in the main directory of a Foo project, you see it under: localhost:8080/Foo/faces/index.xhtml. The "faces" part of path does not represent any real directory, it's just a mapping. So if you have a js file sitting by an index.xhtml, you would address it like: '../yourjavascript.js'; the ../ is to compensate for the virtual directory part.
Anyway, I strongly encourage you to drop your script loading dillemas and use the official and nice way of loading resources such as javascript is to put them into a directory called "resources" (make one under the "web pages" node in Netbeans, it will end up in the top directory of your .war); to get a path of any file saved under resources, you use EL like: #{resource['filename.css']}. You will load your script by:
<script src='#{resource['script.js']}' ></script>
If you use the resource directory, you can do many more things, read up on some detailshere
Related
I’m new to the world of HTML. I wanted to create a local copy of the website I wanted to play around with by copying, pasting and saving the HTML source, as well as saving the webpage (with all the CSS, javascript, .ico elements etc.) and placing the HTML file in the same directory. However, when I opened up the HTML file, it was broken, and all styles were gone. Why is this so? Sincere apologies if this is a repeat, I didn’t really know what to search when looking for an answer. Thank you!
Without going into too much detail - Most modern websites are incredibly complex (JS, CDNs, webfonts, crossdomain content, etc etc) and are unlikely to look like anything reasonable when 'copy and pasted' to a local location.
If you're using Chrome I'd try the More Tools -> Save Page As feature which is slightly smarter about preserving dependencies, and even then it might not work very well.
Your best bet is to analyze the site inside of the browser, e.g. Chrome's Developer Tools and apply your learnings to a local stack you create from scratch.
It's kind of impossible to know what's going on without seeing the code or what (if any) errors are being produced by your browser.
I would suggest opening the JavaScript console in your browser to see if there are any errors. I could guess that the JS and CSS files are being referenced with an absolute path, and because you're serving them form the filesystem you need a relative path. But like I said, you're just going to have to debug this yourself.
The html file doesn't always contain everything it needs to render the page. Often css is stored in external files. The html file you copied should have a reference to the css that looks like.
<link rel="stylesheet" href="styles.css" >
It sounds like the stylesheets / scripts in the copied html are pointing to files that don't exist in your copied environment.
Could you post the way you have the files structured?
It could be that you have the filesystem set up differently than in the original webpage, ex/
wwwroot/
|-- index.html (which has stylesheet references to "css/styles.css")
|-- app.js
|-- styles.css
^ here the index.html file would be looking for styles.css in a folder called "css", but the styles.css file is not in that location.
(I'm aware this is not an actual answer, and may be more appropriate as a comment. I don't have enough reputation for commenting, so my apologies if I'm not following the StackOverflow ways of doing things.)
This could be the issue ideally because of the use of the external resources which are being used in that webpage and are not present on your local system.
You can check it from the developer console in chrome or whichever browser you are using.
Press F12 while viewing the webpage, this will open the Developer Tools
Click on the Console tab, here you can see all the errors and warnings that can cause any issue to that page.
Refer to the screenshot for the process:
You will be able to see errors in red color and warnings in orange color.
right now in my footer I have 2 .js files ( jquery.min.js - myjs.js ).
So, by considering that myjs.js is a very small file 5kb can I copy this code into the jquery.min.js file to reduce 1 request?
What is better bewtween: Leave 2 files, inline myjs.js or merge this 2 files?
Thank you
As said, you can add your code to the jQuery file, however I would not recommend doing so.
Having two separate files allows you to more easily expand, debug, and modify your own code. It would also help others looking at your site (as well as you future self) understand what's going on; alljs.js is opaque compared to appjs.js and jQuery.js. Additionally, updating jQuery in future, should you want to, is much easier if jQuery isn't mixed in with your own code. And having two separate files allows the browser to cache them independently.
If you would like to only have one JS file, including your small Javascript inline is a better option. However, I would much sooner recommend other optimizations, like setting up a build process to minimize your JS and deploy it to a dedicated production server.
Yes, provided that you host the file you can modify it however you want to - after all it's basically a text file with a file .js extension. Simply open it with a text editor (or your IDE), and add your JavaScript to the bottom. Don't delete their licensing or comments though out of respect for property rights.
Better to serve 1 file for performance purposes. The establishment of the TCP link (the pipe) to fetch the second file is not insignificant. Another option is to put that other javascript in the HTML file, in a <script> tag just before the close of your <body> tag.
I'm using Primefaces 5.1. When I load my web page, go into the Firefox debugger and look into the javascript, I see that it has loaded some javascript (Primefaces.js.jsf to be precise) which is part of Primefaces 5.0 version. Now, I have taken care to delete all the references of 5.0. But still I get the same result.
So, my question is- when a web page is loaded, and we see the javascript files loaded, how do we know where a particular script file is being retrieved from?
P.S: I'm not the one who wrote the code to include this js. it is part of the framework. So, I have no control over where it is being accessed from. All I can do is if I know the path of the file, I can modify it to suit my needs.
I have deleted the history/cache/Temporary files and also loaded the page using Ctrl + F5. Didnt help.
Found out why the project was still referring to PF5.0. The primefaces-5.0.jar still co-existed with primefaces-5.1.jar in the WEB-INF/lib directory of the project residing in the glassfish directory 'glassfish3\glassfish\domains\domain1\eclipseApps'.
I need to regularly send html pages to a client as standalone .html files with no external dependencies. The original pages are done with node.js and express and they contains several librairies such as High Charts.
I have done the preparation manually until now, this includes:
Transform all images into blobs
Copy all external .js and .cs inside the page
Minimize where possible (standards librairies such as jQuery or Bootstrap...)
The result is a single .html file that can be opened without an internet connection and looks just like the original.
Is there any tool to do this automatically? If not, maybe I'll code it myself in Python. Do you have any recommendation around that?
Thanks
Monolith is a CLI tool for saving complete web pages as a single HTML file
See https://github.com/Y2Z/monolith
With apologies to OP, as this answer is probably far too late for him, but I'm posting it to help anyone with a similar problem:
HTTrack is an open-source project that does almost exactly what you described, though it doesn't work perfectly on some of the more peculiar JS.
It saves the page with most of the JS, the major images, and everything that the page needs to appear complete. It can be configured to include or exclude the entire or partial JS, images, and CSS.
This does not import all of the JS and other content into the HTML file, but neatly organizes all of the content into one folder and corrects all of the paths to make the folder portable.
It also seems to have trouble grabbing some external sources that are protected, but if it is your local site and simply uses common scripts like JQuery, you should be fine. When I tested it, it correctly downloaded all of my local CSS and any valid external CSS library that I incorporated, the JQuery and derivative scripts that I was using, and the embedded images.
Just to save everyone a question, the program by default saves the downloaded websites to C:\My Web Sites.
I'm stuck... I'm trying to reference a javascript file that has been embedded inside a third party assembly, but it doesn't seem to work:
What I've done:
I have a folder RefAssemblies where this library DLL with embedded javascript file is located
I added a project reference and pointed to this library assembly
I added a line in my javascript file where I want the reference to work ie.
/// <reference name="ScriptName.js" assembly="AssemblyName" />
I tried naming my assembly with name only, and also with full assembly name including name, version, culture and public key token. No difference.
Added my library assembly to my project's web.config inside system.web\assemblies (AFAIK that's the part where you have to add your assembly and make it well-known in your application) so I should be able to access it without referencing assembly at all just resource name. No difference.
And yes I was pressing the Ctrl+Shift+J after any change I've done so Visual studio refreshed Javascript intellisense cache. I even unloaded and reloaded my web project after I changed web project's web.config. Just so that Visual Studio would read the file and reload everything anew.
But still unlucky... And I'm not getting any Javascript Intellisense errors in the General output window either...
I must be missing something...
Additional note:
It may be helpful to know that I'm running ReSharper 6.1.1000.82 within Visual Studio 10.0.40219.1
Other things I've done afterwards
Uninstalled ReSharper from my machine
Reset Visual Studio by running it from command prompt using
devenv /ResetSettings
No luck either.
Do you have any other suggestions I might do?
I'm also having odd problems with embedded resources. I have managed to get it working though by using the fully qualified resource name. You can find that out by using ilspy to open the assembly and then select the Resources folder, then the full name of all the resources will be displayed.
As i said i have gotten this to work in one solution, but in others it doesnt work and i have no idea why.. the non working solution has a diffrent structure where the diffrent assemblies are in diffrent folders, but i have nto been able to isolate that as the cause..
-edit-
After much trial and error it seems like the key thing to making embedded javascript references work is to set the output folder for the project containing the reference to bin and not bin\debug.
from what i can gather, there are no other settings or assembly references that affect the embedded resources, only the output folder of the project that has the reference. i'm guessing that the javascript language service is unable to find the assemblies with embedded resources unless they are in the private path or the gac, but i have yet do understand exactly where this binpath is set.
i've tried setting it on the project itself and on what i think is the actual language service exe, but to no avail.
i made a connect issue here:
https://connect.microsoft.com/VisualStudio/feedback/details/770185/js-references-to-embedded-files-require-the-referencing-project-to-have-outputpath-bin