I have a project written in C# ASP.net. jQuery have worked well before format computer. I have reinstall windows 7 on pc then install VS 2012 again. I run project then give this error
JavaScript runtime error '$' is undefined
I don't change anything. I referenced jQuery top of aspx file.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title></title>
<link rel="stylesheet" type="text/css" href="css/site.css" />
<link rel="stylesheet" href="Content/themes/base/jquery-ui.css"/>
<style>
.ui-datepicker-trigger { position:relative;top:0px ;left:2px ; height:16px;width:16px;vertical-align:middle; }
/* {} is the value according to your need */
</style>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.12.0.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
SOLUTION
I have found solution like this
Please check with your physical location of jQuery file.
or try to add CDN of jQuery as below.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
You should change the path of the jquery libs to relative like this:
<script type="text/javascript" src="~/Scripts/js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="~/Scripts/js/jquery-ui-1.12.0.js"></script>
<script type="text/javascript" src="~/Scripts/js/jquery.maskedinput.min.js"></script>
You then will have to make a folder(if it doesn't exist) named Scripts and subfolder(if it doesn't exist) named js and place your jquery libs inside.
Related
I am creating a jQuery Plugin for building a form builder. The code is going to be very lengthy. I don't wanna keep everything in just one file.
To achieve this I am trying to break everything into ES6 modules but JS is throwing a Syntax error.
Uncaught SyntaxError: Unexpected identifier
Uncaught TypeError: $(...).formBuilder is not a function
Here's my code:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Form Builder</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>
<!-- <script src="functions.js"></script> -->
<script src="index.js"></script>
</head>
<body>
<div id="form-builder"></div>
</body>
</html>
<script type="text/javascript">
$("#form-builder").formBuilder();
</script>
index.js
import formBuilder from './functions.js'
(function($){
$.fn.formBuilder = function(){
formBuilder()
}
}(jQuery))
functions.js
export default function formBuilder(){
$.get('template.mst', function(template) {
let rendered = Mustache.render(template, fieldsData);
$('#form-builder').html(rendered);
});
}
I had to make two changes to get your code to run (in Chrome/Firefox):
First, from MDN
The import statement cannot be used in embedded scripts unless such script has a type="module".
This is a little misleading: "embedded script" sounds like it wouldn't include a src= script...but in practice it doesn't seem to work without it.
<script type="module" src="index.js"></script>
Second, module scripts are lazy-loaded, which means your final script tag will be executed before index.js is actually loaded/parsed. You can change this by using the jQuery ready callback.
<script>
$(() => {
$("#form-builder").formBuilder();
});
</script>
New to jQuery. I cannot get the datepicker to work. Can anyone tell my what I am doing wrong? Thank you, any help is appreciated. Here is the skeleton code:
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$("#quoteDate").datepicker();
});
</script>
</head>
<body>
<input type="text" id="quoteDate">
</body>
</html>
I have looked at many posts almost identical to this one, but none of the answers worked. I have also downloaded the jQuery UI files to reference them locally, but that wouldn't work either.
They aren't working for you locally because you are running them from a file with a url like file:///Macintosh HD/whatever....
You need to change the lines:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
to:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
When you use a // prefix for an asset, it matches whatever protocol you are using. So when you load up something locally (without using a local web server), it looks for file:///code.jquery.com/jquery-1.10.2.js which doesn't exist. Changes the assets to start with http:// or https:// instead of //.
After reading the above answers and your comments, it seems that you are unable to run it locally on your browser.
Referencing Files Locally
Easiest way is to download and keep all the files in same directory.
Let's say the files are
index.htm, jquery-ui.css, jquery-1.10.2.js, jquery-ui.js
File : index.htm
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(function() {
$("#quoteDate").datepicker();
});
</script>
</head>
<body>
<input type="text" id="quoteDate">
</body>
</html>
Relative Path
You can give relative path such as
src="js/jquery-1.10.2.js"
src="js/jquery-ui.js"
href="css/jquery-ui.css"
if the directory structure is :
Present Working Directory
index.htm
js (directory)
jquery-1.10.2.js
jquery-ui.js
css (directory)
jquery-ui.css
this is my code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EVENTI</title>
<link rel="stylesheet" type="text/css" href="../CSS/stile.css">
<link href='http://fonts.googleapis.com/css?family=Squada+One' rel='stylesheet' type='text/css'> <!--importare google font-->
<script src="../JS/ridimensionapagina.js"></script>
<script src="../JS/jquery-1.11.1.js.js"></script>
</head>
in my "ridimesionapagina.js" i've some JS code that debunk some of my elements declared in my css code , but in this page it doesen't works why?
Well making the assumption that you're using jQuery in your ridimensionapagina.js file, one would assume you'd fix the issue by reversing the order you load the scripts so that jQuery is in fact available when your ridimensionapagina.js script loads and runs.
<script src="../JS/jquery-1.11.1.js.js"></script>
<script src="../JS/ridimensionapagina.js"></script>
instead of
<script src="../JS/ridimensionapagina.js"></script>
<script src="../JS/jquery-1.11.1.js.js"></script>
If you use jQuery in ridimensionapagina.js, you should put .. include jQuery path to above to load jQuery before loading ridimensionapagina.js file
This is my .cshtml code
<!DOCTYPE Html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>welcome</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.0.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
</head>
<body>...</body>
</html>
Whenever I execute my code it gives the bootstrap requires jquery error. Please suggest what should I do to remove this error.
Make sure that the path is correct and points to jQuery version greater than 1.9
You are using 1.8 which is not compatible with bootstrap
Source:
https://github.com/twbs/bootstrap/blob/v3.1.1/bower.json
Just as Amit Joki said, make sure you link points directly to the jquery file and
the file name is spelt accordingly.
Also ensure that you link jquery js script before you link to the bootstrap js script
<script src="path_to_script/jquery-1.8.0.min.js"></script>
<script src="path_to_script/bootstrap.js"></script>
<link href="path_to_script/bootstrap.css" rel="stylesheet" />
I'm just posting my entire page to prevent confusion. I've stared at each link and checked the folder for the files. it all seems to be there. what's not working? very frustrated, could use a fresh pair of eyes. all my page displays is the content of the pre, but without any formatting. again, thanks for the help
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--STYLESHEET LINKS-->
<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shThemeDefault.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shCore.css" rel="stylesheet" type="text/css" media="screen" />
<!--SYNTAX HIGHLIGHTER-->
<script type="text/javascript" src="shCore.js"></script>
<script type="text/javascript" src="shBrushPhp.js"></script>
<!--JQUERY and PROCESSING SCRIPTS-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="processing.js"></script>
<script type="text/javascript" src="init.js"></script>
</head>
<body>
<pre class="brush: php">
$last_modified = filemtime("header.php");
echo("last modified: ");
echo(date("m.j.y h:ia", $last_modified));
</pre>
<script type="text/javascript">
SyntaxHighlighter.HighlightAll();
</script>
</body>
</html>
Four things:
SYNTAX HIGHLIGHTER - put the .js files AFTER the jquery, jQueryUI, etc. scripts. The order is important!
use $(document).ready to make sure that all the js files are loaded before the body content tries to use it.
Are you using firebug or some such tool to check for script errors in the browser?
Are you getting any errors at all or just not seeing the highlighting effect?
By replacing:
SyntaxHighlighter.HighlightAll();
with
SyntaxHighlighter.all();
your sample code works for me.