usebility functions from different jquery file - javascript

I have couple functions that I would like to separate from the main jquery file. However if I just put them in different file I will receive error when I will try to call it. - TypeError: $ is not a function
Well it a simple error that solved by put in all function in
jQuery(document).ready(function($) { });
Well but then as soon main jquery file will try to call the function it will gave the error that function is not defined.
So I find out that function defined within one $(document).ready block cannot be called from another $(document).ready block,
therefore my question is how to call function from different file.
The problem with functions is that I can't use it without jQuery(document).ready block, but as soon I put ready block function is not visible for main jquery file .
Here is the test -
https://stackoverflow.com/a/1327766/4849611
so for many comment here is my links
<script type="text/javascript" src="js/jquery.js"> </script>
<script type="text/javascript" src="js/function.js"></script> <!--file with functions-->
<script type="text/javascript" src="js/main.js"> </script> <!-- file which try to call functions--->
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.webcam.js"> </script>
I will specified the problem, since people don't understand...
simple function - as example in function.js file
function dialog(){
$("#message").dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
}
Main file -main.js
jQuery(document).ready(function($) {
$(document).on("click", "#take_one", function(e){
e.preventDefault;
dialog();
return false;
});
});

Include the other file in a script tag on the page.
<script src="path/to/your/script.js"></script>

Related

How to call js document.ready function in html?

I am writing a webgame using jquery document.ready. When I call js function in html, it does not work:
js:
$(document).ready(function(){
function init(){blablabla...}
})
html:
<script src="function.js"></script>
<script>
function bla(){
if (blablabla)
init();
}
</script>
I learned html and js for only a few weeks. I have no idea why it does not work.
Please Follow Bottom Step:
There are two versions of jQuery available for downloading:
minified and compressed
The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag (notice that the <script> tag should be inside the <head> section):
Like:
<head>
<script src="jquery-1.12.0.min.js"></script>
</head>
You might have noticed that all jQuery methods in our examples, are inside a document ready event:
<script>
$(document).ready(function(){
// jQuery methods go here...
});
</script>
One approach to achieve expected result is to set init as property of document
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script>
$(document).ready([
function() {
function init() {
// do stuff
alert("blablabla...")
}
// set `init` as property of `document`
this.init = init;
},
function bla() {
if ($.isReady /* blablabla */)
document.init();
}
])
</script>
<body></body>

externally loaded javascript won't execute

I'm having trouble running javascript from an external file. Here's where it's included in the html:
<div id="article-author-list" class="article-author-list">
<#list authorGroups as authorGroupItem>
<#authorGroup item=authorGroupItem/>
</#list>
<script type="text/javascript">alert('Hello??');</script>
<script type="text/javascript" src="/js/article/truncateAuthors.js"> </script>
</div>
Whereas here's truncateAuthors.js:
alert('Found the script!!!');
$(window).load(function () {
alert('Found the script.');
});
$(document).ready(function () {
alert('Document is ready');
});
$(function(){
alert('Running the script');
});
When the html is loaded, the only alert is 'Hello??' from the inline script. How can I get the external file to execute?
Before call your javascript please add this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
to your file it will work fine. this is jquery library file that we have to use when we are writting code in jquery
I found it! The project was using requireJS and I needed to add it to the declaration. Thanks for all your answers :)

Access a Function From Another File

I have two file:
html2canvas.js
function html2canvas(){
}
myid_print.js
(function ($) {
$(document).ready(function() {
//I want to call html2canvas function here
html2canvas();
});
})(jQuery);
I already included both files in my html but after running the code above, the console shows an error saying:
Uncaught ReferenceError: html2canvas is not defined
How will I call the function from inside my second file?
Try implementing your Client side code as :
<head>
....
<script src="html2canvas.js" type="text/javascript"></script>
<script src="myid_print.js" type="text/javascript"></script>
....
<head>
<body>
...
<script type="text/javascript">
function_from_myid_print();
</script>
...
</body>
Inside which you can call html2canvas();
This will surely help you.
For more details refer links:
https://stackoverflow.com/a/3809896/4763053 and https://stackoverflow.com/a/25963012/4763053
Try put your JS script at the bottom of your HTML page.

Jquery.min.js local copy not calling window load function

I am using jquery for focus of tabs. When i used :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
in my jsp then the window.load function works good, but when i downloaded jquery.min.js and added in js folder.
<script type="text/javascript" src="jquery.min.js"></script> like this.
Now window.load function is not working.
<script type="text/javascript">
$(window).load(function() {
alert('Hello');
if($("#updatetemp").val()=="TRUE"){
$("#update_link").click();}
});
</script>
I found out the way to use JQuery locally..
jQuery(window).bind("load", function($) {
var msgtemp= jQuery("#updatetemp").val();
if(msgtemp=="TRUE"){
jQuery("#update_link").click(function() {
}).click();
}
});
Instead if $ symbol i just used jQuery attribute and it worked.

How to call function in extented .js file, from <body> with tag div or other

In head I have:
<script type="text/javascript" src="/categ.js"></script>
In categ.js, I have:
<script type="text/javascript">
var gallery=new sim({
wrapperid: "gallery1"
..................
</script>
In body I have:
<div id="gallery1"></div>
When I load page, the script is not called, because is in extended file. If I paste it directly in head - it's works.
So, How I can call from "body" with some tag the function in categ.js
Try without
<script type="text/javascript">
...
</script>
inside the categ.js file.
Then put:
window.onload = function() {
// the JS code you want to execute
};
in the file. If you use jQuery you can replace this with:
jQuery(document).ready(function() {
// the JS code you want to execute
};
So in case you want to create a new object on page load you execute this code:
var gallery=new sim({
wrapperid: "gallery1",
foo : "bar"
});
You can try calling it with window.onload to ensure it runs on page ready:
window.onload = gallery;
You can check whether your tag is ready for using with your js by calling window.onload or use jquery

Categories

Resources