I'm newbie with jQuery and I my facing the following problem.
I'm trying to use a mask, but the script doesn't work. At all.
The code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.maskedinput.js" type="text/javascript"></script>
<script>
$( document ).ready(function() {
$("#date").mask("99/99/9999",{placeholder:"mm/dd/yyyy"});
$("#phone").mask("(999) 999-9999");
$("#tin").mask("99-9999999");
$("#ssn").mask("999-99-9999");
});
</script>
</head>
<body>
<input type="text" id="date">
<input type="text" id="phone">
<input type="text" id="tin">
<input type="text" id="ssn">
</body>
</html>
What's wrong?
I'm using the plugin from this site: http://digitalbush.com/projects/masked-input-plugin/
I checked the code. And I used this latest jQuery Mask Plugin. It works.
Here are some examples , they might help.
Only change I did is
<script src="jquery.mask.min.js" type="text/javascript"></script>
You may have put your files in wrong location.
You can check those using the built in inspect element functionality (right click and you can see it) in Google chrome. If the console indicate missing .js files you can correct them.
There are ways for other browser to check those also.
It looks like maskedinput.js either not be found or there is something wrong in this script
change from
<script src="js/jquery.maskedinput.js" type="text/javascript"></script>
to
<script src="http://digitalbush.com/wp-content/uploads/2013/01/jquery.maskedinput-1.3.1.min_.js" type="text/javascript"></script>
Related
I can't get jQuery to work on my page. so I used jsfiddle.net to test if my jQuery code works, and it does. However, when I copy and paste the same code unto my document, it doesn't work. So I'm assuming that there's an error with linking the jQuery external file on my html document. I'm using TextWrangler as my text editor.
html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Rules </title>
<link rel="stylesheet" href="styleRules.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type= "text/javascript" src="JsRules.js"> </script>
</head>
<div id="left" >
<ol>
<li> First Rule </li>
</ol>
</div>
css
#left {
float:left;
margin-left:200px;
}
jQuery
$(document).ready(function () {
$("#left").mouseenter(function () {
$("#left").fadeTo("fast", 0.25); });
});
Thanks for the time in answering and reading this. I'm currently stuck, I've reached a dead end, and I can't wait to overcome this problem!
I agree with other people that it's most likely a typo in the name of your jQuery file. I created a web page using your exact code except that I spelled the jquery file correctly. It worked fine.
And even though using the BODY element is proper and important, it didn't affect the outcome of my testing your code.
Please, use the "Inspect Element" (tools of chrome ) or Firebug (tool of Firefox and Chrome) for find the error.
Now for me the possible errors are:
Name not declared correctly for example <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
you can change the script with external files (libraries of google) <script src="http://code.jquery.com/jquery-2.0.0.js"></script>
Now I create the DEMO on JSFIDDLE with your code and seems that it works
You have a typo in your HTML referencing the jQuery document:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Rules </title>
<link rel="stylesheet" href="styleRules.css" />
<!---Typo was here--->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type= "text/javascript" src="JsRules.js"> </script>
</head>
<div id="left" >
<ol>
<li> First Rule </li>
</ol>
</div>
</body>
I've been trying to add datetimepicker (http://trentrichardson.com/examples/timepicker/) functionality to my form, but first, I created simple html file to test that library. It is not working. Here's my html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<title>Test Environment</title>
</head>
<body>
<div>
<form>
<input id="appointment-form" name="app" value="">
</form>
</div>
<script>
$(document).ready(function(){
jQuery('#appointment-form').datetimepicker();
});
</script>
</body>
</html>
And I get
TypeError: e is undefined
...eturn t?u.length:u?nt.error(e):L(e,a).slice(0)}function at(e,t,r){var i=t.dir,s=...
jquery....min.js (line 2)
All libraries loaded in correct order, do not know what else to do
UPDATE:
Added link to the datetimepicker library
I've downloaded again that library and it worked )
Thanks to Alvaro, this silly question can be closed.
I am trying to use masked input to make my date look like 9999-99-99 but doesen't seem to be effecting anything. I can't tell what I am doing wrong.
<script type="text/javascript" src="http://digitalbush.com/wp-content/uploads/2013/01/jquery.maskedinput-1.3.1.min_.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
jQuery(function ($) {
$("#date").mask("9999-99-99");
});
</script>
http://jsfiddle.net/doitlikejustin/xw2je/3/
This is my input box-
<input name="date" type="text" id="date" value="<?php echo $_SESSION['date'];?>" />
You need to include jQuery script first.
The order is important, since jQuery Masked input plugin depends on jQuery. You should tell the browser to load jQuery first and then only you can work on jQuery stuff.
For example (I tested this):
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://digitalbush.com/wp-content/uploads/2013/01/jquery.maskedinput-1.3.1.min_.js"></script>
<script type="text/javascript">
jQuery(function ($) {
$("#date").mask("9999-99-99");
});
</script>
</head>
<body>
<input name="date" type="text" id="date" value="" />
</body>
</html>
I hope this helps.
You just need to change jquery definition order, put version jquery file first and then put plugin jquery. It will solve your problem.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://digitalbush.com/wp-content/uploads/2013/01/jquery.maskedinput-1.3.1.min_.js"></script>
main jquery file should place first and then the addon.It will definitely solve ur problem.
I am trying to learn how to debug jquery. I tried to make a page which will dynamically add input feilds. The data is sent to the jquery. Now for debugging, I tried to console.log the whole array, but I am getting this error in Firefox:
[17:40:27.073] The character encoding of the HTML document was not
declared. The document will render with garbled text in some browser
configurations if the document contains characters from outside the
US-ASCII range. The character encoding of the page must be declared in
the document or in the transfer protocol. #
file:///Users/ateevchopra/Desktop/takemehome%20dynamic/TakeMeHome/index.html
Please explain what this means of if there is some mistake in my code. Heres my code
HTML:
<!doctype html>
<html>
<head>
<title>TakeMeHome</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type='text/javascript' src='js/app.js'></script>
</head>
<body>
<center><form id="details">
Your Place:<input id="source" type="text"><br><br>
Friend1:<input id="friend1" type="text"><br><br>
<div id="friends"></div>
<div id="button">Add!</div><br><br>
<input type="submit" value="go">
</form>
</body>
</html>
jQuery:
var j=2;
var friends = [];
$(document).ready(function(){
$('#button').click(function(){
if(j<11){
$('#friends').append('Friend'+j+':<input type="text" id="friend'+j+'"/><br/><br/>');
j++;
}
else
{
alert("Limit reached");
}
});
});
$("form").submit(function(){
friends[0] = ('#source').val();
for(var i=1;i<j;i++)
{
friends[i] = ('#friends'+i+'').val();
}
console.log(friends);
});
your code is working perfectly you can see it from this
console.log is good for debuging but i prefer you to use firebug for debuging.
Using firebug you can debug each and every line and you can also view the values of each variable.
I am using firebug with firefox.
You can download firebug for firefox from that link .I hope that it helps you.
The error has nothing to do with JavaSCript.
If you add a meta tag like <meta charset="UTF-8" /> it should be fixed.
I also see the you have a type in doctype declaration.
This is not an error in your Javascript code, but a general warning issued by Firefox regarding the validity of the actual HTML markup.
The document's encoding should be declared with a meta tag in inside the header tag. For example, if your encoding is UTF-8 it would be:
<head>
...
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
...
</head>
Since your doctype is HTML5, you can also use the charset attribute:
<head>
...
<meta charset="UTF-8">
...
</head>
I am doing a project in ckeditor.i want to add divs to the textarea of ckeditor and it should be draggable and dropable.I have already added a div and style to div.But jquery click event is not working on the div inside text area.The code i have used is below and it works on focus event.
Thanks in advance
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="ckeditor.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var editor = CKEDITOR.replace( 'content' );
CKFinder.setupCKEditor( editor, '/ckfinder/' ) ;
var ckeditor = CKEDITOR.instances['content'];
ckeditor.on('focus', fnHandler);
});
function fnHandler(){
alert("Working");
}
</script>
</head>
<body>
<textarea class="ckeditor" name="content" id="content" cols="20" rows="40">
<div id="makeMeDraggable"> </div>
</textarea>
</body>
</html>
Test it on their demo page first, to see if what you want to do works there!.
http://ckeditor.com/demo
You may have to take it up with the ckeditor developers, and ensure you have the latest version of it installed, as well as the latest libraries that it relies on it, like jQuery.
If it still does not work, then you may have to customize the Javascript libraries, or find another plugin that works, like ones they use in DotNetnuke or any other mainstream CMS system.