I try to use the jQuery Globalization plugin in order to fix the comma problem with jquery unobstructive client validation. However I tried many many solutions and there no good solution to fix this. I am on a non-English localization computer and this is important that my customers enter a decimal value like "123,66" and not "123.66". ASP.NET validation tell me that the price must be a number! meh ? are you serious ? lol
I am getting this javascript error when I try to do the fix.
$.global is undefined
Here my code.
Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/globalize.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/cultures/globalize.cultures.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.form.js")"type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/glob.fix.js")" type="text/javascript"></script>
</head>
<body>
#RenderBody()
</body>
</html>
glob.fix.js
$.validator.methods.range = function (value, element, param) {
var globalizedValue = value.replace(",", ".");
return this.optional(element) || (globalizedValue >= param[0] && globalizedValue <= param[1]);
}
$.validator.methods.number = function (value, element) {
return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:[\s\.,]\d{3})+)(?:[\.,]\d+)?$/.test(value);
}
I can't understand.. it should work since I added ~/Scripts/globalize.js.
Any idea? or you might have a better solution for having client validation work and lets me enter comma as decimal values?
I found the way to finally get rid of the decimal problem with comma seperator!
Here a picture of the result! No more validation problems.
The steps to the fix.
1- Get the Globalization library for jQuery
You must get the latest script! Also I found some answers out there that was outdated. The object to call the library is no more $.global or anything like that but Globalize.
2- Include the scripts in your project. You must add them after jquery.validation stuff.
<script src="#Url.Content("~/Scripts/globalize.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/cultures/globalize.cultures.js")" type="text/javascript"></script>
3- Replace some methods of the validator. This will override the methods for 'number' and 'range' validation which was causing problems.
$.validator.methods.number = function (value, element) {
return this.optional(element) || !isNaN(Globalize.parseFloat(value));
}
$.validator.methods.range = function (value, element, param) {
return this.optional(element) || (Globalize.parseFloat(value) >= param[0] && Globalize.parseFloat(value) <= param[1]);
}
Globalize.parseFloat => This will actually replace anything that contains ',' to '.' if you selected a culture that require it.
After this.. You must add. This will make the globalize functions to work with the culture.
$(document).ready(function () {
Globalize.culture('fr-CA');
// Only there to show which culture are being used.
console.log(Globalize.culture().name);
});
The complete code look like...
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/globalize.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/cultures/globalize.cultures.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.form.js")"type="text/javascript"></script>
<script type="text/javascript">
$.validator.methods.number = function (value, element) {
return this.optional(element) || !isNaN(Globalize.parseFloat(value));
}
$.validator.methods.range = function (value, element, param) {
return this.optional(element) || (Globalize.parseFloat(value) >= param[0] && Globalize.parseFloat(value) <= param[1]);
}
$(document).ready(function () {
Globalize.culture('fr-CA');
// Only there to show which culture are being used.
console.log(Globalize.culture().name);
});
</script>
</head>
<body>
#RenderBody()
</body>
</html>
Well, to solve the same problem, I did:
$.validator.addMethod("price",function(value){
return /^(?:\d+|\d{1,3}(?:\.\d{3})+)(?:,\d+)?$/.test(value);
});
and then used the added method as rule:
$("#form").validate({
rules: {
price: "price"
}
});
I "borrowed" the validator regex from the validation plugin itself, and inverted the dots . and the commas , (thousand separator X decimal separator).
For whatever reason I had to change my globalize reference from:
<script src="#Url.Content("~/Scripts/globalize/globalize.js")" type="text/javascript"</script>
to
<script type="text/javascript" src="~/Scripts/globalize/globalize.js"</script>
And that solved my problem. Went crazy for 30min until I got it to work. If anybody can explain why I will appreaciate.
Related
I'm trying to display java code in html page, It's not working, it shows this error
any help will be appreciated. my code look like
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCore.css" />
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJava.js"></script>
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreEclipse.css" />
<h3>Java Code:</h3>
<pre class="brush: java;">
public class JavaClass {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
</pre>
<!-- Highlight all -->
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
when i comment the following line
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
the above error will not appear but shows diffrent error.
I have been trying to get a simple example of the jquery-ui autocomplete to work. I have a controller setup to handle the query, and it returns the string that looks to be in order, but I am getting no suggestions showing up.
Here are the libraries I am including on that page
<link href="/Content/css/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/Stylesheet.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/coupon1.css" rel="stylesheet" type="text/css" />
<link href="/Content/Slider/slidder.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
<script src="/Scripts/el7r_notify.min.jq.js" type="text/javascript"></script>
<script src="/Scripts/ZeroClipboard.js" type="text/javascript"></script>
<script src="/Scripts/jquery.spellcheck.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="/Content/Slider/jquery.jcarousel.min.js" type="text/javascript"></script>
<script src="/Content/Slider/jquery-func.js" type="text/javascript"></script>
<script src="/Scripts/Coupon.js" type="text/javascript"></script>
and here is the javascript and the form tags:
$(document).ready(function () {
$("#tags").autocomplete({
source: function (request, response) {
$.ajax({
url: '/Home/GetCompanyNames',
success: function (msg) {
response($.map(msg));
}
});
}
});
});
<div class="ui-widget">
<label for="tags">tags: </label>
<input id="tags" />
</div>
I get back a string response that looks reasonable from my controller:
"LTJRKK,
KTOYQQ,
GDADKT,
PVFOQT,
PVFOQT,
YNKYVS,
YNKYVS,
DQBOVU,
DQBOVU
"
this string seem to be the default naming that autocomplete is looking for.
But I get no joy at all. Any thoughts?
Your call to $.map is incorrect. You are not supplying the callback function to $.map, which is probably causing the problem.
In this case, you do not need to use $.map at all since your action returns data in the correct format. The following should work fine:
$(document).ready(function () {
$("#tags").autocomplete({
source: '/Home/GetCompanyNames'
});
});
Probably you need this:
$("#tags").autocomplete({
source: function(request, response) {
$.ajax({
url: "url",
data: request,
dataType: "json",
method: "post",
success: response
}
}
});
I am trying to set click handler for an anchor tag in jQuery mobile with via reference to the handler function inside the anchor tag (I need to do it this way for reasons that are cumbersome to get into). As illustrated in the code below when I pass a variable to the handler function that is an integer it works but when I pass it a string it does not. Can anyone explain whey this is?
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
//The Line Below works
$("#main").html('click test');
/*
//The Lines Below Do not work
//$("#main").html('click test');
var test = 'hello world';
//$("#main").html('click test');
*/
$("#main").trigger('create')
});
function test(e) {
alert(e);
}
</script>
<div data-role="page" class="type-interior">
<div id="main" data-role="content"></div>
</div>
</body>
try this ::
var testParam = "'hello world'";
$("#main").html('click test');
I don't know whats happen with my jqgrid,for the 1st time my data can show (all data which already input to database).
But, after I try to input date format from jquery datepicker like:
I choose 08/03/2011 but actual date is 09/09/2011.
the jqgrid can't display that data, but in database the data is already input.
could you tell why its happen?
EDIT
this is for the input page:
<script type="text/javascript" language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.datePicker-2.1.2.js"></script>
<script type="text/javascript" language="javascript" src="development-bundle/ui/jquery.ui.datepicker.js"></script>
<script>
$(function() {
$(".datepicker").datepicker({ dateFormat:'yy-mm-dd'});
});
</script>
<input type="text" id="datepicker" name="prob_date" class="datepicker">
and I get a downloaded folder jqgrid_demo38
and for the display page(use jqgrid):
<link rel="stylesheet" type="text/css" media="screen" href="jqGrid/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqGrid/plugins/ui.multiselect.css" />
<script src="jqGrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="jqGrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
i'm just can't show the data which not inputed in the current month.
Jqgrid
dounfinish.php
Big guess here but I'm guessing you're trying to set a maxDate on your datepicker. If that's so, then the date you're passing to maxDate is probably not correct.
Here's what I suggest to create a consistent date object for your maxDate across the various browsers:
HTML:
<input name="datetime" class="datetime" type="text" data-maxdatetime="<YOUR MAX DATE FROM DB HERE>" value="<SOME PRE-SELECTED DATETIME>" />
JS:
var max_date = $(".datetime").data("maxdatetime");
$(".datetime").datepicker({
maxDate: parseISO8601(max_date)
});
/**
* http://jibbering.com/faq/#parseDate
* Parses string formatted as YYYY-MM-DD to a Date object.
* If the supplied string does not match the format, an
* invalid Date (value NaN) is returned.
* #param {string} dateStringInRange format YYYY-MM-DD, with year in
* range of 0000-9999, inclusive.
* #return {Date} Date object representing the string.
*/
function parseISO8601(dateStringInRange) {
var isoExp = /^\s*(\d{4})-(\d\d)-(\d\d)\s*$/,
date = new Date(NaN), month,
parts = isoExp.exec(dateStringInRange);
if(parts) {
month = +parts[2];
date.setFullYear(parts[1], month - 1, parts[3]);
if(month != date.getMonth() + 1) {
date.setTime(NaN);
}
}
return date;
}
It works....
I am Deleted some command in query:
$start = $limit*$page - $limit; // do not put $limit*($page - 1)
$SQL = "SELECT * FROM oqc_defect ORDER BY $sidx $sord /*LIMIT $start , $limit*/";
$result = mysql_query( $SQL ) or die("Couldnt execute query.".mysql_error());
I am disabled LIMIT from query.
But, I don't know why it can works..may be another reader can explain this.
I am developing some ajax stuff on asp.net mvc framework beta.
but,I got exception as following.
Anyone has problem like me?
Sys.ArgumentUndefinedException: Value cannot be undefined.
and my source code is like this.
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<script src="../../Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>
<script type="text/javascript">
var myView;
$(pageLoad);
function pageLoad() {
myView = $create(Sys.UI.DataView, {}, {}, {}, $get("ajaxResult"));
$("#callAjaxButton").click(callActionMethod);
}
function callActionMethod() {
$.getJSON("/Home/GetCategories", bindData);
}
function bindData(data) {
myView.set_data(data);
}
</script>
<input type="button" id="callAjaxButton" value="ajaxCall" />
<div id="ajaxResult"></div>
</asp:Content>
From the snippet you provided there are a couple of things to consider:
You are missing a script reference to the Microsoft ASP.NET 2.0 AJAX Templates for Visual Studio 2008.
You are using the jquery's document.ready function (raised whenever the DOM is ready to be traversed and manipulated) instead of the System.Application.init event (raised after all scripts have been loaded but before objects are created).
Can you try this to see if it works for you:
<script src="../../Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjaxTemplates.debug.js" type="text/javascript"></script>
<script type="text/javascript">
var myView;
Sys.Application.add_init(pageLoad);
function pageLoad() {
myView = $create(Sys.UI.DataView, {}, {}, {}, $get("ajaxResult"));
$("#callAjaxButton").click(callActionMethod);
}
function callActionMethod() {
$.getJSON("/Home/GetCategories", bindData);
}
function bindData(data) {
myView.set_data(data);
}
</script>
<input type="button" id="callAjaxButton" value="ajaxCall" />
<div id="ajaxResult"></div>
Scott Hanselman has written a nice post on this subject.