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>
Related
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>
I want to clear my code a little bit and I want to run my jquery code without any function call in the html file. My actual code is :
HTML:
<head>
<script src="js/colorpick.js"></script>
<script>
$(document).ready(function() {
colorpick_start();
});
</script>
</head>
JS:
function colorpick_start() {
...
}
But if I write for example an alert in the first row of the js without any function call, that works.
alert('test');
function colorpick_start() {
...
}
But this is not working for jquery selectors or something. Is there any solution to get my jquery working without code in the html file?
I want my html file to look like this, if this is possible:
<head>
<script src="js/colorpick.js"></script>
</head>
The
$(document).ready(function() {
Waits until the DOM is ready for selectors etc.
If you add the
$(document).ready(function() {
to your colorpick.js file it will wait for the DOM to be ready and then execute colorpick_start().
And believe me this catches out most people when they start using JQuery.
In order to achieve this:
<head>
<script src="js/colorpick.js"></script>
</head>
Move the document ready call to the js file you are referencing in your HTML file and make sure that the method called is present.
$(document).ready(function() {
colorpick_start();
});
This should so it.
Put your script
<script src="js/colorpick.js"></script>
before </body> tag. This will ensure that your page is loaded fully before script starts.
$(document).ready(function() {
colorpick_start();
});
this code is working because you are calling your function after document is loaded. document load is event. you can put your function on any event you want, but it wont start if you just define your function. You have to somehow call your function. example would be on click (or on document load)
<div id="example"></div>
$("#example").on('click', function () {
your function here
});
Use that code:
$(function(){
$('.colorpicker').val("colorpicker"); //or whatever you like
});
Plnkr example code
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.
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
I'm using head.js (http://headjs.com) to do async loading of my javascripts.
I have problem with jquery.validate.unobtrusive and custom validators
All custom validations should be loaded after jquery.validate and jquery.validate.unobtrusive, and I do it like following:
<head>
<script src="#Url.Script("jquery")"></script>
<script src="#Url.Script("head.load")"></script>
</head>
<body>
<!-- entire markup -->
<script>
head.js("#Url.Script("jquery.validate")", function () {
head.js("#Url.Script("jquery.validate.unobtrusive")", function () {
head.js("#Url.Script("custom-validations")");
});
});
</script>
</body>
The problem is that custom-validations script should be loaded after jquery.validate.unobtrusive but before document.onready event, because jquery.validate.unobtrusive uses document.onready to do it's black magic. But, when I'm using head.js document.onready event fired before scripts starts to load, and my custom validation does not work.
Is there any common solutions/workarounds to solve this kind of problems with async script loading?
Another problem that my customer does not want to see jquery.validate/jquery.validate.onubtrusive in <head> tag.
#Url.Script - helper method for locating js files.
I've found solution by myself. Need to use jQuery.holdReady() to hold 'document.ready' while all scripts depend on jquery.validate.unobtrusive will not load.
<head>
<script src="#Url.Script("jquery")"></script>
<script src="#Url.Script("head.load")"></script>
</head>
<body>
<!-- entire markup -->
<script>
head.js("#Url.Script("jquery.validate")", function () {
$.holdReady(true); // set semaphore for dom ready.
head.js("#Url.Script("jquery.validate.unobtrusive")", function () {
head.js("#Url.Script("custom-validations")", function () { //fires when all provided scripts are loaded
$.holdReady(false); // release semaphore and fire event
});
});
});
</script>
</body>
Try $.validator.unobtrusive.parse('#the_form_in_question') after the load.
This should work:
head.ready("#Url.Script("jquery.validate")", function () {
head.ready("#Url.Script("jquery.validate.unobtrusive")", function () {
head.ready("#Url.Script("custom-validations")",function(){
// your code here
});
});
});
If you use jquery, you could add the scripts via getScript method which fires a callback when the script is loaded, so that can help :
$(document).ready(function(){
$.getScript("#Url.Script("jquery.validate")",function(){
$.getScript("#Url.Script("jquery.validate.unobtrusive")",function(){
$.getScript("#Url.Script("custom-validations")",function(){
// do your stuff here
});
});
});
});