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.
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 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 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);
}
}
}
}
I have created a web page "Default.aspx" in which I have taken fields:
First Name, Last Name, Account Titling, Titling(radio button list), AccountNumber and AccountFormat
under the "Default.aspx" page, I have used a radio button list also, whose values are Yes and No. If I choose Yes, then the following fields visibility should set to false:
First Name, Last Name
If I choose "NO", then the following fields visibility should set to true:
Account Titling, Account number
For this, I have written the below Java Script code in "Default.aspx"
function EnableDisableTaxID() {
if (document.getElementById("<%=rdOpeningSubAccount.ClientID %>") != null) {
var openSubAccountList = document.getElementById('<%= rdOpeningSubAccount.ClientID %>');
var fbo1RadioList = document.getElementById('<%=fbo1RadioButtonList.ClientID %>').value;
var isOpenSubAccount;
if (openSubAccountList != null) {
var openSubAccount = openSubAccountList.getElementsByTagName("input");
for (var i = 0; i < openSubAccount.length; i++) {
if (openSubAccount[i].checked) {
isOpenSubAccount = openSubAccount[i].value;
alert("Print" + isOpenSubAccount);
}
}
}
alert(typeof(isOpenSubAccount));
if (isOpenSubAccount == 'true') {
FirstName.visible = true;
LastName.visible = false;
AccountTitling.visible = true;
lblFirstName.visible=false;
lblLastName.visible=false;
}
else if (isOpenSubAccount == 'false') {
AccountTitling.visible = true;
AccountNumber.visible = false;
lblAccountTitling.visible = true;
lblAccountNumber.visible = false;
}
}
}
However, I am getting the required value from the Radio button list, however, when I go to check if the selected value of the radiobuttonlist is true, then the code above does not work. I dont know what am I missing. I know that directly using the below code will not work:
if (isOpenSubAccount == 'true') {
FirstName.visible = true;
LastName.visible = false;
AccountTitling.visible = true;
lblFirstName.visible=false;
lblLastName.visible=false;
}
Please help as I m stuck here...
For Visible = false;
document.getElementById('FirstName').style.visibility="hidden";
For Visible = true;
document.getElementById('FirstName').style.visibility="visible";
To Enable:
document.getElementById('FirstName').disabled = false;
To Disable:
document.getElementById('FirstName').disabled = true;
Following can be done for
Non Visible
document.getElementById('id-name').style.display='none';
Visible
document.getElementById('id-name').style.display='block';
Disable
document.getElementById('id-name').setAttribute('disabled', 'disabled');
Enable
document.getElementById('id-name').removeAttribute('disabled');
No; document.getElementById will only get the element with the ID you specify (the HTML spec is quite clear that only one element on a page can have a specific ID).
Each radio button has a different ID attribute, but if you look at the HTML source of a page, you will see that all radio buttons in the list have the same NAME attribute. This is what you should use "the name of the radio button".
onclick="GetRadioButtonValue('<%= radiobuttonlist1.ClientID %>')"
function GetRadioButtonValue(id)
{
var radio = document.getElementsByName(id);
for (var j = 0; j < radio.length; j++)
{
if (radio[j].checked)
alert(radio[j].value);
}
}
I am using a treeview control. I am buliding the tree dynamically. sometimes the tree becomes larger and the down scroll bar is need to see the entire tree.
user can select a node from the tree. if one node is selected ,i change the color of the node from server side.
my problem is that if a user selected a node which is bottom in the tree(means, the user used the down scrollbar to see that node), after postback it shows the top of the tree.to see the selected node the user need to use the down scroll bar.
I need to show the selected node after postback. How can I do this?
I am using c# and asp.net
With help of jquery we can send the selected node id to the query string and on document.ready we can read back and highlight that node.
Have a look on the code:
Code behind onclick code:
public void TreeView1_OnClick(Object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(
Page,
Page.GetType(),
"HighlightSelectedNode",
"HighlightSelectedNode();",
true
);
}
and the javascript:
<script type="text/javascript" language="javascript">
function HighlightSelectedNode() {
var selectedNodeID = $('#<%= TreeView1.ClientID %>_SelectedNode').val();
if (selectedNodeID != "") {
document.location.href = "http://" + window.location.host
+ window.location.pathname
+ "?Node=" + selectedNodeID;
return false;
} else {
// alert("Not found");
}
}
// Highlight active node on pageload.
$(document).ready(function () {
var querystring = location.search.replace('?', '').split('&');
var queryObj = {};
for (var i = 0; i < querystring.length; i++) {
var name = querystring[i].split('=')[0];
var value = querystring[i].split('=')[1];
queryObj[name] = value;
}
var nodeID = queryObj["Node"];
$('#' + nodeID).css({ 'background-color': '#888'});
});
</script>
You can use update panel to work around this issue.