I'm trying to serve my bootstrap.min.js to the page. But for some reason it isn't working. But the bootstrap.min.css works perfectly fine. What did I do wrong?
In the picture you can see my structure and part of my code. There isn't much going on really. I'm trying to serve the JavaScript like this:
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
I do the same for the CSS and it works.
So there are a few comments and answers that led to the solution of my problem.
Reading #Josh-Beam's reaction I started to inspect the page finding that I had to include jquery.min.js before bootstrap.min.js like #Daniel said.
After that I got an error saying bootstrap needed popper.js to be able to run.
I included this popper.js because the other ones gave me an Unexpected token error. I placed popper.js after jquery.js
It runs perfectly fine now. My final code looked like this:
<script src="../js/jquery.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
Use /js/bootstrap.min.js instead of ../js/bootstrap.min.js. And declare your middleware this way:
app.use(express.static(path.resolve(__dirname, 'public')));
Related
Previously I was using managed hosting but have recently been testing a VPS server setup running CentOs with Virtualmin.
I have moved over a website which works absolutely fine on the managed hosting, but moving it to the VPS gives me multiple JS errors. For some reason, it doesn't seem to be loading any of the JS scripts. When I replace the scripts with CDN links, it all works fine again.
I've checked the directory permissions and they're set the same as the previous hosting, I can also access and read each file using website.com/js/bootstrap.min.js for example. The only difference is the JS directory itself is "Forbidden". I'm not sure if that makes a difference when I can read the actual files?
My question is, why could this be happening if JS runs similar to HTML and works fine when using the CDN scripts? Also, what is the meaning of the random IDs contained in the JS SRC scripts right before text/javascript shown below, could this be the cause?
<script src="js/jquery-3.2.1.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/bootstrap.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/jquery.slicknav.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/owl.carousel.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/jquery.magnific-popup.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/circle-progress.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/mixitup.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/instafeed.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/masonry.pkgd.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/main.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/rocket-loader.min.js" data-cf-settings="7fb652456240e11add396d8d-|49" defer></script></body>
</html>
It seems that you didn't put JQuery back on your new hosting.
There are a few clues:
'unexpected token': jquery uses $
'jQuery is not defined'
It could also be that you put jQuery in a different location than where it was on your managed hosting. It could also be that it's still pointing to your old hosting.
If that doesn't work, try removing the text before text/javascript (although I doubt that's the issue, considering it worked on your old hosting). Also, Javascript's mime type is application/javascript.
Try checking those. That should fix your problem.
I can also access and read each file using
website.com/js/bootstrap.min.js for example. The only difference is
the JS directory itself is "Forbidden".
This doesn't make sense. Either the folder is forbidden or it is not.
If you can access that folder through the browser url, then clearly it is not forbidden. If you get a 'Forbidden' message in your browser, then obviously the folder is forbidden and you found the problem.
My question is, why could this be happening if JS runs similar to HTML
and works fine when using the CDN scripts?
Go to the network tab in your browser and check the http status that you receive in the browser for the resource that you request, i.e. jQuery in this case. The error that bootstrap throws is probably just a consequence of the fact that jQuery isn't loaded. I guess there must be a dependency.
If not, in the absolute worst case you can load the unminified version of the script that throws, and debug the problem based on the original source code.
The reason why it works for a CDN is obviously because these domains allow you public access to the resource it hosts, if not you wouldn't be able to get it, and it is sort of the point of using a CDN.
Btw, you should use a CDN, there is no clear argument as for why you shouldn't for these common libs.
Also, what is the meaning of the random IDs contained in the JS SRC
scripts right before text/javascript shown below, could this be the
cause?
I assume that you mean in the type, not in the src attribute of the html.
This is your code:
<script src="js/jquery-3.2.1.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
This doesn't make sense. If anything, they look like generated hashes which often happen when you load chunks of Javascript asynchronously.
It must be framework related, although I have no idea what framework you're currently using. I don't know if you're using SSR, CSR, templating library, bundling library etc.
But it should be clear that something generates this string for you. You need to check your template, what generates your template, and either way, remove the type altogether if you can. It's really useless in that spot.
I have been trying to reference my JS in my html file for a while now. I have tried many different methods that people have told me and none of them have worked. Here is what I have at the moment. <script src="script.js"></script> Yes, both files are in the same folder along with my style.css file. The reference I have for the style.css file works. I used <link rel="stylesheet" href="style.css" />
Can someone please help me fix my JS reference?
If its doesn't work check console for any problem Or check directory of script src!
someways javascript is disable on your web browser . check it and enable .
You should try:
<script src="/script.js"></script>
Some web servers might want that leading slash, while others don't need it.
I've tried reading over the "guide" on their website, and none of it makes sense to me. I thought it'd be the same thing as JQuery, but apparently I'm missing something.
I have this appended in my html document (where it's appropriate of course):
<script src="respond.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/react#latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<script src="app.js"></script>
<script type="text/babel" src="app_2.js"></script>
As you might have guessed, I'm using Adobe Dreamweaver to develop my webpage.
That is what the first script element is for. The second being for JQuery.
After running an "example" for ReactJS with JSX, I found the three following script elements in the html document. That, to me, tells me that all I had to do in order to get it working is link those in as well.
Long story short: it didn't work. I tested it on Firefox and Chrome.
The thing I'm still scratching my head over is the error I receive when trying to view the remote files for the ReactJS-related files (on DW):
Not found: package "filename%version"
Where filename is the name of the JS file and version is the version (I'm assuming).
This only occurs for those files and not for JQuery. DW still let's me know that the file is remote and cannot be altered, but I get nothing for the other remote files.
What gives?
I was able to get it working after some scrambling, reading, and random attempts.
Turns out I was getting in my own way.
Because of the tutorial I was learning react from, I had assumed I was required to always create a react object and react-dom object.
After removing those two declarations from my js file, I was able to then see the expected results in my browser.
The only thing I can think of as to why those declarations would cause an issue is either because one of the files I import already does so (which has to happen as I don't declare the "React" or "React-dom" instances anymore but am still able to use them) or it is no longer required explicitly. The tutorial I went through was a bit dated.
I'm gonna have so much fun with this!
My console gives me three 404 errors which are due to missing .js files loaded in my head section. I practically don't need them. But I want to stop getting 404s. It's really messing up my analytics and my SEO probably.
Files are listed below:
<script type="text/javascript" src="http://myserver/skin/frontend/base/default/js/submenu/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://myserver/skin/frontend/base/default/js/submenu/jquery.noConflict.js"></script>
<script type="text/javascript" src="http://myserver/skin/frontend/base/default/js/submenu/jquery.accordion.min.js"></script>
So I noticed that some developer renamed the "submenu" folder to "-submenu", in order to avoid jquery conflicts. So I've tried to look for the files that load these .js's but I really don't have any clue where they are. I've spent hours searching for all local.xml, config.xml, page.xml, head.phtml, header.phtml files but still can't find anything.
Any clues to how can I easily trace what is loaded in my head section? Is there a "debugger" for this? Sorry, noob-in-coding designer
In the root directory of your magento you could do in a terminal
find . -iname "*jquery-1.10*"
find . -iname "*noConflict*"
This would find the files, but to remove them from being called:
You could also do a
grep -rnw . -e noConflict
and so on
To search within files, to find which layout xml or phtml file is adding them
I am having some trouble getting started with using javascript files on my website (A Flask application). I start the website by running run.py which looks like this:
#!flask/bin/python
from app import app
app.run(debug=True)
In my html page I have the following code which gives a 404 error:
Error message:
My file structure looks like this:
Any hints to where I'm going wrong?
Ah yes, luckily I am currently developing a flask application at the moment.
You are currently missing the static folder which by default flask looks into, a folder structure something like this:
|FlaskApp
----|FlaskApp
--------|templates
- html files are here
--------|static
- css and javascript files are here
Two important default folders that Flask will look into templates and static.
Once you got that sorted you use this to link up with your javascript files from your html page:
<script src="{{url_for('static', filename='somejavascriptfile.js')}}"></script>
Plus - A good article to read but not super related but it talks about the folder structure of flask is this: https://www.digitalocean.com/community/tutorials/how-to-deploy-a-flask-application-on-an-ubuntu-vps
So your index.html is at app/templates/index.html, and your jQuery is at app/javascript/jQuery.js right?
I think your path is wrong. Try this:
<script src="../javascript/jquery.js"></script>
Try using src="app/javascript/jquery.js".
Also, I noticed you include jquery.js twice - on line 7 and 28.
Here is what helped me eliminate the jquery part of my Flask project
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
This was taken straight from Basic Template found in http://getbootstrap.com/getting-started/