I have a bit of jQuery code that applies a phone number mask to a text field in a form:
<script type="text/javascript" src="../../../js/jquery.maskedinput.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.mask.definitions['~'] = '[+-]';
$('.phone').mask('(999) 999-9999');
});
</script>
It works just fine when the user first enters the form or if the use refreshes the page. However, there is a DropDownList that will allow users to select a different shipping address. This DropDownList has its AutoPostBack Property set to "true."
<tr id="trAddressBook" runat="server">
<th>Ship To:</th>
<td>
<asp:DropDownList ID="AddressBook" runat="server" Width="200px" DataTextField="Value" DataValueField="Key" AppendDataBoundItems="true" AutoPostBack="true">
<asp:ListItem Text="Billing Address" Value="0" />
<asp:ListItem Text="New Address" Value="-1" />
</asp:DropDownList>
</td>
</tr>
Whenever the user select an option from this DropDownList, the phone mask jQuery code no longer appears in the phone number textbox(es). I don't see any errors when I inspect the page in Google Chrome.
Is there someway to maintain the phone mask code regardless of whether the user uses the DropDownList or not?
Here is the Page_Load function from the code behind:
protected void Page_Load(object sender, EventArgs e)
{
// DETERMINE IF THE SHIPPING FORM MUST BE INITIALIZED
bool initShipAddress;
if (Page.IsPostBack)
{
// ON POSTBACK, WE ONLY INITIALIZE THE SHIPPING FORM IF THE ADDRESS SELECTION WAS CHANGED
initShipAddress = (Request.Form["__EVENTTARGET"] == AddressBook.UniqueID);
}
else
{
// ON FIRST VISIT, WE INITIALIZE SHIPPING FORM IF THE SHIPPING ADDRESS IS NOT THE BILLING
initShipAddress = (GetShippingAddressId() != _User.PrimaryAddress.Id);
}
if (initShipAddress) InitializeShippingAddress();
}
I may be wrong as it's been a long time since I worked with ASP.NET, but I believe you can simply change $(document).ready(function () { ... }); to $(window).load(function() { ... });
$(window).load(function () {
$.mask.definitions['~'] = '[+-]';
$('.phone').mask('(999) 999-9999');
});
Failing that, ASP.NET executes a function called pageLoad every time a page loads:
function pageLoad() {
$.mask.definitions['~'] = '[+-]';
$('.phone').mask('(999) 999-9999');
};
Related
My web form has 2 controls, drpBloodType and rbUnknownBloodType.
I need to disable the list whenever the button is checked.
I tried:
protected void rbUnknownBloodType_CheckedChanged(object sender, EventArgs e)
{
drpBloodType.Enabled = false;
}
and
<script>
$(function () {
$('#rbUnknownBloodType').change(function () {
if ($(this).is(':checked')) {
$('#drpBloodType').attr('disabled', 'disabled');
} else {
$('#drpBloodType').removeAttr('disabled');
}
});
});
</script>
but neither worked.
You need to assign change event handler to all radio-buttons in the same group as '#rbUnknownBloodType'. The change event on a radio-button does not fire when the radio-button becomes unchecked - the line
$('#drpBloodType').removeAttr('disabled');
in your code will never execute.
$(".test").change(function(){
console.log(this.value, this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="test" type="radio" name="test" value="1"/>
<input class="test" type="radio" name="test" value="2"/>
Hm, I looked at the picture in your question. Will a checkbox be better there?
If you have the following aspx markup you can do the following in code-behind. Note the usage of AutoPostBack="true" on the CheckBox.
<asp:DropDownList ID="BloodType" runat="server">
<asp:ListItem Text="Select..." Value=""></asp:ListItem>
<asp:ListItem Text="A+" Value="A+"></asp:ListItem>
<asp:ListItem Text="A-" Value="A-"></asp:ListItem>
<asp:ListItem Text="B+" Value="B+"></asp:ListItem>
<asp:ListItem Text="B-" Value="B-"></asp:ListItem>
<asp:ListItem Text="O+" Value="O+"></asp:ListItem>
<asp:ListItem Text="O-" Value="O-"></asp:ListItem>
<asp:ListItem Text="AB+" Value="AB+"></asp:ListItem>
<asp:ListItem Text="AB-" Value="AB-"></asp:ListItem>
</asp:DropDownList>
<asp:CheckBox ID="UnknownBloodType" OnCheckedChanged="UnknownBloodType_CheckedChanged"
runat="server" AutoPostBack="true" />
Code behind.
protected void UnknownBloodType_CheckedChanged(object sender, EventArgs e)
{
//set the dll to default
BloodType.SelectedValue = "";
//cast the sender back to a checkbox and disable the dll based on it's checked status
BloodType.Enabled = !((CheckBox)sender).Checked;
}
Or the jquery solution. This saves a PostBack, but it loses the disabled state after a PostBack. %= UnknownBloodType.ClientID %> only works on the aspx page itself. If you do not want to use it then look into ClientIdMode=Static
<script>
$(function () {
$('#<%= UnknownBloodType.ClientID %>').change(function () {
var dll = $('#<%= BloodType.ClientID %>');
if ($(this).is(':checked')) {
dll.val('');
dll.attr('disabled', 'disabled');
} else {
dll.removeAttr('disabled');
}
});
});
</script>
I have a asp Listbox Control as
<asp:ListBox ID="lstBox" runat="server" CssClass="listBox"></asp:ListBox>
I want to add a doubleclick event to the Listbox I want a popup. I have googled it and haven't found any of my requirement.
Is there any event that captures the DoubleClick event. If not any alternatives to achieve this.
By the way I want to do it everything on the server side and I'm doing it in WebForm
Well use a hidden input field here to indentify when ever the listbox was clicked:
<%# Page Language="C#" %>
<script runat="server">
void Page_Load(Object sender, EventArgs e){
if(Request.Params["ListBox1Hidden"] != null
&& (string)Request.Params["ListBox1Hidden"] == "doubleclicked") {
//This means It was double click
Response.Write("Double Click was fired selected item is "
+ ListBox1.SelectedItem.Text);
}
}
</script>
<html>
<head>
<title></title>
<script lang="javascript">
function ListBox1_DoubleClick() {
/* we will change value of this hidden field so
that in
page load event we can identify event.
*/
document.forms[0].ListBox1Hidden.value = "doubleclicked";
document.forms[0].submit();
}
</script>
</head>
<body>
<form id="Form1" runat="server">
<asp:ListBox id="ListBox1"
ondblclick="ListBox1_DoubleClick()" runat="server">
<asp:ListItem Value="1">One</asp:ListItem>
<asp:ListItem Value="2">Two</asp:ListItem>
<asp:ListItem Value="3">Three</asp:ListItem>
<asp:ListItem Value="4">Four</asp:ListItem>
</asp:ListBox>
<input type="hidden" name="ListBox1Hidden" />
</form>
You can add double click event on page load to listbox and can detect double click on page load as below code.
<asp:ListBox ID="lstitem" runat="server"></asp:ListBox>
page load
protected void Page_Load(object sender, EventArgs e)
{
if (Request["__EVENTARGUMENT"] != null && Request["__EVENTARGUMENT"] == "lstdbclick")
{
//your popup code here
}
lstitem.Attributes.Add("ondblclick", ClientScript.GetPostBackEventReference(lstitem, "lstdbclick"));
}
I have a telerik radcalandar control, it currently makes a post back which is fine but I want it to have a client function call too for getting onclientclick on selection changed.
I have tried with the below code snippet but not able to reproduce this issue.
JS
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script>
function DateSelected(sender, args) {
alert(args.get_renderDay()._date);
}
</script>
ASPX
<telerik:RadCalendar ID="RadCalendar1" runat="server" AutoPostBack="true" OnSelectionChanged="RadCalendar1_SelectionChanged">
<ClientEvents OnDateSelected="DateSelected" />
</telerik:RadCalendar>
<asp:Label ID="Label1" runat="server"></asp:Label>
ASPX.CS
protected void RadCalendar1_SelectionChanged(object sender, Telerik.Web.UI.Calendar.SelectedDatesEventArgs e)
{
Label1.Text = e.SelectedDates[e.SelectedDates.Count - 1].Date.ToString();
}
I have a GridView in ASP.NET/C# with a CheckBoxField, a BoundField and 2 ButtonFields. All 4 of them has a header to make clear where the column stands for. At the Page_Load event I set the ВataЫource of the GridView to my filled DataTable.
I want to make it easier to use for the user, and want to make a checkbox in the header. When that checkbox is checked by the user, all CheckBoxes should be checked in the GridView. I have set the HeaderText of the CheckBoxField to <input type='checkbox' />, and it shows a checkbox in the header now.
Now I want to add a function to that checkbox, that when it's checked, all CheckBoxes will be checked en vice versa. I tried to do it with jQuery, but it didn't work because I can't find a way to give all the CheckBoxes in the GridView the same ID or NAME.
Is there a event that occurs when I check the HTML based checkbox within the header? If yes, which event?
If no, how can i trigger a event when I check that checkbox, and change the GridView from my code-behind.
And if none of that is possible, how can i do it on another way, with javascript, jQuery or maybe with a ASP.net control.
I hope you can help me with this, but please don't expect i'm a code guru. I'm a intern at a company where the need a system, with this functionality.
Update:
Thank you everyone for helping me out. What is the easiest way to get the DataSource back into the DataTable, because i need to know which rows were selected and which were not?
Using jQuery, you get all the check boxes inside the GridView, and then for each one you change the status as you like. You call this javascript function from onclick of a link or a button, or what ever you like.
function CheckAll()
{
var updateButtons = jQuery('#<%=gvGridViewId.ClientID%> input[type=checkbox]');
updateButtons.each( function() {
// use this line to change the status if check to uncheck and vice versa
// or make it as you like with similar function
jQuery(this).attr("checked", !this.checked);
});
}
try this code according to you
in grid view
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="headerchkbox" runat="server" CssClass="chkheader" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBoxAssign" runat="server" CssClass="chkitems" />
</ItemTemplate>
</asp:TemplateField>
java script
<script type="text/javascript">
$(window).bind('load', function () {
var headerChk = $(".chkheader input");
var itemChk = $(".chkitems input");
headerChk.bind("click", function () { itemChk.each(function () { this.checked = headerChk[0].checked; })
});
itemChk.bind("click", function () { if ($(this).checked == false) headerChk[0].checked = false; });
});
</script>
Here is a sample I have put together for you.
ASPX
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var allCheckBoxSelector = '#<%=GridView1.ClientID%> input[id*="chkAll"]:checkbox';
var checkBoxSelector = '#<%=GridView1.ClientID%> input[id*="chkSelected"]:checkbox';
function ToggleCheckUncheckAllOptionAsNeeded() {
var totalCheckboxes = $(checkBoxSelector),
checkedCheckboxes = totalCheckboxes.filter(":checked"),
noCheckboxesAreChecked = (checkedCheckboxes.length === 0),
allCheckboxesAreChecked = (totalCheckboxes.length === checkedCheckboxes.length);
$(allCheckBoxSelector).attr('checked', allCheckboxesAreChecked);
}
$(document).ready(function () {
$(allCheckBoxSelector).live('click', function () {
$(checkBoxSelector).attr('checked', $(this).is(':checked'));
ToggleCheckUncheckAllOptionAsNeeded();
});
$(checkBoxSelector).live('click', ToggleCheckUncheckAllOptionAsNeeded);
ToggleCheckUncheckAllOptionAsNeeded();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="chkAll" runat="server" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkSelected" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
List<string> lstObjects = new List<string> { "aaa", "bbb" };
GridView1.DataSource = lstObjects;
GridView1.DataBind();
}
}
If you are using the latest version of jQuery (1.7)
Use the following:
<script type="text/javascript">
var allCheckBoxSelector = '#<%=GridView1.ClientID%> input[id*="chkAll"]:checkbox';
var checkBoxSelector = '#<%=GridView1.ClientID%> input[id*="chkSelected"]:checkbox';
function ToggleCheckUncheckAllOptionAsNeeded() {
var totalCheckboxes = $(checkBoxSelector),
checkedCheckboxes = totalCheckboxes.filter(":checked"),
noCheckboxesAreChecked = (checkedCheckboxes.length === 0),
allCheckboxesAreChecked = (totalCheckboxes.length === checkedCheckboxes.length);
$(allCheckBoxSelector).attr('checked', allCheckboxesAreChecked);
}
$(document).ready(function () {
$(allCheckBoxSelector).click(function () {
$(checkBoxSelector).attr('checked', $(this).is(':checked'));
ToggleCheckUncheckAllOptionAsNeeded();
});
$(checkBoxSelector).click(ToggleCheckUncheckAllOptionAsNeeded);
ToggleCheckUncheckAllOptionAsNeeded();
});
</script>
I have an asp page with some Textbox controls on it.
By default, the browser will suggest previously entered values for each box.
I'd like to prevent that behavior for some of the textboxes.
Is there a way to reliably do that across all major browsers?
I've tried setting
AutoCompleteType="Disabled"
But that seems to have no effect in Firefox.
Here is an image of the behavior I'm trying to prevent.
For firefox
Either:
<asp:TextBox id="Textbox1" runat="server" autocomplete="off"></asp:TextBox>
Or from the CodeBehind:
Textbox1.Attributes.Add("autocomplete", "off");
Autocomplete need to set off from textbox
<asp:TextBox ID="TextBox1" runat="server" autocomplete="off"></asp:TextBox>
By making AutoCompleteType="Disabled",
<asp:TextBox runat="server" ID="txt_userid" AutoCompleteType="Disabled"></asp:TextBox>
By setting autocomplete="off",
<asp:TextBox runat="server" ID="txt_userid" autocomplete="off"></asp:TextBox>
By Setting Form autocomplete="off",
<form id="form1" runat="server" autocomplete="off">
//your content
</form>
By using code in .cs page,
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
txt_userid.Attributes.Add("autocomplete", "off");
}
}
By Using Jquery
<head runat = "server" >
< title > < /title> < script src = "Scripts/jquery-1.6.4.min.js" > < /script> < script type = "text/javascript" >
$(document).ready(function()
{
$('#txt_userid').attr('autocomplete', 'off');
});
//document.getElementById("txt_userid").autocomplete = "off"
< /script>
and here is my textbox in ,
<asp:TextBox runat="server" ID="txt_userid" ></asp:TextBox>
By Setting textbox attribute in code,
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
txt_userid.Attributes.Add("autocomplete", "off");
}
}
This is the answer.
<asp:TextBox id="yourtextBoxname" runat="server" AutoCompleteType="Disabled"></asp:TextBox>
AutoCompleteType="Disabled"
If you still get the pre-filled boxes for example in the Firefox browser then its the browser's fault. You have to go
'Options' --> 'Security'(tab) --> Untick
'Remember password for sites and click on Saved Passwords button to delete any details that the browser has saved.
This should solve the problem
Trying from the CodeBehind:
Textbox1.Attributes.Add("autocomplete", "off");
Adding autocomplete="new-password" to the password field did the trick. Removed auto filling of both user name and password fields in Chrome.
<input type="password" name="whatever" autocomplete="new-password" />
Please note that for Chrome to work properly it needs to be autocomplete="false"
This works for me
<script type="text/javascript">
var c = document.getElementById("<%=TextBox1.ClientID %>");
c.select =
function (event, ui)
{ this.value = ""; return false; }
</script>