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.
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'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 :)
I have checked to see if both jQuery is loaded and the colorbox script is loaded and they both have been loaded correctly (I used .getScript to see if colorbox loaded correctly and I get a positive result). However the function does not load colorbox and Firebug says "$(...).colorbox is not a function". The code used to work but I'm not sure what I did to break it. Here's the header:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="colorbox.css"/>
<script src="Scripts/jquery.colorbox.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="Scripts/scripts.js"></script>
<script>
$(document).ready(function(){
$(".popup").colorbox({transition: "elastic", opacity: 0.5, speed: 350});
var panels = $('.accordionButton > .accordionContent').hide();
$("div.accordionButton").click(function(){
panels.slideUp();
$(this).parent().next().slideDown();
return false
});
});
</script>
</head>
I have checked several times to make sure the script is located in the correct directory. Here is the link:
<div id='supermenu'><table><tr><td><a href='login.php?lang=en' class='popup'>Login</a></td><td> or </td><td><a href='register.php?lang=en'> Register </a></tr></td></table></div>
You need to reference the colorbox file after the jquery file. Like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="Scripts/jquery.colorbox.js"></script>
<script src="Scripts/scripts.js"></script>
That is the case for most jquery plugins by the way.
I had the same error appears in Chrome browser.
In case the solution above didn't helped, #MannyFleurmond solution helped in my case.
Try warp the colorbox js call with function($):
(function($) {
// Inside of this function, $() will work as an alias for jQuery()
// and other libraries also using $ will not be accessible under this shortcut
})(jQuery);
So my ColorBox call look like this:
(function ($) {
$('#myelement').click(function (e) {
e.preventDefault();
var url = $(this).attr('href');
$.colorbox({ href: url, width: 936, height: 582, top: 160});
});
})(jQuery);
I'm using XSLT as my view layer and i want to include Jquery in my page so i did the following but with no mean the library still not working:
<script src="jquery-1.4.2.min.js" type="text/javascript"> </script>
<script type="text/javascript">
alert("_______");
$(document).ready() {
alert("Jquery is working");
});
</script>
Note: the jquery-1.4.2.min.js file is in the same folder where my XSL file exist,
the strange thing i note is that the alert at the first line in the script is not working which means that the javascript at all is not working!! i tried that at chrome,firefox and IE with the same result.
try it like this
$(document).ready(function(){
alert("Jquery is working");
});
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
alert("_______");
$(document).ready(function () {
alert("Jquery is working");
});
</script>
WORKING DEMO
Try This:
<script src="jquery-1.4.2.min.js" type="text/javascript"></script> // remove this content
<script type="text/javascript">
alert("_______");
$(document).ready(function() {
alert("Jquery is working");
});
</script>
I found a solution here: https://raygun.com/blog/jquery-is-undefined/. I added this code <script>window.jQuery || document.write('<script src="path/to/your/jquery_file.js"><\/script>')</script> below before the </body> tag and succeeded in removing the "jQuery is not loaded / found" warning
I want to use both jquery 1.4 and 2.0 i am using noconflict function but this code does not work.
document head is something like this
<script src="js/jquery-2.0.0.min.js" type="text/javascript"></script>
<script>var jq142 = jQuery.noConflict(true);</script>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
and the jquery2.0 code is like this
<script>
jq142(document).ready(function(){
jq142('input').parent().next().hide();
jq142('input').on('focus', function () {
jq142(this).parent().next().show();
});
jq142('input').on('blur', function () {
jq142(this).parent().next().hide();
});
});
</script>
is something wrong in this approach because i am unable to make it work.
You need to put the noConflict statement after the second script has loaded. See the last example:
http://api.jquery.com/jQuery.noConflict/