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.
Related
I've dynamically bonded select list and when I hit save button then I'm getting value 0 not the selected one.
I'm Using HtmlSelect not Asp:Dropdownlist.
Can anybody help me.?
thanks in advance !!
If you are using html select.,
you use javascript function for change ddl and assign changed ddl value at one hidden field. send that hidden field value to server. Check below code.
function onchangeddl(e) {
var ddl = document.getElementById('ddlid')
for (var i = 0; i < ddl.options.length; i++) {
if (ddl.options[i].text == e.target.options[e.target.options.selectedIndex].text) {
ddl.selectedIndex = i;
ddl.options[i].selectedValue = e.target.options[e.target.options.selectedIndex].value;
ddl.options[i].selected = true;
document.getElementById('<%=hdnfld.ClientID%>').value = e.target.options[e.target.options.selectedIndex].text;
break;
}
}
}
Codebehind.aspx page you have to assign hdnfld value.
I hope its helpful to you.
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 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);
}
}
}
}
There is a problem to find a dynamic control on a page. The dynamic control is created every time when a user press a button. The button calls the following JavaScript function and create a new components.
<script type="text/javascript">
var uploadCount = 1;
function addFileInput(fName) {
var only_file_name = fName.replace(/^.*[\\\/]/, '');
var $div = $('<div />', {runat: 'server'});
var $cbox = $('<input />', { type: 'checkbox', id: 'attachement' + uploadCount, value: fName, checked: "true", runat: 'server'}).addClass;
var $label = $('<label />', { 'for': 'attachement' + uploadCount, text: only_file_name });
$div.append($cbox);
$div.append($label);
$('#newAttachment').append($div);
$("#uploadCountValue").prop("value", uploadCount);
uploadCount++;
}
</script>
newAttachment is DIV section on the page.
<div id="newAttachement" runat="server" />
The DIV section is situated inside section. The problem is when a user presses the button on the form I can't find the dynamic created components. The following code shows how I try to find the components:
for (int i = 1; i <= Convert.ToInt32(uploadCountValue.Value); i++)
{
if (RecursiveFind(newAttachement, "attachement" + i) != null)
{
... to do something
}
}
public Control RecursiveFind(Control ParentCntl, string NameToSearch)
{
if (ParentCntl.ID == NameToSearch)
return ParentCntl;
foreach (Control ChildCntl in ParentCntl.Controls)
{
Control ResultCntl = RecursiveFind(ChildCntl, NameToSearch);
if (ResultCntl != null)
return ResultCntl;
}
return null;
}
I have detected that Controls count value is always zero in spite of there are dynamic components there.
I would be happy to get any help from us. Thanks.
to find the controls created in the client-end you can't search them in the Page.Controls collection instead try to look for them in the Request.Form[] array
you are creating the dynamic controls in javascript? i.e. you are creating html elements in javascript. It won't matter even if you put a runat="server" attribute in there, because it is still at the client-end. That would not be a part of the viewstate bag, so not populated in the controls collection.
you need to change your logic. create dynamic control in code-behind on button postback.
I have a Telerik ListView that contains checkBox items.
So, I want in a button to Check all items and in another button to uncheck all the items in this radListView.
How can i do that?
Thanks in advance.
Here is the solution...
ToggleState.ON to check all and ToggleState.Off to Uncheck all.
for (int item = 0; item < AllowAccess_ListView.Items.Count; item++)
{
AllowAccess_ListView.Items[item].CheckState = Telerik.WinControls.Enumerations.ToggleState.On;
}
If you add a class to them you can write a simple jQuery/JS for it.
ex: If you add the class "foo" to your items you could use something like this,
Html-
<button id="checkAll">bla</button>
<button id="unCheckAll">bla</button>
-jQuery
Check:
$('#checkAll').click(function () {
$('.foo').each(function () {
$(this).prop('checked', true);
});
});
Uncheck:
$('#unCheckAll').click(function () {
$('.foo').each(function () {
$(this).prop('checked', false);
});
});