I have written a javascript method to sortlistbox items and it works well in a sense that the item that I type in text box gets highlighted.
But when I click on the highlighted item it dosen't gets selected. Why?
The selectedIndexchanged is not working.
Here is my javascript code:
function SearchList() {
var l = document.getElementById("<%= LBox.ClientID %>");
var tb = document.getElementById("<%= txtDepartments.ClientID %>");
if (tb.value == "") {
ClearSelection(l);
}
else {
for (var i = 0; i < l.options.length; i++) {
if (l.options[i].value.toLowerCase().match(tb.value.toLowerCase())) {
l.options[i].selected = true;
return false;
}
else {
ClearSelection(l);
}
}
}
}
function ClearSelection(l) {
l.selectedIndex = -1;
}
Do this, then call your function inside, you need to reference jquery library :
$(document).ready(function() {
$('#' + '<%= DropdownName.ClientID %>').change(function() {
// Call function here...
});
});
Related
Hi I have a gridview wherein I have added textbox dynamically as shown in the code below:
protected void getDateControls()
{
foreach (GridViewRow grow in gdView.Rows)
{
for (int i = 7; i <= gdView.HeaderRow.Cells.Count - 1; i++)
{
string txtName = gdView.HeaderRow.Cells[i].Text;
System.Web.UI.WebControls.TextBox txt = new System.Web.UI.WebControls.TextBox();
txt.ID = txtName;
txt.Width = 25;
txt.Font.Size = 9;
txt.Style.Add("text-align", "Center");
txt.BackColor = Color.Black;
txt.ForeColor = Color.White;
txt.BorderStyle = System.Web.UI.WebControls.BorderStyle.None;
txt.AutoPostBack = true;
txt.TextChanged += new System.EventHandler(this.txtName_Changed);
grow.Cells[i].Controls.Add(txt);
}
}
}
Now I have to get the row index when any of these textbox gets focus. Can anyone help me complete the following code. I want to take the row index in a textbox(TextBox1) which is added to the page during design time.
<script type="text/javascript">
$(document).ready(function() {
$(document).on("focus", "input[id*='txtName']", function() {
////help required to get the row index....
});
});
</script>
I am not sure whether this is the right approach.
Thanking you all in anticipation.
You can do this by adding an attribute to the TextBox and getting it in the javascript function. So first change the foreach in order to add the row number.
int rowNumber = 0;
foreach (GridViewRow grow in GridView1.Rows)
{
for (int i = 7; i <= GridView1.HeaderRow.Cells.Count - 1; i++)
{
//rest of code
txt.Attributes.Add("rowNumber", rowNumber.ToString());
}
rowNumber++;
}
And then the javascript function. You may need to adjust it to your exact specifications.
<script type="text/javascript">
$(document).ready(function () {
$('#<%= GridView1.ClientID %> input[type="text"]').focus(function () {
var rowNumber = $(this).attr("rowNumber");
alert(rowNumber);
});
});
</script>
Okay, as simple as possible, I have a checkboxlist that has autopostback set to true and a OnSelectedIndexChanged. However, every time someone clicks a item in the checkbox, the page refreshes. How do I stop this? I've tried using UpdatedPanel(It kind of work).
<asp:CheckBoxList ID="Regions" runat="server" OnSelectedIndexChanged="Regions_SelectedIndexChanged" AutoPostBack="true" DataSourceID="SqlDataSource2" DataTextField="Regions" DataValueField="ID">
</asp:CheckBoxList>
The OnselectedIndexChange displays a div of other checkboxes beside the one checkboxlist.
protected void Regions_SelectedIndexChanged(object sender, EventArgs e)
{
string select = #"Select Facilities from [BulletinBoard].[DMHSAS\290974].[Facilities] ";
int[] ctr = new int[9];
int ctr1 = 0;
int counter = 0;
dFacilities.Style.Add("display", "block");
foreach (ListItem item in Regions.Items)
{
//Response.Write(item.Selected);
if (Regions.SelectedIndex == 0)
{
item.Selected = true;
CheckBoxList1.Visible = true;
counter++;
}
else if (item.Selected)
{
if (select.EndsWith("[Facilities] "))
{
select += "where ";
}
if (select.EndsWith(") "))
{
select += " or ";
}
select += " (Reg_ID = " + Regions.SelectedIndex + ") ";
ctr[ctr1 + 1] = Regions.SelectedIndex;
item.Selected = false;
counter++;
CheckBoxList1.Visible = true;
}
ctr1++;
}
if (counter == 0)
{
CheckBoxList1.Visible = false;
dFacilities.Style.Add("display", "none");
}
ctr1 = 0;
bool all = false;
foreach (int counter1 in ctr)
{
Regions.Items[counter1].Selected = true;
if (Regions.Items[0].Selected == true)
foreach (ListItem item in Regions.Items)
{
if (item.Selected)
{
all = true;
}
else
{
all = false;
break;
}
}
if (all == false)
{
Regions.Items[0].Selected = false;
}
}
You seem to really like the classic .NET postback workflow, but rather than continue down the webforms path of trying to hide postbacks, even though you want them because it makes the logic easier, why not just try sidestepping it just this one time? If, as you say, you want to prevent the page refresh (aka the postback) then there are a few things you can do to prevent it entirely.
At the top of your page:
<style type="text/css">
.hideme
{
display: none;
}
</style>
<script type="text/javascript>
var checkBoxes = document.getElementById("<%= Regions.ClientID %>")
.getElementsByTagName("input");
var cbListIDss = [
"<%= CheckBoxList1.ClientID %>",
"etc"
];
function toggle(i, chkElement)
{
if (chkElement.type == "checkbox") {
if (chkElement.checked) {
var cbElement = document.getElementById(cbListIDss [i]);
cbElement.className = cbElement.className.replace("hideme", "");
break;
}
}
}
for (var i = 0; i < checkBoxes.length; i++) {
checkBoxes[i].onClick += toggle(i, checkBoxes[i]);
}
</script>
Edit: Then, in your control, remove these attributes: OnSelectedIndexChanged="Regions_SelectedIndexChanged" AutoPostBack="true"
I didn't add the code for modifying the select variable in your postback method, but that can be done in js as well via a hidden input field.
Alternatively, the reason your update panel is not working is because you have
if (Regions.SelectedIndex == 1)
{
select += " where Reg_ID = 1";
dFacilities.Style.Add("display", "block");
// note the number at the end of this variable
CheckBoxList1.Style.Add("display", "block");
}
if (Regions.SelectedIndex == 2)
{
select += "where Reg_ID = 2";
dFacilities.Style.Add("display", "block");
// note the number at the end of this variable
// All of these are adding display to CheckBoxList1,
// even though it seems like these should be adding
// the display property to CheckBoxList2, 3, etc.
CheckBoxList1.Style.Add("display", "block");
}
I have one asp.net form.
In it i have many fields which are required.
I want to display validation summary of all fields at the end of the form.
I have already checked for valid values of input controls.
Now i only want is Summary.
Here is my code for valid data input
<script language="javascript" type="text/javascript">
function userCheck(uName) {
var uName = document.getElementById(uName);
var letters = /^[A-Za-z0-9]+$/;
if (uName.value.match(letters) && uName.value.length != 0) {
uName.style.border = "2px solid #008A2E";
return true;
}
else {
uName.value = uName.value.replace(/[\W]/g, '');
uName.style.border = "2px solid #ff0000";
uName.focus();
return false;
}
}
</script>
This is just one function for username check.
I have many more to deal with.
Is there any way to display summary from all fields at the last when submit button is pressed ?
below solution is not working.
function ddlcheck(ddlclg) {
var clg = document.getElementById(ddlclg.id);
var clgname = document.getElementById('<%= LblCollegeName.ClientID %>');
clgname.style.display = "block";
clgname.innerHTML = "Selected College : " + clg.options[clg.selectedIndex].value;
clg.style.border = "1px solid #008A2E";
if (clg.options[clg.selectedIndex].value == "Select") {
clgname.style.display = "none";
clg.style.border = "1px solid #ff0000";
validationhtml = validationhtml + "<b>*</b> College" + "</br>";
}
}
above code is for dropdownlist.
function select() {
var count = 0;
var chkSelectAll = document.getElementById('<%= ChkSelectAll.ClientID %>');
var chkList = document.getElementById('<%= chk.ClientID %>').getElementsByTagName("input");
for (var i = 0; i < chkList.length; i++) {
if (chkList[i].checked == true) {
count++;
}
}
if (count == chkList.length)
chkSelectAll.checked = true;
else {
chkSelectAll.checked = false;
}
}
above code is for selected check boxes.
create a div ( errorreport) at required location validation summary give it style as you needed
After that
<script language="javascript" type="text/javascript">
var validationhtml="";
function userCheck(uName) {
var uName = document.getElementById(uName);
var letters = /^[A-Za-z0-9]+$/;
if (uName.value.match(letters) && uName.value.length != 0) {
uName.style.border = "2px solid #008A2E";
return true;
} else {
uName.value = uName.value.replace(/[\W]/g, '');
uName.style.border = "2px solid #ff0000";
uName.focus();
validationhtml=validationhtml +"uname is not correct" ;
return false;
}
}
function validationsummary() {
// if using jquery
$(".errorreport").html(validationhtml);
//for javascript
document.getelementbyid("errorreport").innerHTML = validationhtml;
if(validationhtml == "") {
return true;
} else {
return false;
}
}
</script>
and call validationsummary() on submit button click
How can I highlight the text of a query in the gridview control?
if you want do this client side please follow this steps:
add jQuery reference to your page.add a text input calles txt_Search.
and then use this script:
$(document).ready(function () {
$('#txt_Search').keyup(function () {
searchTable($(this).val());
});
function searchTable(inputVal) {
var table = $('#GridView1');
table.find('tr').each(function (index, row) {
var allCells = $(row).find('td');
if (allCells.length > 0) {
var found = false;
allCells.each(
function (index, td) {
var regExp = new RegExp(inputVal, 'i');
if (regExp.test($(td).text())) {
found = true;
return false;
}});
if (found == true) $(row).show(); else $(row).hide();
}
});
}
});
var gv = document.getElementById("#GridView1");
for (var i = 0; i < gv.all.length; i++) {
var cellValue = grid.rows[i].cells[0].elements[0];
cellValuestyle.background = '#DD00DD';
}
search the text, dress them with a tag like <label>, and don't forget to add highlight style for the labels.
When CheckBox is unchecked in a ListView i need to get a popup window?
I have make a JS function and just pass id of your list like as
OnClientClick="return GetSelectedCheckBoxInGrid('grdCustomer');"
function GetSelectedCheckBoxInGrid(obj)
{
var con = 'ctl00_ContentPlaceHolder1_' + obj
var Parent = document.getElementById(con);
var TargetChildControl = "chk";
if (Parent==null)
{
return false;
}
var items = Parent.getElementsByTagName("input");
for(var n = 0; n < items.length; ++n)
if(items[n].type == 'checkbox' &&
items[n].id.indexOf(TargetChildControl,0) >= 0 &&
items[n].checked == false)
alert('Hi');return false;)
}
I think this is that
Not too sure about this, but hypothetically, you could give each checkbox a class, eg chkbox, and then have some jquery code to handle a click event:
$('chkbox').click(function() {
alert("here is where you put your popup code");
});
You could use window.open here
$('chkbox').click(function() {
if (! $('#chkbox').is(':checked'))
{
window.open ("http://www.javascript-coder.com","mywindow","status=1");
}
});
or
$('chkbox').click(function() {
if(! $('#chkbox').attr('checked'))
{
window.open ("http://www.javascript-coder.com","mywindow","status=1");
}
});
How to check whether a checkbox is checked in jQuery?