I am playing around with an html template and I have noticed that the developer doesn't use RequireJS or anything else to require and call different functions from other node files. Instead, they used this in the html file to initialise and call the function:
<script src="../../assets.js/test.js"></script>
<script type="text/javascript">
$(document).ready(function(){
test.initSomeFunction();
});
</script>
And I've got the below code in assets/js/test.js which defines initSomeFunction in javascript:
test = {
initSomeFunction: function() {
//Some code
}
initAnotherFunction: function() {
//More code
}
}
(It would be helpful if someone can tell me what this method is called so that I can research it more.)
My problem arises when I try to do the same thing in my node app in the home directory /main.js. The node app works fine on its own but when I add something like this:
test2 = {
initMyFunction: function() {
console.log("I finally decided to work! Good luck...");
}
}
and modify my html file like this:
<script src="../../main.js"></script>
<script type="text/javascript">
$(document).ready(function(){
test.initSomeFunction();
test2.initMyFunction();
});
</script>
then it won't work. Can someone please point me to the right direction as I don't even know what to Google. I am trying to avoid using RequireJS or anything else as I am a total beginner and the method that the developer used sounds so simple and tempting.
I wish this answer will help you:
I am using express, so I do this to solved your problem!
main.js file's position:
modify app.js add:
app.use(express.static(path.join(__dirname, '/')));
Then, in the view file:
<html>
<head>
<script src="public/javascripts/jquery-1.10.2.min.js"> </script>
<script src="main.js"></script>
</head>
<body>
<script>
$(function () {
//test.initSomeFunction();
test2.initMyFunction();
})
</script>
</body>
</html>
Open the chrome Developer Tools. You will see the result.
Related
I tried everything mentioned in this forum, Tried newer versions of jQuery Checked every spelling spent two hours to find out the problem but got no result.
Move Jquery to the <head>. If not, you could try
(function($) {
$(function() {
$('h1').click(function() {
$(this).css('background-color', '#ff0000')
})
});
})(jQuery);
This will make sure your Global jQuery variable is bound to the "$".
(function($) {
$(function() {
$('h1').click(function() {
$(this).css('background-color', '#ff0000')
})
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hello World</h1>
You could also load the script externally. I often find this to work better with jQuery.
You need to include jQuery before using it. Move the <script> tags that defined after footer into <head> before script that you try to run.
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('h1').click(function() {
$(this).css('background-color', '#ff0000')
});
});
</script>
</head>
<body>
<h1>Click Me</h1>
</body>
Check if your file is REALLY loaded
Add a new file, and only import jQuery from googleapi. Then, go to your browser's developer tools (F12), abd in console try to execure '$'. If it's not throwing an error, go to 4. If it is throwing an error, go to 3.
Check your internet connection to googleapi: Open the jQuery file in your browser, and check if it is loaded properly.
Try add 'refer' to your script tag like this:
If error still occurs, feel free to comment below.
Insert your script file/code just below the jQuery library file link
<h1>Heading</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('h1').click(function() {
jQuery(this).css('background-color', '#ff0000')
})
})
</script>
It happened because jQuery is not properly installed to be sure before coding run the code below. If it gives you alert message "jQuery is installed correctly" you are good to go.
<head>
<title>JQuery</title>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
if(typeof jQuery=="undefined"){
alert("jQuery is not installed ")
}else {
alert("jQuery is installed correctly")
}
</script>
</body>
I am using HTML, CSS, and JS. I am trying to use the JQuery library but it is not being recognized by my html file. I am inserting it above my external .js file, so I don't think that is the issue. Here is what is in my HTML file:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
This is what is in my JS file:
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 970) {
$('.navbar').addClass('navbar-fixed-top');
}
});
});
My code editor is throwing errors when I save this js file because of errors like:
-'$' was used before it was defined.
-Expected exactly one space between 'fucntion and '('
Anyone know what the issue might be? Thanks in advance.
This might not be the issue, but you may wish to attempt to load the jquery file by HTTPS (https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js), especially if you are running your site on an HTTPS connection.
Otherwise, it seems to work when I test it:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 970) {
$('.navbar').addClass('navbar-fixed-top');
}
});
console.log("done!")
});
</script>
The problem is in your <script> tag, as #B.Fleming said maybe the HTTPS protocol. This tag is working:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
put this in top of your code where you are using jQuery
/* global $ */
alternativ is prefixing it with window
I don't like using the global $ sign cuz other libs are using it as well. what i usably dose is getting the $ from the closure function like this
jQuery(function($){
// document is ready, You may use jquery here and now
$('body')
})
and to get away with jQuery is not defined use window.jQuery instead
ps, always load stuff from https when possible
I have a js code that uses jQuery.MD5 library. It works perfectly on my server:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://example.com/static/js/jquery.md5.js"></script>
</head>
<body>
<script>
// my code goes here (declaring variables and functions)
var code = $.md5('mystring');
// and a little more code
</script>
</body>
But then I upload it to a web application (which I cannot control), that makes it look like this and puts it into an iframe:
<head>
<script>
// some extra variables are declared here
// double-checked that nothing here can break my code
</script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://example.com/static/js/jquery.md5.js"></script>
<script>
// some code
var code = $.md5('mystring');
// some code
</script>
</body>
And this code starts giving me the $.md5 is not a function error. Strange thing. Tried clearing the cache, putting jquery.md5.js code directly into mine, nothing works.
Note that all the code works on my machine, so there must be no problem with my JS.
Update: the problematic code behavior seems to be unpredictable, meaning that sometimes it works fine with no changes.
What can be wrong?
Hm... That's a little embarrassing, but the problem was in jQuery. The one I included in my iframe conflicted with the one included in the page. Somehow this lead to "hiding" my $.md5 function after its code's end.
And yeah, I know, it was quite obvious that jQuery could cause problems.
If you want to use jQuery md5 function you should have import jquery.md5.js file in your project.
Steps-
Download jquery.md5.js file from https://github.com/placemarker/jQuery-MD5
Copy this file into your source folder. (ex: assert/theme/js)
Import that js file to your project.
(ex: <script src="<?= base_url(); ?>/public/assert/theme/js/jquery.md5.js"></script>
)
That's it! You are done!
I am using jQuery a lot, but sometimes I get stuck because my browser cannot see the jQuery library, or maybe loads the library after running the my JavaScript code.
Pseudo-code to explain my question:
<html>
<head>
I always load CSS here
I always load jquery here
</head>
<body>
<p class="link-style3"><span id="my_tag"><span>Bize Hemen Yazın</span></span></p>
<script>
$(function() {
$('#my_tag').click(function(e) {
alert('tesrt');
});
});
</script>
</body>
</html>
I always put my stuff in the order like below, but this doesn't work now. When I click the <span id="my_tag">, it doesn't do anything, and doesn't return any error.
what should I do?
Here is the entire code jsfiddle
Try to avoid some syntax errors like(suggestable only)
<script type="text/javascript">
$(function() {
$('#my_tag').click(function() {
alert('tesrt');
});
})
</script>
and put your code at the top after you load the js files
A few things you can do:
inspect your document (network pane in devtools) to see if everything
is loading correctly
Move your scripts to the bottom of the page
use $(document).ready(function(){ ... });
I would like to ask is someone could help me out with this doubt:
I got an external .js file with all the functions I use in some website. There are also different html docs with different content, of course, and I want to invoke a function to update some content (the header and the selected items in some select fields within a form which aren't the same).
I know I can do this just using the onload event in the html body tag and calling different functions of the js file but I've read that's not the best approach, so my question is: how can I invoke different functions of the same js file from different html docs?
Thanks in advance!
file1.html:
<!doctype html>
<body>
....
<script src=file.js></script>
<script>
// some code
</script>
</body>
file2.html:
<!doctype html>
<body>
....
<script src=file.js></script>
<script>
// different code
</script>
</body>
You can also check the location or the DOM in your JavaScript but the above is as simple as it gets.
Other ways, in file.js:
if (location.href == 'something') {
// do something
} else {
// do something else
}
Or, using jQuery:
jQuery(document).ready(function($) {
if ( $('h1').text() == 'Main Page' ) {
$('nav').hide();
$('#welcome').show();
} else {
// something ...
}
});
Page type 1:
<html>
<body class="one">
...Markup...
</body>
</html>
Page type 2:
<html>
<body class="two">
...Markup...
</body>
</html>
jQuery:
$().ready(function()
{
...code for all pages...
if($('body').hasClass('one'))
{
...code for pages of type 1...
}
else if($('body').hasClass('two'))
{
...code for pages of type 2...
}
...code for all pages...
});
I'm far from being a JavaScript guru, so I don't know how you might do this in pure JS.
As rsp says, you could also split your code into separate files - one for code that will be needed in all pages, and files with page specific code which are only loaded on the page where they're required.