Hi,
We are using a Rad Calendar for a control that we integrated into our website. Which works great. Until someone uses our "Add to Cart" button. I have mixed some JS and some of the Rad Calendar JS calls.
I have a box that, on click, opens my calendar and you can choose a day. Then the user chooses a time from a list when we get a post back from our service.
The issue is, if the user does not choose a "ticket" quantity, and chooses "add to cart," the calendar and the time stays chosen in the background, but my 'mask' resets to the default. I am using the Rad Calendar to call the functions on the front end to show and hide my 'masks'.
How would I write the function so that the 'masks' only show if there no Time and Date chosen, but also make the selections show in the boxes if they are chosen, but "Add to Cart" postback occurs.
So what I need is the Calendar value AND the Time to still show in the boxes if the "Add to Cart" button is chosen and there is an error, such as not quantity.
Any and all help is appreciated.
I have screen shots attached. I have put notes in the screen shots.
Myc JS and Calendar aspx code is below:
ASPX Code:
Javascript Code:
Thanks,
Carlos
We are using a Rad Calendar for a control that we integrated into our website. Which works great. Until someone uses our "Add to Cart" button. I have mixed some JS and some of the Rad Calendar JS calls.
I have a box that, on click, opens my calendar and you can choose a day. Then the user chooses a time from a list when we get a post back from our service.
The issue is, if the user does not choose a "ticket" quantity, and chooses "add to cart," the calendar and the time stays chosen in the background, but my 'mask' resets to the default. I am using the Rad Calendar to call the functions on the front end to show and hide my 'masks'.
How would I write the function so that the 'masks' only show if there no Time and Date chosen, but also make the selections show in the boxes if they are chosen, but "Add to Cart" postback occurs.
So what I need is the Calendar value AND the Time to still show in the boxes if the "Add to Cart" button is chosen and there is an error, such as not quantity.
Any and all help is appreciated.
I have screen shots attached. I have put notes in the screen shots.
Myc JS and Calendar aspx code is below:
ASPX Code:
<
asp:UpdatePanel
runat
=
"server"
ID
=
"up1"
UpdateMode
=
"Always"
>
<
ContentTemplate
>
<
asp:Panel
ID
=
"Panel1"
CssClass
=
"ControlPanel"
runat
=
"server"
>
<
asp:Table
runat
=
"server"
ID
=
"contents"
CssClass
=
"MuseumDateTimeTable"
>
<
asp:TableRow
ID
=
"trCalendar"
runat
=
"server"
VerticalAlign
=
"Top"
>
<
asp:TableCell
ID
=
"tcCalendar"
runat
=
"server"
CssClass
=
"CalendarOverallCell"
>
<
div
class
=
"MuseumStepHeaderWrapper"
>
<
div
class
=
"MuseumVariantStepText"
>
<
asp:Label
runat
=
"server"
ID
=
"lblMuseumStepOne"
><%=GetLocaleResourceString("Museum.StepOne")%></
asp:Label
>
</
div
>
<
asp:Label
runat
=
"server"
ID
=
"ltNextAvailableDate"
Text
=
""
CssClass
=
"MuseumNextAvailableDate"
/>
<%--
<
div
class
=
"MuseumVariantChooseText"
>
<%=GetLocaleResourceString("Museum.MuseumChooseDateTimeText")%>
</
div
>--%>
</
div
>
<
div
id
=
"MuseumSelectedDayBox"
>
<%--
<
div
id
=
"DateSelectedTitle"
>
<%=GetLocaleResourceString("Museum.MuseumDateSelectedTitle")%></
div
>--%>
<
div
id
=
"DateSelectedDay"
>
<
asp:Literal
runat
=
"server"
ID
=
"ltMuseumDateSelectedDay"
Text
=
""
/>
</
div
>
</
div
>
<
asp:HiddenField
runat
=
"server"
ID
=
"ShowCalendar"
ClientIDMode
=
"Static"
/>
<
telerik:RadCalendar
ID
=
"tkCalendar"
runat
=
"server"
EnableMultiSelect
=
"false"
OnSelectionChanged
=
"tkCalendar_SelectionChange"
CssClass
=
"CalendarOverall"
AutoPostBack
=
"true"
ShowRowHeaders
=
"false"
NavigationPrevToolTip
=
"Previous Month"
NavigationNextToolTip
=
"Next Month"
Skin
=
"Special"
EnableEmbeddedSkins
=
"false"
EnableEmbeddedBaseStylesheet
=
"false"
EnableMonthYearFastNavigation
=
"false"
DayNameFormat
=
"Short"
UseColumnHeadersAsSelectors
=
"false"
>
<
ClientEvents
OnDateSelecting
=
"LoadingTimes"
/>
<
ClientEvents
OnInit
=
"InitializeCalendar"
/>
<
ClientEvents
OnCalendarViewChanging
=
"MonthChangeShow"
/>
<
ClientEvents
OnDateSelected
=
"EnableTimes"
/>
<
SelectedDayStyle
CssClass
=
"CalendarSelectedDay"
/>
<
OtherMonthDayStyle
CssClass
=
"CalendarOtherMonthDay"
/>
<
TitleStyle
CssClass
=
"CalendarTitle"
/>
<
DayStyle
CssClass
=
"CalendarDay"
/>
<
SpecialDays
>
<
telerik:RadCalendarDay
Repeatable
=
"Today"
Date
=
""
ItemStyle-CssClass
=
"rcToday"
>
</
telerik:RadCalendarDay
>
</
SpecialDays
>
<
CalendarDayTemplates
>
<
telerik:DayTemplate
ID
=
"BlackOutDayTemplate"
runat
=
"server"
>
<
Content
>
<
div
class
=
"UnavailableKeyText"
>
<%=GetLocaleResourceString("Museum.EventCalendar.Unavailable")%>
</
div
>
</
Content
>
</
telerik:DayTemplate
>
<
telerik:DayTemplate
ID
=
"SoldOutDayTemplate"
runat
=
"server"
>
<
Content
>
<
div
class
=
"SoldOutDateKeyText"
>
<%=GetLocaleResourceString("Museum.EventCalendar.SoldOut")%>
</
div
>
</
Content
>
</
telerik:DayTemplate
>
<
telerik:DayTemplate
ID
=
"PreviousDayTemplate"
runat
=
"server"
>
<
Content
>
<
div
class
=
"PreviousDate"
>
</
div
>
</
Content
>
</
telerik:DayTemplate
>
</
CalendarDayTemplates
>
</
telerik:RadCalendar
>
</
asp:TableCell
>
<%--<
asp:TableCell
ID
=
"tcCalSpacer"
runat
=
"server"
Width
=
"10px"
>
<
asp:Label
ID
=
"Label1"
runat
=
"server"
Text
=
" "
></
asp:Label
>
</
asp:TableCell
> --%>
<
asp:TableCell
ID
=
"tcAvailableTimes"
runat
=
"server"
VerticalAlign
=
"Top"
CssClass
=
"MuseumAvailableTimes"
>
<
div
class
=
"MuseumStepHeaderWrapper"
>
<
div
class
=
"MuseumVariantStepText"
>
<
asp:Label
runat
=
"server"
ID
=
"lblMuseumStepTwo"
><%=GetLocaleResourceString("Museum.StepTwo")%></
asp:Label
>
</
div
>
<%--
<
div
class
=
"MuseumVariantChooseText"
>
<%=GetLocaleResourceString("Museum.MuseumChooseQuantityText")%>
</
div
>--%>
</
div
>
<
asp:ListBox
CssClass
=
"timeListBox"
AutoPostBack
=
"True"
OnSelectedIndexChanged
=
"TimedListBoxSelectionChanged"
ID
=
"TimesAvailable"
runat
=
"server"
></
asp:ListBox
>
<
asp:Label
ID
=
"lblTimesMessage"
runat
=
"server"
CssClass
=
"MuseumTimesMessage"
></
asp:Label
>
</
asp:TableCell
></
asp:TableRow
>
</
asp:Table
>
<
asp:HiddenField
ID
=
"hfDateLock"
value
=
"false"
runat
=
"server"
/>
<
asp:HiddenField
ID
=
"hfLastDate"
Value
=
""
runat
=
"server"
/>
<
div
id
=
"museumCalendarLoadingContainer"
>
</
div
>
<
div
id
=
"museumCalendarLoadingContent"
>
<%=GetLocaleResourceString("Museum.MuseumCalendarEventProcessingText")%><
br
/>
<
img
src
=
"../App_Themes/Museum/images/museumLayout/loading.gif"
/></
div
>
</
asp:Panel
>
</
ContentTemplate
>
</
asp:UpdatePanel
>
Javascript Code:
$(document).ready(
function
() {
$(
'#museumCalendarLoadingContainer'
).hide();
$(
'#museumCalendarLoadingContent'
).hide();
//$('table.RadCalendar_Special').hide();
$(
'#MuseumSelectedDayBox'
).removeClass(
'chosen'
);
//On initial start adjust generated size and prepend blank option to list
$(
".timeListBox"
).attr(
'size'
,
'1'
);
//TODO: If 'No Shows Today' is in list don't show 'Choose Time' text only show 'No Shows Today'
if
($(
'.timeListBox option[value="NoShows"]'
).length) {
//Do nothing and show 'No Shows' message
$(
'.timeListBox'
).addClass(
'SoldOutDateKeyText'
);
}
else
{
$(
'<option value="" selected>Choose a Time</option>'
).prependTo(
'.timeListBox'
);
}
//Default Choose Date on Dom Load and disable Choose Time
$(
'#DateSelectedDay'
).html(
'Choose Date'
);
if
($(
'#DateSelectedDay'
).html(
'Choose Date'
)) {
$(
'.timeListBox'
).prop(
'disabled'
,
'disabled'
).addClass(
'disabled'
);
$(
'<option value="" selected>Choose a Time</option>'
).prependTo(
'.timeListBox'
);
$(
'.timeListBox'
).before(
'<div class="disabledTrigger"></div>'
);
}
$(
'.disabledTrigger'
).click(
function
(e) {
$(
'#disabledMessage'
).hide();
$(
'<div id="disabledMessage">Please choose date first<span id="closeFieldAlert">X</span></div>'
).prependTo(
'body'
).hide().delay(300).slideDown(400).delay(6000).slideUp(400);
$(
'#closeFieldAlert, #disabledMessage'
).click(
function
() {
$(
'#disabledMessage'
).hide();
});
// alert("Please choose DATE first");
});
$(document).on(
'click'
,
'#MuseumSelectedDayBox'
,
function
() {
$(
'#MuseumSelectedDayBox'
).addClass(
'chosen'
);
$(
"table.RadCalendar_Special"
).fadeIn(300);
$(
'#calendarModalCover'
).show();
});
});
//Show/Hide calendar and show calendar again on Month Change using the ASP.NET Hidden field.
function
pageLoad(sender, args) {
if
($telerik.findElement(document,
"ShowCalendar"
).value ==
"show"
) {
$(
"table.RadCalendar_Special"
).show();
};
$telerik.findElement(document,
"ShowCalendar"
).value =
"hide"
;
$(
"#calendardiv"
).click(
function
() {
$(
"table.RadCalendar_Special"
).show();
});
}
function
MonthChangeShow(sender, eventArgs) {
$telerik.findElement(document,
"ShowCalendar"
).value =
"show"
;
}
//DateSelecting - OnDateSelecting
function
LoadingTimes(sender, eventArgs) {
$(
'#museumCalendarLoadingContainer'
).show();
$(
'#museumCalendarLoadingContent'
).show();
$(
'#calendarModalCover'
).hide();
}
//Calendar Initialized - OnInit
function
InitializeCalendar(sender) {
//alert('initialize calendar');
$(
'#museumCalendarLoadingContainer'
).hide();
$(
'#museumCalendarLoadingContent'
).hide();
$(
".timeListBox"
).attr(
'size'
,
'1'
);
}
//Enable Times on date selected - OnDateSelected - this is not really working because of postback
function
EnableTimes(sender, eventArgs) {
// alert('enable times');
//sender.set_autoPostBack(true);//Kind of works
$(
'.timeListBox'
).prop(
'disabled'
,
false
).removeClass(
'disabled'
);
$(
'table.RadCalendar_Special'
).hide();
}
Thanks,
Carlos