So, I'm trying to put some mask on my input, I have seen a lot of information arround this, however I couldn't find a way to work on my code. I tried with Jquery plugin masked input and Inputmask, any good results.
Here is my JS code with a function for each of those inputs:
(document).ready(function () {
$("#telephone").inputmask("mask", { "mask": "(99) 9999-99999" });
});
$(document).ready(function () {
$("#phone").mask("(999) 999-9999");
});
and the page where my input is:
<p>phone: <input type="text" id="phone" /></p>
<p>phone: <input type="text" id="telephone" /></p>
and on my _layout:
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/maskedinput")
#Scripts.Render("~/bundles/inputmask")
absoluty nothing happens on my front.
I'm a newbie at coding yet, and english is my second language, but I hope that this question is understandable.
Can you guys help me ?
If you don't mind using Third Party Library, you might want to look into Kendo UI Core which is Free and Open Source.
Usage is quite simple -
$(function() {
$("#telephone").kendoMaskedTextBox({
mask: "(999) 000-0000"
});
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
<input id="telephone" value="555 123 4567" />
Here is the sample code at Kendo UI Dojo.
Related
Whenever I call beautifyCode(), the formatting of the code does changes, but it all comes on one line with varying spaces... Is this how it works or am I doing something wrong? Also, how can I solve this as an issue?
Code:
var beautify = ace.require("ace/ext/beautify"); // get reference to extension
var editor = ace.edit("editor");
// This function is called to beautify the editor's code
function beautifyCode()
{
beautify.beautify(editor.getSession());
}
Input:
<html>
<head>
<title>Hello World</title>
</head>
<body>
<form action="shyam.php">
<input name="name" value="Shyam"/>
<input type="submit"/>
</form>
</body>
</html>
Output:
<html><head> <title>Hello World</title></head><body> <form action="shyam.php"> <input name="name" value="Shyam"/> <input type="submit"/> </form></body></html>
Please let me know if any more information is needed.
I solved the issue while trying to implement auto-complete for my editor.
You might need to import other scripts as well to ensure that the beautifier works.
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-language_tools.js"></script>
The above script solved the issue for me.
Source: Autocompletion in ACE editor
I have following html and when I preview the page, I get following error:
Can't create checkboxradio on element.nodeName=input and
element.type=text
<head runat="server">
<title></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("input").checkboxradio();
});
</script>
</head>
<body>
<form action="#">
<label for="cbxForRent">For Rent</label>
<input type="checkbox" id="cbxForRent" />
<input type="text" id="txtZipCode" />
</form>
</body>
If I remove
<input type="text" id="txtZipCode" />
it will work properly. I think jquery tries to do something with the textbox.
what is the best way to resolve this issue?
The jQuery UI checkboxradio plugin works on checkboxes with a label only, not on text inputs, and $('input') targets both tags, make sure you target the checkbox only, and jQuery UI will no longer throw the error when it tries to convert a text input into a radiobutton
$(function () {
$("#cbxForRent").checkboxradio();
});
You could also target all checkboxes on the page with
$('input[type="checkbox"]')
or give them a common class to target them etc.
I'm using Tigra calendar (https://www.softcomplex.com/products/tigra_calendar/) in my code as a simple pop-up calendar with any input text, but I'm facing some kind of problem that's driving me nuts.
To use this calendar, it's just needed to add
<link rel="stylesheet" type="text/css" href="tcal.css" />
<script type="text/javascript" src="tcal.js"></script>
in the head section, and add class="tcal" to the input
<input type="text" name="date" class="tcal" value="" />
Working demo in https://jsfiddle.net/fgh7yjg7/
But now, using the same calendar inside a Bootstrap3 modal, it simply doesn't work in my code (although it does in a simple modal sample with jsfiddle)
What could be wrong?
I am trying to program what should be an easy concept: a webpage with a form (two textboxes) and when the form is submitted if the two textboxes do not have the same content, then an alert pops up.
I have the following code:
<!DOCTYPE html>
<html>
<head>
<title>Examples of using jQuery Alerts</title>
<link rel="stylesheet" type="text/css" href="jquery.alerts.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.js"></script>
<script src="jquery.alerts.js" type="text/javascript"></script>
<script src="jquery.ui.draggable.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#myform').submit( function() {
var x = $('#mytext').val();
var y = $('#mytext2').val();
if ( x!=y) {
jAlert('Values do not match','Info!');
return false;
}
});
});
</script>
</head>
<body>
<form name="myform" id="myform" action="#">
<input type="text" id="mytext" />
<input type="text" id="mytext2" />
<input type="submit">
</form>
</body>
</html>
All file names are checked and they are correct, but I get nothing when I submit the form (same as when I do $.jAlert()) - if jAlert is replaced by alert everything works, but I get the standard Javascript alert). Where am I am going wrong?
Regards,
George
I have tested your code. The problem is in your jquery.alerts.js. Its using '$.browser' in 2 or 3 places inside the plugin.
The $.browser method has been removed as of jQuery 1.9.
jQuery.browser() removed
The jQuery.browser() method has been deprecated since jQuery 1.3 and is removed in 1.9. If needed, it is available as part of the jQuery Migrate plugin. We recommend using feature detection with a library such as Modernizr.
— jQuery Core 1.9 Upgrade Guide.
As stated in the Upgrade Guide you can try using the jQuery Migrate plugin to restore this functionality and let jQuery Tools work.
You have remove that from the plugin to work this otherwise you need to change the plugin or use the jquery version below Jquery 1.9
I have recently found a jquery datepicker for my website. I have installed the relevent files but am having a prioblem as I have two date fields on my page that the datepicker should target. Currently it only works on the first of the two fields, even when both the fields have the same id and name ("date"). The javascript that the datepicker uses is below
<script type="text/javascript">
window.onload = function(){
new JsDatePick({
useMode:2,
target:"date",
dateFormat:"%Y-%m-%d",
isStripped:false,
cellColorScheme:"armygreen",
/*selectedDate:{ This is an example of what the full configuration offers.
day:5, For full documentation about these settings please see the full version of the code.
month:9,
year:2006
},*/
yearsRange:[1978,2020],
limitToToday:false,
//cellColorScheme:"beige",
imgPath:"img/",
weekStartDay:1
});
};
I don't know how to add another target to the target line in this code Ideally id like it to target "dateA" and "dateB".
Any ideas? sorry if im being daft!
John
Make sure you are using JQueryUI's datepicker since it is the most reliable.
If you are unfamiliar with JQueryUI, visit http://jqueryui.com/demos/ (this showcases what it is capable of).
To see a live demo of datepicker, go to http://jqueryui.com/demos/datepicker/. MAKE SURE TO LOOK AT OPTIONS/EVENTS/METHODS!.
As for the code...
Put these scripts in your <head>, which will give you scripts for JQuery & JQueryUI:
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#datepicker").datepicker({
altField: "#result1, #result2",
altFormat: "mm/dd/yy"
//altFormat: "DD, d MM, yy" //another format
});
});
</script>
</head>
For the body, I used the following:
<p>
Date:
<input type="text" id="datepicker">
<input type="text" id="result1">
<input type="text" id="result2">
</p>
To visually see what I did, I made a quick demo. Feel free to use it!
http://jsfiddle.net/6UnTh/23/
To customize your theme, visit http://jqueryui.com/themeroller/ and download the necessary files (otherwise use the one I provided in the <head>).
Hope this helps! Make sure to use the other options/methods JQueryUI has to offer! HAPPY CODING!
Links:
JQuery (http://docs.jquery.com/Main_Page)
JQuery UI (http://jqueryui.com/demos/)
EDIT: (I HAVE UPDATED THE DEMO!):
http://jsfiddle.net/6UnTh/27/
<link rel="stylesheet" type="text/css" media="all" href="../css/jsDatePick_ltr.min.css" />
<script type="text/javascript" src="../js/jsDatePick.min.1.3.js"></script>
<script type="text/javascript">
window.onload = function(){
new JsDatePick({
useMode:2,
target:"inputField1",
dateFormat:"%d-%M-%Y"
});
new JsDatePick({
useMode:2,
target:"inputField2",
dateFormat:"%d-%M-%Y"
});
new JsDatePick({
useMode:2,
target:"inputField3",
dateFormat:"%d-%M-%Y"
});
};
</script>
<input type="text" size="12" id="inputField1" name="txt_ordate" class="ErrorField">
<input type="text" size="12" id="inputField2" name="txt_ordate" class="ErrorField">
<input type="text" size="12" id="inputField3" name="txt_ordate" class="ErrorField">