We Keep Coding

how to force asp.net listbox to hold the selected values after confirmation box's cancel event?

I have below asp.net Listbox which has been decorated with sumoselect.
After selecting an item in dropdown if user deselects the item (none of the item is selected) then user will be prompted a javascript confirmation box and if user clicks on Cancel button of that, then dropdown will continue to hold the values.
Below is my code.
<td class="ievent" style="width:22%; padding-bottom:10px; padding-right:30px;padding-left:10px;">
<asp:ListBox ID="ListBoxSol" runat="server" SelectionMode="Multiple" CssClass="textbox" Height="22px" Font-Size="Small" Width="230px">
</asp:ListBox>
</td>
if (lastselectedItemIndex == -1) {
var dropselvalue = sessionStorage.getItem("items");
var ans = confirm("If all Internal Solution are de-selected than Solution Revenue value will be saved as 0. Do you want to de-select all?");
if (ans == true) {
$('#LabelSolRev').hide();
$('#TextBoxSolRev').hide();
}
else {
event.preventDefault();
//$("#ListBoxSol option").find('AI Solutions').attr("selected", true);
//$('#ListBoxSol option').(":checked");
$("#ListBoxSol option").each(function () {
if ($(this).html() == "AI Solutions") {
$(this).prop("selected", true);
//$(this).checked(true);
$(this).removeClass("opt");
$(this).addClass("selected opt");
$(this).trigger("click");
return false;
}
});
}
}
But in my case multiselect dropdown is unable to hold the values after deselect by using the code given. Can anyone please suggest how to handle this scenario?

If I have understood your question right, you want to select multiple options from asp:ListBox control and upon deselecting all of the options you want to keep their record so that you can re-select them in some case.
First, the asp:ListBox control is not selected like this: $("#ListBoxSol option").
As this control runs at the server, some additional information is prepended to it. This will result in its id becoming something like: #MainContent_ListBoxSol.
To select the asp:ListBox control you need to replace $("#ListBoxSol option") with $("#<%= ListBoxSol.ClientID %> option"). You can read more about selecting asp.net controls in jQuery here.
Secondly, to retain the selected values you can store them in an array, say 'values'.
var values = [];
$("#<%= ListBoxSol.ClientID %> option:selected").each(function (i, option) {
values[i] = option;
});
Later you can traverse the array and re-select the options.
$.each(values, function (index, option) {
$("#<%= ListBoxSol.ClientID %> option[value='" + option.value + "']").prop('selected', true);
});
Hope it helps.

How to filter data from dynamically generated list?

Currently I am working on one web application in asp.net.
Application received data from web-service in json format. Requirement is to develop controls dynamically, I did it using html controls. I dynamically created list of label & stored values in it. Now I want to add filter on the top of that list so that it can filter data based on vales entered in the textbox.
I want something like below textbox list of data like item1, item2 and so on, based on value entered in textbox. I need to filter data.
How I can achieve this?I tried to use list.js but it didn't work.
<% foreach (var item in (List<string>)Session["list"])
{
%>
<%--<li><label onclick="redirect('<%:item %>')"><%: item %></label><br/></li>--%>
<li><%:item %></li>
<% } %>

Add texbox with onkeyup event handler, set some id to ul e.g. id="list"
<input type="text" onkeyup="filter(this)" />
<ul id="list">
<li>a</li>
<li>abc</li>
<li>bcd</li>
<li>abc</li>
</ul>
Add the following script (source) and a reference to jquery
<script>
function filter(element) {
var value = $(element).val();
$("#list > li").each(function() {
if ($(this).text().search(value) > -1) {
$(this).show();
}
else {
$(this).hide();
}
});
}
</script>
Demo: http://jsbin.com/hahodetu/1/edit?html,output

Div elements on click fires for the first element only

I am listing my data in an ItemTemplate.Then inside the ItemTemplate, i have two div tags as follows:
<ItemTemplate>
<div id="contentdiv">
<h4 id="titleresult"><%# Server.HtmlEncode(Eval("Name").ToString())%></h4>
</div>
<div id="showclick" class=hideAll>
<p class="brief"><%# Server.HtmlEncode(Eval("LegalName").ToString())%></p>
<p class="brief"><%# Server.HtmlEncode(Eval("FirstName").ToString())%></p>
<p><%# Server.HtmlEncode(Eval("LastName").ToString())%></p>
</div>
</ItemTemplate>
Then i have the css to define the hideAll class so that when the page loads, the data in this div tag is hidden until the user clicks on the contentdiv link.
.hideAll { display:none }
.displayAll { display:block; top:0px}
Then finally i have the javascript part for firing the click event.
<script type="text/javascript">
function showResults(UserID) {
var contentdiv= document.getElementById('contentdiv');
var showclick = document.getElementById('showclick');
<%
long id =0;
DataAccess dataAccess = new DataAccess();
Data = dataAccess.GetCounterParty(id);
%>
var UserID = <%=dataAccess.GetCounterParty(id) %>
contentdiv.style.visibility = "visible";
$(showclick).removeClass('hideAll');
}
</script>
The UserID is the id of every element in the list. The problem is, the click affects only the first element no matter which other element i click on the list.

In html id is used to refer to one element.
If you use it multiple times the browser would default to the first element.
You should use a class selector. Something like:
$(".contentdiv").click(function(){
$(this).next().removeClass('hideAll');
});
Here is a working example. I used toggleClass though, it seems more appropriate to me.

