I have a CheckBoxList and my requirement is to allow user to select maximum three options(through Javascript) and as soon as he clicks on the fourth one the first selected CheckBox gets unchecked, similarly when he selects the fifth (another) one, the CheckBox which was selected second, gets unchecked and so on. Eventually user is left with only three selected options.
Eg. In the given image if user selects .Net(first),Java(second),PHP(third) and when he selects SQL(fourth), .Net gets unchecked and SQL gets checked. Further when he selects Cloud Computing(fifth), Java gets unchecked.
I have written the following Javascript which works fine for the first scenario and un- checks the first selected item when fourth one is selected but it doesn't work further because counter value again reaches to 4 and cbArray[counter - 4] again tries to uncheck the first box instead of second. How to resolve this problem. Thanks.
My Javascript:
<script type="text/javascript" language="javascript">
function limitChecked(maxCount) {
debugger;
var ocbList = document.getElementById('cbList');
var cbArray = ocbList.getElementsByTagName('input');
var counter = 0;
for (var i = 0; i < cbArray.length; i++) {
if (cbArray[i].checked==true) {
counter++;
if (counter > maxCount) {
cbArray[counter - 4].checked = false;
}
}
}
}
</script>
.aspx code:
<body>
<form id="form1" runat="server">
<div>
Courses:
<asp:CheckBoxList ID="cbList" runat="server" onclick="limitChecked(3)">
<asp:ListItem>.Net</asp:ListItem>
<asp:ListItem>Java</asp:ListItem>
<asp:ListItem>PHP</asp:ListItem>
<asp:ListItem>SQL</asp:ListItem>
<asp:ListItem>Cloud Computing</asp:ListItem>
</asp:CheckBoxList>
</div>
</form>
</body>
As per Trendy's suggestion (McGarnagle's answer also helped) I've come up with this solution, which is working fine for me.
function limitChecked(maxCount) {
debugger;
var ocbList = document.getElementById('cbList');
var cbArray = ocbList.getElementsByTagName('input');
var checkedArray = [];
for (var i = 0; i < cbArray.length; i++) {
if (cbArray[i].checked == true) {
checkedArray.push(i);
if (checkedArray.length > maxCount) {
checkedArray = checkedArray.slice(0);
cbArray[checkedArray[0]].checked = false;
}
}
}
}
You could use push/pop instead of the counter. Using slice(0) allows you to use an array like a FIFO queue:
function limitChecked(maxCount) {
debugger;
var ocbList = document.getElementById('cbList');
var cbArray = ocbList.getElementsByTagName('input');
var checked = [];
for (var i = 0; i < cbArray.length; i++) {
if (cbArray[i].checked==true) {
checked.push(i);
if (checked.length > maxCount) {
cbArray[checked[0]].checked = false;
checked = checked.slice(1);
}
}
}
}
Related
I have two visible one hidden dropdown and filter textbox works perfectly except checking flag if option already in selected list part, idea is you filter from hidden and see in visible dropdownlist, then select from visible and that goes to selected list. this part works until I added second for loop and flags which controls if option already in selected list then skip on filter and doesn't show in visible list which doesn't work.
If I delete between "FROM" to "HERE" comments works, but also shows selecteds in visible list.
problem : frozen browser and visible list full of options like infinite.
function SearchList() {
var listHidden = document.getElementById('<%= ddlStudentHidden.ClientID %>');
var listVisible = document.getElementById('<%= ddlStudents.ClientID %>');
var listSelected = document.getElementById('<%= ddlSelecteds.ClientID %>');
var txtFind = document.getElementById('<%= txtFind.ClientID %>');
$("#<%= ddlStudents.ClientID %>").find('option').remove();
for (var i = 0; i < listHidden.options.length; i++) {
if (listHidden.options[i].text.toLowerCase().match(txtFind.value.toLowerCase())) {
/*FROM*/
var flag = false;
for (var i = 0; i < listSelected.options.length; i++) {
if (!listSelected.options[i].text.toLowerCase().match(txtFind.value.toLowerCase())) {
flag = true;
}
}
if (!flag) /*HERE*/
$("#<%= ddlStudents.ClientID %>").append($('<option></option>').val(listHidden.options[i].value).html(listHidden.options[i].text));
}
}
}
Yo declare the variable i again in the inner loop which will override the the i in the outer loop. Rename the variable in the inner loop to something else except i.
I have two listboxs, and two buttons. The buttons will transfer 1 item from listbox1 to listbox2.
$(function () {
$("#btnLeft").bind("click", function () {
var options = $("[id*=listBoxRight] option:selected");
for (var i = 0; i < options.length; i++) {
var opt = $(options[i]).clone();
$(options[i]).remove();
$("[id*=listBoxLeft]").append(opt);
return false;
}
});
$("#btnRight").bind("click", function () {
var options = $("[id*=listBoxLeft] option:selected");
for (var i = 0; i < options.length; i++) {
var opt = $(options[i]).clone();
$(options[i]).remove();
$("[id*=listBoxRight]").append(opt);
return false;
}
});
});
This code is working and is transferring items from one another in the client side. My problem is when I get the value at the server side, I get 0 count.
Is it possible to bind the new items of listbox2 using jQuery?
EDIT
I am using a user control:
The control is ShutterUserControl , and it contains two listboxs.
Make your listbox runat server.
<select id="listboxRight" runat="server">
<option>text1</option>
<option>text2</option>
</select>
Then use following thing with Request.form. For that in your above JavaScript you need to use ClientID like <%=listBoxRight.ClientID%>.
Then you find that user control via two way one is with Request.Form
Request.Form["YourUserControlName$listboxRight"]
Another is
var listBox = YourUserControlName.FindControl("listboxRight");
Hope this will help.
try Request.Forms["controlName"] to get the new values in the dropdown list.
i have a grid which display data from database, and i have a custom column in the left side with checkbox, i choose records to be deleted and i have a dropdown list, which will trigger an event in server side to delete records, before i delete those records i want to show a confirmation dialog like "are you sure? with ok and cancel", how to do that? any thought?
i do this :
if(ddlAction.SelectedValue == "Delete")
{
string id = string.Empty;
int i = 0;
List<int> idx = new List<int>();
foreach (GridViewRow rowitem in gvDept.Rows)
{
CheckBox itemchk = (CheckBox)rowitem.FindControl("cbSelectOne");
if (itemchk != null & itemchk.Checked)
{
id += rowitem.Cells[3].Text.ToString() + ',';
idx.Add(i);
}
i = i + 1;
}
id = id.Trim(",".ToCharArray());
List<string> objRemoveKeys = id.Split(',').ToList();
if (objRemoveKeys.Count > 0)
{
ddlAction.Attributes.Add("OnChange", "javascript:return confirmDeletion('Are you sure you would like to remove the selected items?');"); // this part not working.
AirAsiaLinqDataContext LinqDataCtx = new AirAsiaLinqDataContext();
var record = from a in LinqDataCtx.departements
where objRemoveKeys.Contains(a.departementcode)
select a;
LinqDataCtx.departements.DeleteAllOnSubmit(record);
LinqDataCtx.SubmitChanges();
for (int j = 0; j < idx.Count; j++)
{
gvDept.DeleteRow(idx[j]);
}
}
ddlAction.SelectedValue = "";
}
This looks like code-behind (C#) code. Dialogs happen on the client side. You can do this relatively easily with jQuery (or even vanilla JavaScript code), or use something like the Ajax Control Toolkit's ConfirmButton:
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ConfirmButton/ConfirmButton.aspx
For a little more control over the process you can also give JuiceUI a go: http://juiceui.com/controls/dialog
try this
ddlAction.Attributes.Add("onchange", "return confirm('Are you sure you would like to remove the selected items?');");
you should not only show an alert for confirmation but also check if the user has selected some row or not. below code accomplishes both.
javascript function:
function checkIfSelected() {
if (yourGrid.GetSelectedRowCount() == 0) {
alert("You must select atleast one.");
return false;
}
else {
if (confirm("Are you sure you want to proceed?")) { // This is what you want
}
else {
return false;
}
}
}
your dropdownlist:
<asp:DropDownList ID="ddlAction" onChange="javascript:if( checkIfSelected() == false){return false};" AutoPostBack="true" runat="server" OnSelectedIndexChanged="yourID_SelectedIndexChanged">
I have masterpage with content place holder. i have contentpage which is using master page . in all my content page i need to default focus on the text box so that the user can directly type in text box instead moving the mouse over the textbox. in some page there is no text box so that i donnot nnet keep default focus over there
Is there any way i can do it in my master page once and can reuse that in all my content page
thank you
try using this...
((TextBox)Master.FindControl("txtRequiredFocus")).Focus();
You could include this in your master page's load event:
// if the ID is constant you can use this:
/*TextBox textBox = (TextBox)Page.Controls[0]
.FindControl("ContentPlaceHolder1")
.FindControl("myTextBox");
*/
// this will look for the 1st textbox without hardcoding the ID
TextBox textBox = (TextBox)Page.Controls[0]
.FindControl("ContentPlaceHolder1")
.Controls.OfType<TextBox>()
.FirstOrDefault();
if (textBox != null)
{
textBox.Focus();
}
This would match up with a content page that has the following markup:
<asp:Content ID="Content" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:TextBox ID="myTextBox" runat="server" />
</asp:Content>
EDIT: if LINQ isn't an option then you can use this instead:
foreach (Control control in Page.Controls[0].FindControl("ContentPlaceHolder1").Controls)
{
if (control is TextBox)
{
((TextBox)control).Focus();
break;
}
}
Indiscriminate JavaScript approach to selecting the first valid input field on a page:
function SelectFirstInput() {
var bFound = false;
for (f = 0; f < document.forms.length; f++) {
// for each element in each form
for (i = 0; i < document.forms[f].length; i++) {
// if it's not a hidden element
if (document.forms[f][i].type != "hidden") {
// and it's not disabled
if (document.forms[f][i].disabled != true) {
// set the focus to it
document.forms[f][i].focus();
var bFound = true;
}
}
// if found in this element, stop looking
if (bFound == true)
break;
}
// if found in this form, stop looking
if (bFound == true)
break;
}
}
<script language="javascript" type="text/javascript" >
window.onload=function(){
var t= document.getElementById('<%=TextBox1.clientID %>');
t.focus();
}
</script>
If you use jQuery, a possible solution is:
Give the textbox you want to set focus to a special class. "focus" works well for this purpose.
Write code such as the following in your master page or included by your master page in a js script file:
$(document).ready
(
function()
{
//get an array of DOM elements matching the input.focus selector
var focusElements = $("input.focus").get();
//if a focus element exists
if(focusElements.length > 0)
{
focusElements[0].focus();
}
}
);
A similar approach using vanilla JavaScript would be to tag the textbox with a special attribute. Let's use focus.
window.onload = function()
{
//get all input elements
var inputElements = document.getElementsByTagName("input");
var elementToFocus = null;
for(var i = 0; i < inputElements.length; ++i)
{
var focusAttribute = inputElements[i].getAttribute("focus");
if(focusAttribute)
{
elementToFocus = inputElements[i];
break;
}
}
if(elementToFocus)
{
elementToFocus.focus();
}
};
Control masterC =
Page.Master.FindControl("ContentPlaceHolder1");
TextBox TextBox1 =
masterC.FindControl("TextBoxUsername") as TextBox;
TextBox1.Focus();
The treeview has leaf node checkboxes.I need to validate the treeview
if atleast one of the node is checked and not more than a specfic(say 3 nodes) number of nodes a user can select.
Note:The Treeview is a asp.net treeview(not an ajax treeview)
Alright, since you didn't mentioned what type of validation you want, I'll do both client side and server side. My TreeView is named tvTest
First, add a CustomValidator to you Asp.Net page:
<asp:CustomValidator ID="CustomValidator1" runat="server" ClientValidationFunction="ClientValidate"
ErrorMessage="CustomValidator" Display="Dynamic" OnServerValidate="CustomValidator1_ServerValidate">*</asp:CustomValidator>
Note: don't set the ControlToValidate property.
Next, add this script (also to your Asp.Net page) for client side validation:
<script type="text/javascript">
function ClientValidate(source, arguments) {
var treeView = document.getElementById("<%= tvTest.ClientID %>");
var checkBoxes = treeView.getElementsByTagName("input");
var checkedCount = 0;
for (var i = 0; i < checkBoxes.length; i++) {
if (checkBoxes[i].checked) {
checkedCount++;
}
}
if (checkedCount > 0 && checkedCount < 4) {
arguments.IsValid = true;
} else {
arguments.IsValid = false;
}
}
</script>
And last, add this to your code-behind for server side validation:
protected void CustomValidator1_ServerValidate(object source, System.Web.UI.WebControls.ServerValidateEventArgs args) {
if (tvTest.CheckedNodes.Count > 0 && tvTest.CheckedNodes.Count < 4) {
args.IsValid = true;
} else {
args.IsValid = false;
}
}
Of course, you'll want to change the limits for the minimum and maximum number of nodes the user can check.