We Keep Coding

Textbox.text always returns empty string in code behind c#

Well, I'm trying to do a simple command: get the text from TextBox. I've searched for that, but every answer failed for me.
In my code aspx:
<form id="form1" runat="server" method="post">
<div class="form">
<div class="form-search ngen-search-form">
<span id="search-trigger" class="form-search-submit">
<img src="Imagens/Lupa_Icon 2.png" id="lupa"/>
</span>
<asp:TextBox ID="txtBoxSearch" runat="server" CssClass="form-search-input" placeholder="Pesquise..." ViewStateMode="Enabled"/>
</div>
</div>
</form>
I have a Javascript function that verifies what key my client pressed:
$(document).keypress(function(e) {
if(e.which == 13){
if( document.getElementById("txtBoxSearch").value == "" ) return true;
else {
<% setSearch(); %>
document.getElementById("testeArv").innerHTML='<%=search.ToString()%>';
return false;
}
}// First if
});
And finally, my function setSearch() in code behind is:
public void setSearch( )
{
if( !Page.IsPostBack ) {
search = txtBoxSearch.Text;
}
}

Main mistake is about how to call codebehind method in jQuery. Take a look here
to know how to do it. Summary: you need ajax
Then you will have to keep in mind that it does Page.IsPostBack.
With !Page.IsPostBack you are saying "first page access" but when you press the button !Page.IsPostBack will be false. If you try the same example so:
public void setSearch( )
{
if(!Page.IsPostBack) {
// First page access
search = txtBoxSearch.Text;
} else {
// The page has been reloaded
search = txtBoxSearch.Text;
}
}
It will work. (The else will run)
I am not sure but I have tried it (without jQuery) with a button and the same error occurs. You want to run the function when the Enter is pressed so the page will do the reload. Take a look here.
Maybe it helps you in some way.

It's the <form> tag blocking your way to get the value in post back. Remove the <form> tag and use AutoPostBack=true for your text box. You won't need to use jQuery to catch the event and the value.

You can't call code behind code from client-side code. They execute on different machines.

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

How to bind jQuery event when ASP.NET MVC renders Model

I have following HTML code under Requisition.cshtml
foreach (var item in Model.RequisitionWorks)
{
<tr>
<td><div class="radio"><label name="#string.Format("Option_{0}", item.OptionNumber)">#item.OptionNumber</label></div></td>
<td>
<div class="radio">
<label>#Html.RadioButton(string.Format("Option_{0}", #item.OptionNumber),
"0", #item.IsOptionChecked("0"), new { #class = "OptionClass", id = string.Format("Option_None_{0}", #item.ToothNumber) }) #MyModelEntities.Properties.Resource.None
</label>
</div>
</td>
And I generate lots of radiobuttons...
So I would like to bind some jQuery event at the moment of rendering that code.
$("#Option_None_" + optionNumber).change(function () {
});
I need it because I generate id of html tag on fly.
Is it possible to do?

Why not apply using the class of the option instead of an id?
$(document).ready(function(){
$(".OptionClass").change(function () {
});
});

You can do this by using the .on jquery method (http://api.jquery.com/on/). To accomplish this you would select your containing div and then set the onchange for the inputs within it.
$('div.radio').on('change', 'input', function() {});
Edit: it's a lot easier to do what you want to if you give the radio buttons a common class and use the above method. Generally it's not necessary use something unique like the id to attach the same event handler to each one.

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 );
});