I know, this question is asked like milion times, but I cant get it to work.
All my html,css and js files are located in same folder.
Below - my code, but I also mad jsfiddle here .
The code works fine in JSfiddle, but doesnt work on my computer, so i thought it might be something with my html head and linking to javascript file, but it seems to be right.
header of my html file :
<head>
<title>Nacionālie dārgumi</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
This is my html:
<div class="menu">
<ul class="main-menu">
<li><a class = "main_men_links" href="about.html">PAR PROJEKTU</a></li>
<li><a class = "main_men_links" href="">NACIONĀLIE DĀRGUMI</a></li>
<li><a class = "main_men_links" href="">SASNIEGUMI</a></li>
<li><a class = "main_men_links" href="">SĀKUMS</a></li>
</ul>
</div>
This is my script.js:
$(function(){
console.log('ready');
$('.main-menu li').click(function(e) {
e.preventDefault()
$that = $(this);
$that.parent().find('li').removeClass('active');
$that.addClass('active');
});
})
This is my style.css :
.active {
background: black;
}
Any help will be highly appreciated!
I think you don't have jquery library on html head section.
like this using CDN <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
Try to add before your main script declaration.
This link only works if you are connected to internet, or download the file so you can use it locally.
Please check whether you have included the reference of Jquery.js in your Header part of HTML or not. As , your script file will not run if you haven't use jquery.js before the script.js load .
Header should be loading jquery.
You can try as below :
<head>
<title>Nacionalie dargumi</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
or download jquery.min.js and load it.
You're using jQuery, so you need to provide the link to the library to get your script.js work. Make sure that the CDN library and your local script.js are added in this order.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="script.js"></script>
in your browser Press F12 and check the tab Sources (in Chrome) or
Debugger (in Firefox) to make sure script.js is loaded.
You must also see a 'ready' message in your browser console.
Related
I've founded this article but I don't know where to add this code:
$(document).ready(function(){
$(".showDescriptionTextbox").val($(".Product").val());//to initialize
$(".showDescriptionDiv").text($(".Product").val());//to initialize
$(".Product").change(function(){
$(".showDescriptionTextbox").val($(".Product").val());
$(".showDescriptionDiv").text($(".Product").val());
});
});
I've file jquery-1.11.3.min.js, jquery-1.10.2.min.js.
Should I edit one of both file with above code? Please give me a hint.
I want to execute query SQL by clicking the select option that I know it's just possible using jquery/ajax/js, but I'm still newbie.
I've file jquery-1.11.3.min.js, jquery-1.10.2.min.js. Both are jquery library file with different version. Only one should be included.
In your case the code snippet which you have shared can be included in a separate js file. Like this
nameOfYourJSFile.js
$(document).ready(function(){
$(".showDescriptionTextbox").val($(".Product").val());//to initialize
$(".showDescriptionDiv").text($(".Product").val());//to initialize
$(".Product").change(function(){
$(".showDescriptionTextbox").val($(".Product").val());
$(".showDescriptionDiv").text($(".Product").val());
});
});
Include the file in your main html file. Add the scripts near the bottom of the page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello Plunker!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="nameOfYourJSScript.js"></script>
</body>
</html>
DEMO
If the file is included in the bottom , there is no need to use document.ready function
Add your code BELOW the <script src="jquery-1.11.3.min.js"></script>
So, JQuery will be loaded and can be used
For some reason my lightgallery is not working. I added it the same way I always do and all javascript files are included after Jquery.
I get this message in the console:
Uncaught TypeError: $ is not a function
at product-1.html:433
(anonymous) # product-1.html:433
Which points to:
<script type="text/javascript">
$(document).ready(function($) {
$("#lightgallery").lightGallery();
});
</script>
All files are correctly loaded, I checked in the network tab.
What could be the problem and how can I fix it? Maybe there is a conflict somewhere? Can I wrap it in a function to make it work?
My js files:
in the head
<link href="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/css/lightgallery.css" rel="stylesheet">
your html content
<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
</div>
in the body include light gallery js files after jquery
<script src="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/js/lightgallery.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-pager.js/master/dist/lg-pager.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-autoplay.js/master/dist/lg-autoplay.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-fullscreen.js/master/dist/lg-fullscreen.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-zoom.js/master/dist/lg-zoom.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-hash.js/master/dist/lg-hash.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-share.js/master/dist/lg-share.js"></script>
<script>
lightGallery(document.getElementById('lightgallery'));
</script>
This really works for me.
Clearing browser cache may help sometimes. Or narrow down your problem by loading one by one starting with jquery.
This solves the problem :
<script>
lightGallery(document.getElementById('lightgallery'));
</script>
1.Check your maps api js link like https://developers.google.com/maps/api/js this is correct or not
2.Press Ctrl+Shift+Del button at a same time and clear caches and cookies
I've included toaster.css, toaster.js and jquery like that:
<script src="Scripts/jquery-2.1.4.js"></script>
<script src="Scripts/toaster.js"></script>
<link rel="stylesheet" type="text/css" href="QtApp/Notifications/toaster.css" />
and i am sure that the paths are correct. But when I try to call toaster.pop(..) or toaster.error(..) the respective functions are called and executed but no popup is shown. Any idea why that happens?
The js file you are referencing looks like it has a typo
<script src="Scripts/toaster.js"></script>
should be
<script src="Scripts/toastr.js"></script>
The same with your css.
When you go to the 'sources' tab in the browser dev tools are you able to navigate to the js and css files?
I am trying to use Jquery for the first time and I am getting an issue. I am using VS 2013, asp.net and VB.
My head tag is as follows.
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<script src="Bin/jquery-1.10.2.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#LowerText').hide();
$('#UpperText').hide();
$('#AssetStatusChoice').change(function () {
if($('#AssetStatusChoice').val("Fully Available"))
{
$('#CommentsText').hide();
}
if ($('#AssetStatusChoice').val("Restricted"))
{
$('#UpperLimit').show();
$('#LowerLimit').show();
}
if ($('#AssetStatusChoice').val("Unavailable"))
{
$('#Commentstext').show();
}
});
});
</script>
</head>
When I debug the page I get the following error.
0x800a1391 - JavaScript runtime error: '$' is undefined
It seems from Googling the error that I am not referencing the js file correctly. Can anyone help?
Add <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script> and Remove the
<script src="Bin/jquery-1.10.2.js" type="text/javascript"></script>
<script> Just use a host Jquery instead of adding it to you source. Read more :
3 reasons why you should use hosted jQuery
IIS doesn't serve content in the /bin directory.
Move it to another directory like /scripts or /js or /scripts/lib, something like that. The bin directory is a bad place to put script files.
You have a number of options here. You could use the Google CDN by adding the following to your header:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Or, as it appears you're using .NET, you could do this:
<script type="text/javascript" src="<%=ResolveClientUrl("~/Bin/jquery-1.10.2.js") %>"></script>
The second option gives you the additional advantage that when used in a master page can be used in any content pages at any file system level and it will still resolve correctly.
As Stefan has also said, I'd recommend moving your jQuery file from your bin directory.
Copy the jQuery file in some other folder, like Scripts, or js, and in Solution Explorer check to see all files. Find the jQuery file you just copied, include it in the project, then drag it on the page where you want to place it. A correct script tag will be created.
I've included Jquery & Jquery mobiles latest versions.
I'm basically trying to use a mobile button to call a JavaScript function but having issues.
This works fine in chrome but not in webworks on the playbook (this is where i get the errors)
<script type="text/javascript" src="js/personSearch.js" ></script>
Including my custom JavaScript code
Within that file i have the folllowing code
function testme()
{
alert("tet");
}
I've tried all the following ways:
<input type="button" onclick="testme();" value="Button" />
<a id="psClear" href="javascript:testme();" data-role="button" data-inline="true">Clear</a>
For them all I get the error:
mainMenu.html:1ReferenceError: Can't find variable: testme
I think its something to do with the way J query Mobile renders buttons but not sure...
UPDATE
If i add rel="external" to the page before it loads in the javascript and works fine, but reloads all the scripts again, and doesnt work without rel="exnteral"
<link rel="stylesheet" type="text/css" href="css/jqueryMobileCSS.css">
<link rel="stylesheet" type="text/css" href="css/customStyle.css">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jqueryMobile.js"></script>
<script src="js/eBar.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/ain.js"></script>
<script src="js/tleBar.js"></script>
<script type="text/javascript" src="js/ps.js" ></script>
So without rel="external" js/ps.js doesnt seem to load...
The scripts located on both pages are the exact same but the new page has js/ps,js loaded in aswell..
Thanks
Don't use inline Javascript (read why here) to call functions. It looks like the error you're having is related to the fact that your personSearch.js file hasn't loaded and therefore the function may not exist exist. Use the Chrome/Firebug JS console to check whether the function is definitely defined and then create another script with something resembling the following inside:
$(document).bind('pageinit',function () {
$("#psClear").on('click',function(){
testme();
});
});
This will make sure that the DOM is loaded and ready before binding the click event to your button. Make sure this script is loaded after your personSearch.js script.