I am a beginner programmer and I'm trying to make a web page that displays a JQuery Inline Date and Time Picker. As I was researching, I found this documentation: DateTimePicker. I followed the steps of first importing the JS and CSS files (after the closing body tag) using these tags:
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="jquery.js"></script>
<script src="jquery.datetimepicker.js"></script>
Following those tags, I called on my <input> from my Home.html file with the id of datetimepicker. Then using that id, I copied the code from the tutorial that creates the Inline DateTime Picker Calendar, like so:
$('#datetimepicker').datetimepicker({
inline:true
});
So my Home.html file looks like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Home</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
<link rel="stylesheet" type="text/css" href="./jquery.datetimepicker.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<h3>Inline DateTimePicker</h3>
<input type="text" id="datetimepicker"/><input type="button" onclick="$('#datetimepicker3').datetimepicker({value:'2011/12/11 12:00'})" value="set inline value 2011/12/11 12:00"/><br><br>
</body>
<!-- CALLS JQUERY LIBRARY FOR DATE AND TIME PICKER -->
<!-- this should go after your </body> -->
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="./jquery.js"></script>
<script src="./jquery.datetimepicker.js"></script>
<script>
$('#datetimepicker').datetimepicker({
inline:true
});
</script>
</html>
However, when I run this code, I get an error that says:
TypeError: 'undefined' is not a function (evaluating '$('#datetimepicker').datetimepicker({
inline:true
})')
This is what is displaying:
This is what I want to display:
How can I get an Inline calendar to display on my Home.html page?
Put
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="./jquery.datetimepicker.js"></script>
between your <head></head> tags and remove
<script src="./jquery.js"></script>
I had the same sort of issue , If download the the source code from the XDSoft site
there is build folder , try using jquery.datetimepicker.full.js file from build folder .
You need to include jquery-ui.js
Do not confuse between jQuery versions. You first referenced jQuery here:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
And then you are doing it here:
<script src="./jquery.js"></script>
Please remove one. As the newer jQuery will be active and it doesn't have the plugin registered.
Related
I cant understand the error where $ is unidentified when using onload on my page. This is just as sample page I created where I need to call a function after loading the page.
Jquery Code
$(document).ready(function(){
alert("loaded");
});
<html>
<head>
</head>
<body>
</body>
<script src="../Jquery/contact.js"></script>
<script src="../Jquery/jquery-1.12.0.min.js"></script>
<script src="../Jquery/jquery-migrate-1.2.1.min.js"></script>
<script src="../Jquery/jquery.SPServices-2014.01.min.js"></script>
<link rel="stylesheet" type="text/css" href="../CSS/default.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"/>
</html>
Two issues here:
It's invalid to put script or link tags as direct children of html, so it doesn't surprise me that it doesn't work correctly on at least some browsers. You need to put them in the body or head. The only valid content of the html element is a single head element followed by a single body element.
Standard guidance, for instance in the YUI Best Practices for Speeding Up your Website is:
Put the link tags in head
Put the script tags at the bottom of body, just prior to the closing </body> tag
It looks like your contact.js file calls $() immediately (not in response to an event). If so, then contact.js must be after jQuery in the list of scripts, so that jQuery has been loaded when your code runs.
So:
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/default.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"/>
</head>
<body>
<script src="../Jquery/jquery-1.12.0.min.js"></script>
<script src="../Jquery/jquery-migrate-1.2.1.min.js"></script>
<script src="../Jquery/jquery.SPServices-2014.01.min.js"></script>
<script src="../Jquery/contact.js"></script>
</body>
</html>
Side notes:
You might look at script and CSS combining and minifying, to avoid having a lot of HTTP requests.
Consider adding <!doctype html> at the very top to ensure the browser is in standards mode (not quirks mode).
Consider adding <meta charset="UTF-8"> at the top of head (ensuring that the file is indeed in UTF-8, or changing the "UTF-8" in that to whatever encoding you're actually using in the file).
thanks for the input. so basically I had 2 problems on this. I solved the first one by moving the contact.js to the bottom and removing the migrate plugin.
I am using Bootstrap Validator(bootstrapValidator.js) for form validations. With this I added jQuery UI Multiselect component in to my bootstrap page. But this component requires 1.5.1/jquery.min.js and Bootstrap Validator requires jquery-1.10.2.min.js, Because of this two different version on the same page validator is not working. If I use only updated version of Js (jquery-1.10.2.min.js) then Multiselect component stops working. Please help....
try to add the files in the order:
js/jquery-1.10.2.min.js
js/jquery-ui.js (if file exists in the project :))
jquery.min.js (1.5.1)
js/bootstrap.min.js (if file exists in the project :))
js/bootstrapValidator.min.js (if file exists in the project :))
other js
if it does not work http://api.jquery.com/jQuery.noConflict/
Have you tried inncluding all js and css files in the head tag, and include order is critical: first include jquery library, next bootstrap, next plugin for validator. Then check your html code for errors. I found this tutoral online [http://www.jqueryscript.net/form/Powerful-Form-Validation-Plugin-For-jQuery-Bootstrap-3.html]
<head>
<!-- <link rel="stylesheet" href="css/Style_sheet.css" type="text/css" /> -->
<title>The Transformers</title>
<link rel="icon" href="/title_icon2.jpg">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- // <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.1/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.1/js/bootstrapValidator.min.js"></script>
</head>
can you please tell me why my alert is not display .I am using bootbox.js plugin(http://bootboxjs.com/v3.x/) .but it is not display my alert as given in site ?
here is my code..
http://jsbin.com/kopalire/1/
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://dl.dropboxusercontent.com/s/8nlfxc5zh58uf9o/bootbox.min.js?m="></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<button id="clikId">add</button>
</body>
</html>
JS CODE
$(function () {
// Code goes here
$(document).ready(function(){
$('#clikId').click(function(){
bootbox.alert('Hello alert')
})
})
});
BUT when I change bootstrap 3.2 to 2.3 it works why ? if i include this it works why ?
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
You are using Bootbox v3.3.0, which is not compatible with Bootstrap 3. Take a look at the Bootbox's dependencies table: http://bootboxjs.com/#dependencies
I tried your JS Bin example with Bootbox v4.3.0 and Bootstrap v3.2.0 and it works just fine: http://jsbin.com/kopalire/3/edit
I have WHMCS script but my main problem is Java script not working, I have tried many solutions but no luck. I'm sure about files path and their work I have tested it in another script, but no luck.
header.tpl
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>{$companyname} - {$pagetitle}{if $kbarticle.title} -
{$kbarticle.title}{/if}</title>
<link rel="stylesheet" type="text/css" href="templates/{$template}/kk.css" media="screen" />
<!-- slider0000000000 -->
<!-- Le styles -->
<link href="templates/{$template}/1st/assets/css/bootstrap-responsive.css" rel="stylesheet" />
<link href="templates/{$template}/1st/css/lush.animations.css" rel="stylesheet" />
<link href="templates/{$template}/1st/css/lush.min.css" rel="stylesheet" />
<link href="templates/{$template}/1st/flexslider/flexslider.css" rel="stylesheet" />
<link href="templates/{$template}/1st/assets/css/style.css" rel="stylesheet" />
<!-- HTML5 shim, for IE6-8 support of HTML5 elements --><!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- //slider00000000 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="templates/{$template}/1st/assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="templates/{$template}/1st/js/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="templates/{$template}/1st/js/jquery.lush.min.js"></script>
<script type="text/javascript" src="templates/{$template}/1st/flexslider/jquery.flexslider-min.js"></script>
<!-- popup -->
<!-- /popup -->
<!-- slideshow -->
<script language="JavaScript" type="text/javascript"
src="templates/{$template}/scripts/jquery.cycle.all.2.74.js"></script>
<!-- slideshow/// -->
<!-- fade -->
<script type="text/javascript" src="templates/{$template}/scripts/55.js"></script>
<script type="text/javascript" src="templates/{$template}/scripts/66.js"></script>
<!-- /fade -->
</head>
<body>
Add {literal} before start of your js and {/literal} after js finish.
ex:
{literal}
$(document).ready(function(){
alert("here");
});
{/literal}
WHMCS use smarty templates you'll need to add {literal} before start of javascript and {/literal} at the end of javascript.
Which version are you using? based on the date of the submission I will say the latest or close to it, but I would have added to much code to the javascript link, I currently have mine setup as under the example as - <script src="templates/{$template}/js/jquery.easing.1.3.js"></script> which then registers and pulls the right location, so if your link is <script type="text/javascript" src="templates/{$template}/1st/flexslider/jquery.flexslider-min.js"></script> and the 1st is the name of the template then WHMCS you need to remove that and test it again, you don't need the folder name after linking to it as it register the folder name and will display it properly. Hopefully this helps a little bit better for you.
Refer to WHMCS documentation on bracelet
Everything within the {literal} {/literal} tags will not be parsed (such as the template variables). However, you would be able to accomplish adding the template variables by using multiple literal statements.
I was originally just using JSFiddle, but I wanted to move my project over to Notepad++ so I could have the files on my computer. The problem is, my Javascript on my page is not going into effect.
Heading Code:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
Any reason why? It links to my style sheet just fine, but my app.js does not seem to be working.
Three things:
app.js uses jQuery so the jQuery file needs to be included first
Also, you said you're running this on your PC. You could be using localhost, but if you're running from file://, src="//... won't work because your browser will be looking for file://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js instead of http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js so all you need to do is add the http:
But did you mean jQuery not jQuery UI? (Thanks #ahren)
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> -->
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>
Jquery comes first, like so:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>