I have an ajax calendar control used in my form for to date and from date.
The issue with it is, if I select date from previous year and click on reset button, the textbox containing date gets cleared but now when focus is set on the textbox the calendar control shows month of the year previously selected.
Is there any way we can reset calendar control as well on click of the reset button?
function Reset(divs) {
$(".ui-tooltip-content").parents('div').remove();
ClearErrorMsg();
$('#' + divs + ' input[type="text"]').val('');
$('#' + divs + ' select').val('');
$('#' + divs + ' input[type="text"]').attr({ "value": "" });
var BrwsrType = BrowserType();
if (BrwsrType == 'IE') {
$('#' + divs + ' select option').each(function () {
$("select option").removeAttr('selected');
})
};
$("select").each(function (i) {
$('select :nth-child(1)').attr('selected', 'selected')
$('select')[i].options[0].selected = true
});
var txtpagesize = $get('txtPageSize');
if (txtpagesize != null) {
txtpagesize.value = txtpagesize.attributes["defValue"].value;
$('#' + txtpagesize.id).attr({ "value": txtpagesize.attributes["defValue"].value });
}
HideDialog();
try {
Page_ClientValidate('');
}
catch (er) {
}
return false;
}
and the function which is called on reset button is as follows
function ResetForm() {
Reset('Search');
$(".dropdown").each(function () {
$('.dropdown :nth-child(1)').attr('selected', 'selected')
});
isValidDate($get('txtBeginDate'));
isValidDate($get('txtEndDate'));
HideCallOut();
$get('txtBeginDate').defaultValue = "";
$get('txtEndDate').defaultValue = "";
return false;
}
<script type="text/javascript" >
function resetcalendar()
{
$find("_Calendar").set_selectedDate(null);
$("[id*=Calendar]").val("");
$(".ajax__calendar_active").removeClass("ajax__calendar_active");
return false;
}
</script>
where _Calendar is the BehaviorID of Calendarextender and Calendar is the ID of Calendarextender
Hope this helps
Happy Coding
Related
I have implemented Cascading (Dependent) DropDownList using ASP.NET MVC.
This is the tutorial
Now I need show alert message box after insert data and redirect on Index page in ASP.NET MVC.
To show alert message in ASP.NET MVC after insert data using store procedure from MySQL database, I have write the code like as shown below.
<script type="text/javascript">
$(function () {
var msg = '#ViewData["result"]';
if (msg > 0)
{
alert("User Details Inserted Successfully");
window.location.href = "#Url.Action("Index", "Home")";
}
});
</script>
The data is correctly registered in the database table and the alert message box after insert data it's show.
But the redirect to index.cshtml not working because all the DropDownList on the form are empty except the first DropDownList that populates correctly.
window.location.href = "#Url.Action("Index", "Home")";
I mean that all other (populated cascading) DropDownList are enabled but empty.
I need redirect to Index Action page and being able to reload a new record, with this redirection it is impossible because the populated cascading DropDownList remain empty... instead of disabled and populated from value of first dropdownlist...
How to do resolve this?
Thanks.
Update 2021-01-02
#section Scripts {
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/Scripts/DatePicker.js");
#Styles.Render("~/Content/cssjqryUi")
<script type="text/javascript">
$(function () {
var msg = '#ViewData["result"]';
console.log(msg);
if (msg > 0)
{
alert("User Details Inserted Successfully");
var url = "#Url.Action("Index", "Home")";
window.location.href = url;
}
});
</script>
<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
jQuery(function ($) {
$.validator.addMethod('date',
function (value, element) {
if (this.optional(element)) {
return true;
}
var ok = true;
try {
$.datepicker.parseDate('dd/mm/yy', value);
}
catch (err) {
ok = false;
}
return ok;
});
$("#thedate").datepicker(options);
$(function () {
$(".loading").hide();
$("select").each(function () {
if ($(this).find("option").length <= 1) {
$(this).attr("disabled", "disabled");
}
});
$("select").change(function () {
var value = 0;
if ($(this).val() != "") {
value = $(this).val();
}
var id = $(this).attr("id");
$.ajax({
type: "POST",
url: "/Home/AjaxMethod",
data: '{type: "' + id + '", value: "' + value + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var dropDownId;
var list;
switch (id) {
case "CountryId":
list = response.States;
DisableDropDown("#TicketId");
DisableDropDown("#CityId");
dropDownId = "#TicketId";
list = response.Ticket;
PopulateDropDown("#TicketId", list);
break;
case "TicketId":
list = response.States;
DisableDropDown("#StateId");
PopulateDropDown("#StateId", list);
break;
case "StateId":
dropDownId = "#CityId";
list = response.Cities;
DisableDropDown("#CityId");
PopulateDropDown("#CityId", list);
dropDownId = "#CityId2";
list = response.Cities2;
PopulateDropDown("#CityId2", list);
$("#GPS").val(response.GPS);
break;
}
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
});
function DisableDropDown(dropDownId) {
$(dropDownId).attr("disabled", "disabled");
$(dropDownId).empty().append('<option selected="selected" value="">[ === Select === ]</option>');
}
function PopulateDropDown(dropDownId, list) {
var modal = $('<div />');
modal.addClass("modalBackground");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
setTimeout(function () {
if (list != null && list.length > 0) {
$(dropDownId).removeAttr("disabled");
$.each(list, function () {
$(dropDownId).append($("<option></option>").val(this['Value']).html(this['Text']));
});
$(".loading").hide();
$('.modalBackground').remove();
}
}, 1000);
}
</script>
}
update controller
[HttpPost]
public ActionResult Index(PersonModel person)
{
MTsqlinsert(person); //Insert values in the database
if (ModelState.IsValid)
{
PersonModel personModel = new PersonModel();
person.Countries = PopulateDropDown("SELECT CountryId, CountryName FROM Countries", "CountryName", "CountryId");
person.States = PopulateDropDown("SELECT StateId, StateName FROM States WHERE CountryId = " + countryId, "StateName", "StateId");
person.Cities = PopulateDropDown("SELECT CityId, CityName FROM Cities WHERE StateId = " + stateId, "CityName", "CityID");
ViewData["result"] = "1";
return RedirectToAction("Index");
}
return View(person);
}
[HttpGet]
[OutputCache(NoStore = true, Duration = 60, VaryByParam = "*")]
public ActionResult Index()
{
PersonModel personModel = new PersonModel
{
Countries = PopulateDropDown("SELECT CountryId, CountryName FROM Countries", "CountryName", "CountryId");
};
return View(personModel);
}
i have a datepicker on a textbox and in the same time i'm using a function that checks if the user has entered the right date and time format using javascript.
The problem i am facing is that whenever i have the mouse selected on the textbox the datepicker shows as it should but if i want to select a date from the datepicker the focusout() function is executed and i must re-click again on the date from the datepicker to be selected.
here is my code:
$('#StartDateTime').datepicker({
/* here is only to stay focusin() on the textbox after selecting date */
constrainInput: false,
fixFocusIE: false,
onSelect: function (dateText, inst) {
this.fixFocusIE = true;
$(this).change().focus();
},
onClose: function (dateText, inst) {
this.fixFocusIE = true;
this.focus();
},
beforeShow: function (input, inst) {
var result = $.browser.msie ? !this.fixFocusIE : true;
this.fixFocusIE = false;
return result;
}
}).click(function () { $(this).focus() });
$("#StartDateTime").focusout(function () {
if (sDTValid() == false) {
alert("Please enter Date (Day/Month/Year) & Time (HH:MM AM or PM)");
}
});
function sDTValid() {
/* this is the function of date and time format validation*/
var sDT = document.getElementById('StartDateTime').value;
if (sDT.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4}) (\d{1,2}):(\d{2}) (.*)$/)) {
return true;
}
else {
return false;
}
}
the 'focusout' event will be triggered when user click on the datepicker element because it's not part of the input#StartDateTime
you can use other event when value is changed eg. 'input'
$("#StartDateTime").on('input', function () {
if (sDTValid() == false) {
alert("Please enter Date (Day/Month/Year) & Time (HH:MM AM or PM)");
}
});
I have a gridview in the asp.net page. And each column has a button, on the click of which I am opening an Pop up using jquery.
protected void gvExpiry_RowDataBound(object sender, GridViewRowEventArgs e)
{
if ((e.Row.RowType == DataControlRowType.DataRow))
{
Button tmp = new Button();
tmp = ((Button)e.Row.FindControl("btnTest"));
tmp.Attributes["onclick"] = "javascript:return MyFunc(" + gvExpiry.DataKeys[e.Row.RowIndex].Value.ToString() + "," + gvExpiry.DataKeys[e.Row.RowIndex].Value.ToString() + ")";
}
}
$("[id*=btnTest]").live("click", function () {
$("#modal_dialog").dialog({
close:function(event, ui){
$(this).dialog("close");
},
title: "Please enter tag",
buttons: {
Ok: function MyFunc(fileName, tag) {
//alert(fileName);
var etag = $("#<%= txttag.ClientID %>").val();
alert(typeof fileName);
alert(typeof Etag)
//other functionality
},
modal: true
});
return false;
});
But in my MyFunc(fileName, Etag) I'm not getting the correct values of the parameters. I am gettng object and undefined value
How can I get the correct value of my parameters
Try adding single quotes in the function call, the function thinks the text are variables, not strings.
tmp.Attributes["onclick"] = "javascript:return MyFunc('" + gvExpiry.DataKeys[e.Row.RowIndex].Value.ToString() + "','" + gvExpiry.DataKeys[e.Row.RowIndex].Value.ToString() + "')";
I am using this code for binding asp.net gridview with right click contextmenu using jQuery but every time when I click it (use option in menu list) it reloads the page. What should I do if I want to use an UpdatePanel?
function fnView() {
var lnkView = document.getElementById('<%=lnkView.ClientID %>');
var hiddenField = document.getElementById('<%=fldProductID.ClientID %>');
hiddenField.value = $("div").filter("[type=ContextMenu]")[0].id.replace("Menu", "");
lnkView.click();
}
function fnDelete() {
var lnkDelete = document.getElementById('<%=lnkDelete.ClientID %>');
var hiddenField = document.getElementById('<%=fldProductID.ClientID %>');
hiddenField.value = $("div").filter("[type=ContextMenu]")[0].id.replace("Menu", "");
lnkDelete.click();
}
jQuery.fn.setEvents = function (e) {
var me1 = jQuery(this);
return this.each(function () {
var me = jQuery(this);
me.click(function (e) {
$("div").filter("[type=ContextMenu]").hide();
fnSetMenu(me.children(':first-child').text(), e.pageX, e.pageY);
});
});
};
function fnSetMenu(productID, left, top) {
if ($("#Menu" + productID).html() == null) {
var strMenuHTML = "<div type=\"ContextMenu\" id=\"Menu" + productID + "\" class=\"contextMenuClass\" mouseonmenu=\"1\"><table style='width:100%;'><tr><td onclick=fnView()>View Product</td></tr><tr><td onclick=fnDelete()>Delete Product</td></tr></table></div>";
$("body").append(strMenuHTML);
$.post("MenuHandler.ashx", {}, function (response) {
$("#Menu" + productID).html(response);
});
}
$("#Menu" + productID).css({ top: top + "px", left: left + "px" }).show();
}
$(document).ready(function () {
$("#gvProducts tr.ShowContext").setEvents();
}
);
$(document).click(function (e) {
$clicked = $(e.target);
if (!($clicked.parents().hasClass("ShowContext") || $clicked.hasClass("contextMenuClass") || $clicked.parents().hasClass("contextMenuClass"))) {
$("div").filter("[type=ContextMenu]").hide();
}
});
use jQuery's live function to bind an event inside updatepanel
or
go through this link
http://stackoverflow.com/questions/256195/jquery-document-ready-and-updatepanels
I would like to toggle my table row on an .change function in jquery. The desired row is being displayed in this code, how do I hide the other rows at the same time?
$(document).ready(function() {
$('#ddlSelect').change(function() {
var ddlId = $('#ddlSelect').val();
alert(ddlId);
//$('#displayTable').hide();
$('#' + ddlId).show();
});
});
Does this work?
$(document).ready(function() {
$('#ddlSelect').change(function() {
var ddlId = $('#ddlSelect').val();
$('#displayTable tr').each( function() {
$(this).hide();
});
$('#' + ddlId).show();
});
});