I just set up my date-picker to auto populate it's input field with today's date.
Normally, a user would have to select their own date and submit their selection via the enter key or, I think in my case, any key would do it.
Is there anyway to automatically do this? Since the field is pre-populated, I want the results for today's date to appear automatically on page load, without the user needing to accept the date(today) that has been pre-populated into the field.
Here's my code if it's helpful:
<script>
function displayResult() {
var k;
if (window.event) // IE8 and earlier
{
k = event.keyCode;
} else if (event.which) // IE9/Firefox/Chrome/Opera/Safari
{
k = event.which;
}
if (k == 13) //13 = 'Enter' key
{
var dt = $("#datepicker").val();
//alert(dt);
if (dt != '') {
$.ajax({
type: "POST",
url: "search_date.php",
data: "dt=" + dt,
success: function (option) {
$("#results").html(option).listview("refresh");
}
});
} else {
$("#results").html("");
}
return false;
}
}
</script>
<script type="text/javascript">
$(function () {
$("#datepicker").datepicker();
$("#datepicker").datepicker("setDate", new Date());
$('#datepicker').datepicker({
inline: true,
showOn: "button",
buttonImage: "images/calendar.gif",
showAnim: "slideDown",
changeMonth: true,
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function (dateText, inst) {
//alert($('#datepicker').datepicker( "getDate" ))
//alert("dateText: " + dateText + ", inst: " + inst);
var dt = dateText;
if (dt != '') {
$.ajax({
type: "POST",
url: "search_date.php",
data: "dt=" + dt,
success: function (option) {
$("#results").html(option).listview("refresh");
}
});
} else {
$("#results").html("");
}
return false;
}
});
$('body').ready(function(){
var dt = $("#datepicker").val();
//alert(dt);
if(dt != '')
{
$.ajax
({
type: "POST",
url: "search_date.php",
data: "dt="+ dt,
success: function(option)
{
$("#results").html(option).listview("refresh");
}
});
}
else
{
$("#results").html("");
}
return false;
});
</script>
$('body').ready(function(){
var dt = $("#datepicker").val();
//alert(dt);
if(dt != '')
{
$.ajax
({
type: "POST",
url: "search_date.php",
data: "dt="+ dt,
success: function(option)
{
$("#results").html(option).listview("refresh");
}
});
}
else
{
$("#results").html("");
}
return false;
});
Related
Good day, i'm using fullcalendar plugin to show events on my calendar. right now i'm having a problem on displaying the events in my calendar. i am using json result to get the data that will show on my calendar..
here's my code
Controller:
[DontWrapResult]
public JsonResult GetCalendarEvents(string start, string end)
{
var fromDate = Convert.ToDateTime(start);
var toDate = Convert.ToDateTime(end);
var result = _utils.GetEventsCalendar("ALL", fromDate, toDate);
var eventList = from item in result
select new
{
id = item.CalendarId.ToString(),
title = item.Title,
description = item.Description,
start = item.FromDate.ToLocalTime().ToString("s"),
end = item.EndDate.HasValue ? item.EndDate.Value.ToLocalTime().ToString("s") : item.FromDate.ToLocalTime().ToString("s"),
NoofGuests = item.NoofGuests,
allDay = item.AllDay,
type = item.CalType,
requestedBy = item.RequestedBy,
driverName = item.DriverName,
providerName = item.ProviderName,
phoneNo = item.PhoneNo,
controlNumber = item.ControlNumber,
status =item.StatusId
};
var rows = eventList.ToArray();
return Json(rows, JsonRequestBehavior.AllowGet);
}
then in my javascript:
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
droppable: false, // this allows things to be dropped onto the calendar
events: '#Url.Action("GetCalendarEvents/")',
eventRender: function (event, element) {
element.attr('href', 'javascript:void(0);');
if (event.start <date && event.end <date) {
element.css('background-color', '#ed5565');
element.css('border', '1px solid #ed5565');
} else if (event.start <=date && event.end >= date) {
element.css('background-color', '#f8ac59');
element.css('border', '1px solid #f8ac59');
}
if (event.status == 1) {
element.css('background-color', '#0000FF');
element.css('border', '1px solid #0000FF');
} else if (event.status == 4)
{
element.css('background-color', '#00CC33');
element.css('border', '1px solid #00CC33');
}
element.click(function () {
if (event.type == 'Event') {
$('#forBook').hide();
$('#permitdetails').hide();
$('#delPer').show();
var url = '#Url.Action("Edit", "Events")?id=' + event.id;
}
else if (event.type == 'ApproveBook') {
$('#forBook').show();
$('#permitdetails').hide();
$('#delPer').show();
$("#NoofGuests").html(event.NoofGuests);
}
else {
$('#forBook').hide();
$('#permitdetails').hide();
$('#delPer').show();
var url = '#Url.Action("Edit", "Announcements")?id=' + event.id;
}
if (event.type == 'DeliveryPermit') {
$('#delPer').hide();
$('#permitdetails').show();
$("#controlNo").html(event.controlNumber);
$("#requestby").html(event.requestedBy);
$("#deliverydate").html(moment(event.start).format('MMM Do'));
$("#contractor").html(event.providerName);
$("#contact").html(event.phoneNo);
$("#drivername").html(event.driverName);
if (event.status == 1) { $("#status").html("Arrived"); }
else if (event.status == 4) { $("#status").html("Completed"); }
else { $("#status").html("Submitted"); }
//getDetails(event.id);
var urls = '#Url.Action("Calendarpermit", "AdminHome")?id=' + event.id + '&strHide=' + "strHide";
var url = '#Url.Action("Edit", "DeliveryPermits",new { area = "Permit" })/' + event.id
$.ajax({
url: urls,
cache: false,
data: {id : event.id},
contentType: 'application/html; charset=utf-8',
type: "POST",
dataType: "html",
success: function (data){
$('#permitItem').html(data);
}
});
}
if (event.type == 'Announcement') {
$('#forBook').hide();
$('#permitdetails').hide();
$('#delPer').show();
$("#startTime").html(moment(event.start).format('MMM Do '));
$("#endTime").html(moment(event.start).format('MMM Do'));
} else {
$("#startTime").html(moment(event.start).format('MMM Do h:mm A'));
$("#endTime").html(moment(event.end).format('MMM Do h:mm A'));
}
$("#eventInfo").html(event.description);
$("#eventLink").attr('href', url);
$("#eventContent").dialog({
modal: true, title: event.title, width: 350
});
});
}
});
i tried to put an alert inside the eventRender but it didn't pass or show data in my calendar.. what i am doing wrong? thanks in advance
var filterval = filterlist();
if (filterval) {
$.ajax({
type: "POST",
url: "filt.php",
data: main_string,
cache: false,
dataType:'json',
success: function(data) {}
});
}
filterlist() {
var fprice = $('input[name="fprice"]').val();
var lprice = $('input[name="lprice"]').val();
if (fprice >= lprice) {
alert("Value Wrong");
return false;
}
else if (fprice == "" || lprice == "") {
alert("price empty");
return false;
}
return fprice + " " + lprice;
}
I expectation is
Filterlist() function value false to AJAX process stop.
Value not false to work on ajax process .
var fprice = parseInt($('input[name="fprice"]').val());
var lprice = parseInt($('input[name="lprice"]').val());
Use parseInt to convert fprice and price into numbers(from strings) and then compairing is possible :)
Overview: I am making a web tool that displays the total number of movies sold by different studios on digital platform using charts(Highcharts). These charts are dynamic so the user has a list of filters he can use to change the result.
Filter 1 - Studios:
Using this filter the user can select different studios whose sales he would wish to see.
Filter 2 - Period:
This is the duration during of time for which he would want to see the sales.
It is this filter that is giveing me the problem.
Basically the selection of the period doesnot get sent with the AJAX request and hence has no effect on the chart. The default value for the period (Set using the momentjs library) also goes with the AJAX request. It is the change in the period that doesnt get added to the request.
There is no error message as such.
The Code:
$(document).ready(function(){
var btnStudiosDiv = $('#btnStudios');
var getStudios = function ()
// Get all studio's from buttons with .active class
var studios = $('button.active', btnStudiosDiv).map(function () {
return $(this).val();
}).get();
// If no studio's found, get studio's from any button.
if (!studios || studios.length <= 0) {
studios = $('button', btnStudiosDiv).map(function () {
return $(this).val();
}).get();
}
return studios;
};
var periodFrom = (moment().format('WW')-11)
var periodTo = moment().format('WW')
var output = {};
var show = function (studios) {
output['Studios'] = studios,
var per = {Period: {"From":["W" + periodFrom],"To":["W" + periodTo]}};
$.extend(output, per);
$('.list').html(JSON.stringify(output)); //Display Json Object on the Webpage
$.ajax({ //Ajax call to send the Json string to the server
type: "POST",
data: {"jsontring": JSON.stringify(output)},
url: "http://localhost:8080/salesvolume" ,
contentType: "application/json",
dataType: "json",
cache: false,
beforeSend: function() {
$('#container').html("<img class = 'ajload' src='loading.gif' />");
},
success: function(data){
alert( ) ;
$('#container').highcharts(data);
},
error: function() {
alert("Something is not OK :(")
},
});
};
var timer; //To create a time delay of 2 Secs for every selection
$(".btn").click(function () {
$(this).toggleClass('active');
// Fetch studios
var studios = getStudios();
// Remove previous timeOut if it hasn't executed yet.
if(timer)
clearTimeout(timer);
// Wait 2 sec
timer = setTimeout(function () {
// Fill list with the studios
show(studios);
},2000);
});
// Show the json on page load
show(getStudios());
//Period Selector (Template used from http://jqueryui.com/datepicker/)
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('#weekpickerFrom').datepicker('widget').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('#weekpickerFrom').datepicker( {
showOn: "button",
buttonImage: "calendar2.gif",
buttonImageOnly: true,
buttonText: "Select date",
changeMonth: true,
changeYear: true,
showWeek: true,
showOtherMonths: false,
selectOtherMonths: false,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#weekpickerFrom').val(date.getFullYear() + '/W'+$.datepicker.iso8601Week(new Date(dateText)));
output.Period.From = (date.getFullYear() + '/W'+$.datepicker.iso8601Week(new Date(dateText)));
periodFrom = output.Period.From //Add Period from to the Json String
if(timer)
clearTimeout(timer);
timer = window.setTimeout(function() {$('.list').html(JSON.stringify(output))},2000); //Display Json Object on the Webpage
selectCurrentWeek();
},
beforeShow: function() {
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
}).datepicker('widget').addClass('ui-weekpickerFrom');
$('.ui-weekpickerFrom .ui-datepicker-calendar tr').on('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.ui-weekpickerFrom .ui-datepicker-calendar tr').on('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('#weekpickerTo').datepicker('widget').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('#weekpickerTo').datepicker( {
showOn: "button",
buttonImage: "calendar2.gif",
buttonImageOnly: true,
buttonText: "Select date",
changeMonth: true,
changeYear: true,
showWeek: true,
showOtherMonths: false,
selectOtherMonths: false,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#weekpickerTo').val(date.getFullYear() + '/W'+$.datepicker.iso8601Week(new Date(dateText)));
output.Period.To = (date.getFullYear() + '/W'+$.datepicker.iso8601Week(new Date(dateText)));
periodTo = output.Period.From //Add Period to to the Json String
if(timer)
clearTimeout(timer);
timer = window.setTimeout(function() {$('.list').html(JSON.stringify(output))},2000); //Display Json Object on the Webpage
selectCurrentWeek();
},
beforeShow: function() {
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
}).datepicker('widget').addClass('ui-weekpickerTo');
$('.ui-weekpickerTo .ui-datepicker-calendar tr').on('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.ui-weekpickerTo .ui-datepicker-calendar tr').on('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
});
It would be really helpful if someone could point out where I am going wrong.
Note: There are multiple other filter added on the tool, however for simplicity 1 have just mentioned the two important ones.
I think data should be like this
$.ajax({
type: "POST",
**data: "{\"jsontring\":" + JSON.stringify(output) + "}",**
url: "http://localhost:8080/salesvolume" ,
contentType: "application/json",
dataType: "json",
cache: false,
beforeSend: function() {
$('#container').html("<img class = 'ajload' src='loading.gif' />");
},
success: function(data){
alert( ) ;
$('#container').highcharts(data);
},
error: function() {
alert("Something is not OK :(")
},
});
In your Ajax request
I am trying to enable specific days in a jquery-ui datepicker. So far i have set my sql scripts and json files and everything is working fine except the response time, because i've set async to false. My jquery code is.
var today = new Date();
$("#pickDate").datepicker({
minDate: today,
maxDate: today.getMonth() + 1,
dateFormat: 'dd-mm-yy',
beforeShowDay: lessonDates,
onSelect: function(dateText) {
var selectedDate = $(this).datepicker('getDate').getDay() - 1;
$("#modal").show();
$.get("http://localhost/getTime.php", {
lessonDay: selectedDate,
lessonId: $("#lesson").val()
}, function(data) {
$("#attend-time").html("");
for (var i = 0; i < data.length; i++) {
$("#attend-time").append("<option>" + data[i].lessonTime + "</option>");
$("#modal").hide();
}
}, 'json');
}
});
function lessonDates(date) {
var day = date.getDay();
var dayValues = [];
$.ajax({
type: "GET",
url: "http://localhost/getLessonDay.php",
data: {
lessonId: $("#lesson").val()
},
dataType: "json",
async: false,
success: function(data) {
for (var i = 0; i < data.length; i++) {
dayValues.push(parseInt(data[i].lessonDay));
}
}
});
if ($.inArray(day, dayValues) !== -1) {
return [true];
} else {
return [false];
}
}
Can anyone help me out? I repeat the above code is working fine but with not good response time due to async=false.
Thanks!
You are doing it all wrong. In your example, a synchronous AJAX request is fired for every day in the month. You need to re-factor your code like this (rough outline):
// global variable, accessible inside both callbacks
var dayValues = [];
$("#pickDate").datepicker({
beforeShowDay: function(date) {
// check array and return false/true
return [$.inArray(day, dayValues) >= 0 ? true : false, ""];
}
});
// perhaps call the following block whenever #lesson changes
$.ajax({
type: "GET",
url: "http://localhost/getLessonDay.php",
async: true,
success: function(data) {
// first populate the array
for (var i = 0; i < data.length; i++) {
dayValues.push(parseInt(data[i].lessonDay));
}
// tell the datepicker to draw itself again
// the beforeShowDay function is called during the processs
// where it will fetch dates from the updated array
$("#pickDate").datepicker("refresh");
}
});
See similar example here.
$.when(getdates()).done(function() {
//this code is executed when all ajax calls are done => the getdates() for example
$('#res_date').datepicker({
startDate: '-0m',
format: 'dd/mm/yyyy',
todayHighlight:'TRUE',
autoclose: true,
datesDisabled: unavailableDates,
});
});
function getdates() {
return $.ajax({
type:'GET',
url:'/available_dates',
success: function(response) {
for (let i = 0; i < response.data.length; i++) {
unavailableDates.push(response.data[i]);
}
console.log(unavailableDates);
return unavailableDates;
},
});
}
i have two date fields, if a user selects only one date then function A should get executed, else if both date are selected then function A and B should get executed. I am using jquery datepicker
These are my two onselect functions:
$(function () {
$("#SelectA").datepicker({
onSelect: function (date) {
A = $('#SelectA').val();
Method(A, "", "");
}
});
});
$(function () {
$("#SelectB").datepicker({
onSelect: function (date) {
A = $('#SelectA').val();
B = $('#SelectB').val();
Method(A, B, "");
}
});
});
The question is that how do i implement IF loop in here? And do i need to terminate functionA and re-invoke it when function B is selected?
function Method(A,B,C) {
$.ajax({
type: "POST",
url: "Services/MethodName.asmx/Method",
data: JSON.stringify({ A: A, B: B, C: C }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
place the data into a table
}
});
}
This is my datepicker:
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#dpd1').datepicker({
onRender: function (date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function (ev) {
if (ev.date.valueOf() > checkout.date.valueOf()) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate() + 1);
checkout.setValue(newDate);
}
checkin.hide();
$('#dpd2')[0].focus();
}).data('datepicker');
var checkout = $('#dpd2').datepicker({
onRender: function (date) {
return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function (ev) {
checkout.hide();
}).data('datepicker');
I'm not 100% sure on what you're asking, but I think this might solve your problem (assuming the server knows how to handle blank values):
$(function () {
$("#SelectA").datepicker({
onSelect: handleSelectedDates
});
$("#SelectB").datepicker({
onSelect: handleSelectedDates
});
function handleSelectedDates(date) {
var A = $('#SelectA').val();
var B = $('#SelectB').val();
Method(A, B, "");
}
var ajaxReq;
function Method(A,B,C) {
if (ajaxReq)
ajaxReq.abort();
ajaxReq = $.ajax({
type: "POST",
url: "Services/MethodName.asmx/Method",
data: JSON.stringify({ A: A, B: B, C: "" }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
place the data into a table
}
});
}
});
Assuming you are using the jQuery datepicker (which this question has not yet been tagged), then you can simply use the onSelect method which will return the dates, which you can then check against and if statement and run your custom code.
Here is a jsfiddle. http://jsfiddle.net/xu8zZ/
$(function() {
$( "#datepicker" ).datepicker({
onSelect: function(dateText, inst) {
console.log(dateText);
console.log(inst);
}
});
});
Just look at your console when you select a date and you will see how it returns the date; at which time, you can write your condition.
Ref. http://api.jqueryui.com/datepicker/#option-onSelect
You can use one function to handle both events:
$(function () {
$("#SelectA,#SelectB").datepicker({
onSelect: function (date) {
var A = $('#SelectA').val();
if ($(this).attr("id") == "SelectB")
{
var B = $('#SelectB').val();
}
else
{
var B = "";
}
var C = "";
Method(A, B, C);
}
});
});