jqgrid:data from the previous month can't appear - jquery-ui

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.

Related

jQuery UI dateFormat not changing format

I have a datepicker that I want to apply a custom format to but it does not work.
$(function () {
$('.datepicker').datepicker({
dateFormat: "dd-mm-yy"
});
})
But the custom format is not being applied, it stay with the default "mm/dd/yy"
Any clues what else can impact the fomating? Its an old mvc .net project with EF. Can some of the EF tags impact this??
Any help is greatly appreciated
Thanks!
One of the reasons this can fail is if you're making two calls to datepicker() in the same file, and one is overwriting the results of the other.
HTML
<html>
<body>
<input type="text" class="datepicker">
</body>
</html>
JS
$(function () {
$('.datepicker').datepicker({
dateFormat: "dd-mm-yy"
}); // Initialized once
});
$('.datepicker').datepicker(); // Initialized again without any options
Thanks for the input guys but I found the issue - turns out there was a refrence to another js libary called bootstrap-datepicker.js in the solution that was interfering with the jQuery UI libary. Sorry for the bad question
Full Example is here with your needed format:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Format date</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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() {
$("#datepicker").datepicker();
$("#format").on( "change", function() {
$("#datepicker").datepicker( "option", "dateFormat", $( this ).val() );
});
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" size="30"></p>
<p>Format options:<br>
<select id="format">
<option value="mm/dd/yy">Default - mm/dd/yy</option>
<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
<option value="dd-mm-yy">Other - dd-mm-yy</option>
<option value="d M, y">Short - d M, y</option>
<option value="d MM, y">Medium - d MM, y</option>
<option value="DD, d MM, yy">Full - DD, d MM, yy</option>
<option value="&apos;day&apos; d &apos;of&apos; MM &apos;in the year&apos; yy">With text - 'day' d 'of' MM 'in the year' yy</option>
</select>
</p>
</body>
</html>

bootstrap date formate getting wrong result

i want date formate in dd/MM/yyyy
using js and css
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
my jquery script
$(function () {
$('#DateOfBirth').datetimepicker({
format: 'dd/mm/yyyy'
});
});
but output is
Tu/00/yyyy
Your format should be like this: "DD/MM/YYYY"
$(function () {
$('#DateOfBirth').datetimepicker({
format: "DD/MM/YYYY"
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div style="position: relative">
<input type="text" id="DateOfBirth" class="form-control" />
</div>

DatePicker Jquery API can to load in Liferay JSP

I was trying to load Datepicker so that I can later add the value to json request. But it seems that I can't even load the calender in textbox. Idea is to get input date and request it in json.
Well I could mention that without datepicker function it was working fine.
// Portlet JSP in Liferay
<%# taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<portlet:resourceURL var="resourceURL">
</portlet:resourceURL>
<portlet:defineObjects />
// jQuery UI sources
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
// Jquery and Ajax Source
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
// JS Function
<script>
$(document).ready(function() {
// Load Date Picker in input box But not working
$( "#datepicker" ).datepicker();
$("#btn").click(function() {
$.ajax({
// Reso
url : '${resourceURL}',
data : {
"PersonID" : $('#PersonID').val(),
"AnotherD" : 2
},//person id to sent, In place of Anotherd I want to add Datevalue
type : 'POST',
dataType : "json",
success : function(data) {
console.log(data);
//Getting Data in return
var x = data.PersonList[1].PersonWeight;
$("#Results").text(x);
$("#Res").text(data.PersonList[1].PersonTemp);
}
});
});
});
</script>
<body>
// Out Put Data
PersonID:
<input type="text" name="PersonID" id="PersonID">
<br>
// Date Picker Textbox
<br>
<p>
Date: <input type="text" id="datepicker" />
</p>
// Refresh Button
<button id="btn">Refresh</button>
<br>Height :
<p id="Results"></p>
<br> Weight:
<p id="Res"></p>
</body>
But its not working, any suggestions?
Remove this line. I think jQuery conflicts is occurring in your case
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
HTH

Jquery autocomplete suggestion is not showing under textbox

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
}
}
});

Can't get the jquery globalization to work

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.

Resources