An id is a unique identifier, you cannot have two or more things on the same page with the same identifier and expect things to work properly. Make your identifiers unique, and bind to the click event using a class selector instead.

you should use class instead of id, id are unique, which only exist in 1 page, class can exist in multple div
some idea for u
html
<div class="showclick hideAll">
script
$('.showclick').on('click', function(){
$(this).toggle(); //toggle to show or hide, can be any element u want to toggle instead of this
});

Update div tag without refresh the whole page using JavaScript

I am developing a customizable drop down lists using HTML and JQuery, this drop down lists are containing a hidden html div tag and input text element. If the user click on the input element the jquery code shows the hidden div tag and allow him to choose one of the list items which are embedded inside the hidden div tag. After the user chose his desire item a JavaScript code runs and reflect his chosen item to the text element. here is the html code:
<input type="text" readonly="true" class="reg-content-datacell-textfield" style="cursor:pointer;width:270px;float:left;display:inline-block" id="txtSector" name="txtSector" />
<br />
<div id="ddlSector" style="left:26px;" class="ddlist">
<ul>
<%
MainDatabaseOperationsClass.DatabaseOperations databaseOperations = new MainDatabaseOperationsClass.DatabaseOperations();//db connection class
string sqlStatement = "select * from Dbtsniper02.dbo.Sectors";//get all database sectors
System.Data.SqlClient.SqlDataReader sqlDataReader = databaseOperations.getDataFromDBAsSQLDataReader(sqlStatement);//execute sql statement
while (sqlDataReader.Read())
{
%>
<li class="ddlListSector"><% Response.Write("(" + sqlDataReader[0].ToString() + ") " + sqlDataReader[1].ToString()); %></li>
<%
}
%>
</ul>
JavaScript Code:
$(document).click(function (event) {
if ($(event.target).parents().index($('#ddlSector')) == -1) {
if ($('#ddlSector').is(":visible")) {
$('#ddlSector').slideToggle();
}};
$(document).ready(function () {
$("#txtSector).click(function (e) {
$("#ddlSector").slideToggle();
e.stopPropagation();
return false;
});
$("#ddlSector").click(function (e) {
//disallow hide the current drop down list when you click on it direcly
e.stopPropagation();
return false;
});
$(".ddlListSector").click(function (e) {
//relect you selection of the drop down list to the parent input text field
if ($('#ddlSector').is(":visible")) {
document.getElementById('txtSector').value = '';
document.getElementById('txtSector').value = $(this).html();
$('#ddlSector').slideToggle();
}
});});
Now, my question is if I've others drop down lists like the above one, how I can Update their items data according to the user choice from the above drop down list. I'm gonna do that via change the sql statement according to the value of the text element associated with the desired drop down list but I do not know how I can trigger the event for update only the div tag content if the user select one of the drop down list items
Thank you very much, I'm highly appreciate your cooperation

It sounds like you want to use an AJAX call inside the ddlListSector click event listener. Make a server file that will expect the value selected and return the list of values you want (probably using a sql command). The AJAX could return plain text, JSON, or even full markup depending on how involved you want the front end to be. In the success callback of the AJAX call, update the contents of whatever other drops you have. It looks like your already using jQuery, so I recommend their docs.

Finding ID with Multiple ASP UserControl using JavaScript

I have an ASP usercontrol name ListItem. Each ListItem has 2 ASP controls on it : a label lblIndex and a button btnAction
On my page, I load 10 ListItem into a panel and set lblIndex on each ListPanel an appropriate index.
ListItem 1 : lblIndex.value = '#1'
ListItem 2 : lblIndex.value = '#2'
...
ListItem 10 : lblIndex.value = '#10'
How do I write Javascript that, each time when I click the button on a ListItem, the appropriate lblIndex's value will appear(through an Alert()). I.e. when I click the btnAction on the 2nd ListItem, the text '#2' will come out.
Thank you

to facilitate your life, use jQuery when writing javascript.
in that in mind, let's assume that your ListItem control outputs a ul list with an id... make sure that you had a class, let's imagine that you named list-item so at the end you will have:
<div id="ListItem_1" class="list-item">
...
</div>
Now, you say you some sort of a button inside that list...
<div id="ListItem_1" class="list-item>
<input id="ListItem_1_Button_1" type="button" value="I'm a Button" />
</div>
Once again, explicit give that button a class name, for example: inside-button
I don't know how you have all texts, but I'll again assume that will be a hiiden field with the text to alert ...
some thing like:
<div id="ListItem_1" class="list-item>
<input id="ListItem_1_Button_1" type="button" value="I'm a Button" />
<input id="ListItem_1_Hidden_1" type="hidden" class="text" value="Text to run" />
</div>
and assuming you have 10 lists with several buttons you can simple write:
$(".inside-button").bind("click", function() {
// a button was clicked, let's do something
});
that 1st line says: "Foreach DOM element that has a class name of inside-button attach the click event"
and inside you fire what you want to do
From your question, you only want to perform something on that list:
$(this) // that will be the .inside-button element, so the Button
.closest(".list-item") // get me the closest DOM element with a class name of "list-item"
.find(".text") // find the DOM elemnt with the class name "text"
.val(); // let's see what value that element has
then you can alert() it.
All together:
$(".inside-button").bind("click", function() {
// a button was clicked, let's do something
var txt = $(this).closest(".list-item").find("text").val();
alert( txt );
});