Handling RadioButtonList SelectedIndexChanged event in ajaxToolkit ModalPopupExtender without postback - javascript

In my form I am using a AjaxToolkit ModalPopupExtender. The PopupControlId has been set to a panel which has a RadioButtonList and a dropdownlist.The panel which pops up is something like this:
<asp:Panel ID="PopUpWindowPanel" runat="server" Visible="false" BorderStyle="Solid">
<table cellpadding="2" cellspacing="0" width="100%" border="0" class="dataTbl">
<tr>
<td class="left">
<asp:RadioButtonList ID="RdBtnLstSortOptions" runat="server">
<asp:ListItem Text="No change." Selected="True"
Value="None"></asp:ListItem>
<asp:ListItem Text="Some Change."
Value="Existing"></asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td class="left">
<asp:Label ID="lblList" runat="server">List:</asp:Label>
<asp:DropDownList ID="ddlList" runat="server" Visible="false">
</asp:DropDownList>
</td>
</tr>
<tr>
<td colspan="3">
<div class="divBtn">
<asp:LinkButton ID="btnDone" class="button" runat="server" OnClick="btnDone_Click">OK</asp:LinkButton>
<asp:LinkButton ID="btnCloseProfile" class="button" runat="server">Cancel</asp:LinkButton>
</div>
</td>
</tr>
</table>
</asp:Panel>
Now, What I want is that when user selects the Listitem with Text="Some Change." and Value="Existing", then and only then will dropdownlist with id="ddlList" must show, otherwise it must be hidden. I am populating this list on server-side at page load. AS this is ajaxcontrol i do not want any postbacks, therefore I am trying to handle this with javascript/jquery. I am a beginner with Javascript/Jquery so don't know how to do this properly. I have written some JQuery which is something like this:
function pageLoad()
{
$find('<%= RdBtnLstPresortOptions.ClientID %>').add_selectedIndexChanged(
function (sender, args) {
var selectedValue = $(this).val();
if ($.trim(selectedValue) == 'Existing') {
// show the dropdown list ddlList
}
else { //show the hide the dropdown list ddlList }
});
}
My question is how can I write this jquery/javascript properly so that I can show the dropdownlist upon the selected radio button option. Thanks.

This worked for me.
$("#<%=RdBtnLstPresortOptions.ClientID%>").change(function () {
var rbvalue = $("input[#name=<%=RdBtnLstPresortOptions.UniqueID%>]:radio:checked").val();
if (rbvalue == "Existing") {
$("#<%=ddlList.ClientID%>").css("display", "block");
$("#<%=lblList.ClientID%>").css("display", "block");
} else if (rbvalue == "None") {
$("#<%=ddlList.ClientID%>").css("display", "none");
$("#<%=lblList.ClientID%>").css("display", "none");
} else {
}
});

When you have server control with Visible=False, it not rendered on client at all, so you can not display it. What you can do, is to render it with Visible=true and style="display:none".
Then use:
$find('').add_selectedIndexChanged(
function (sender, args) {
var selectedValue = $(this).val();
if ($.trim(selectedValue) == 'Existing') {
$get('<%= ddlList.ClientID %>').style.display="block";
// show the dropdown list ddlList
}
else { //show the hide the dropdown list ddlList }
});

Related

Scroll to end of page after loading gridview

I have the following code at the end of my aspx page. When I click on the button below, the usercontrol loads a grid. The problem is that when that grid is loaded it's out of the viewed range, and the user has to scroll to the botton to view the displayed grid.
<asp:UpdatePanel runat="server">
<ContentTemplate>
<div style="border: thin; border-style: double">
<asp:Panel ID="PnlRequired" runat="server" DefaultButton="BntOpenGridView_Click">
<table style="width: 100%">
<tr width="100%">
<td>
<asp:ImageButton ID="BtnOpenGridView" Visible="false" OnClick="BntOpenGridView_Click" runat="server" ImageUrl="~/Images/find1.png" Width="2.5%" />
</td>
</tr>
<tr>
<td>
<UserControl:RequiredGridView runat="server" ID="RqGrdView"></UserControl:KeywordsGridView>
</td>
</tr>
<tr>
<asp:Label ID="lblErrorMessage2" runat="server" ForeColor="Red"></asp:Label>
</tr>
</table>
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
What I'm trying to do is to use javascript some way to scroll to the bottom of the page after displaying the grid.
Here's what i've tried:
<script type="text/javascript">
function ScrollToGrid()
{
document.getElementById('RqGrdView').scrollIntoView(true);
}
</script>
In the Button Click event after triggering the usercontrol to load the gridview I added the following code:
ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "focusOnGrid", "ScrollToKeywordsGridView()", true);
This didn't work
I also tried to add the same code to Page PreRender as follows:
protected void BntOpenGridView_Click(object sender, ImageClickEventArgs e)
{
isRequiredGridViewClicked = true;
// code to load gridview in usercontrol
}
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
if (isRequiredGridViewClicked)
{
ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "focusOnGrid", "ScrollToGridView()", true);
isRequiredGridViewClicked = false;
}
}
This also didn't work, the javascript fires OK, but the gridview is not not displayed in full and the user has to scroll manually.
I found the solution. This post helped a lot.
I added a hidden field to my aspx page, this hidden field would be set to True using javascript when the button is clicked. And each time the page is loaded the value of the hidden field is checked, and if it's true, the document would scroll to focus on the gridview control.
This is my script:
function SetHiddenField(){
document.getElementById('MainContent_HiddenShowGrid').value = "True";
}
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
if(document.getElementById('HiddenShowGrid').value == "True")
{
document.getElementById('MainContent_PnlKeyword').scrollIntoView(true);
document.getElementById('HiddenShowGrid').value = "False";
}
});
And this is the code for the hidden field:
<tr width="100%">
<td>
<asp:Label ID="lblRequiredSrch" runat="server" Visible="false">Search for Required</asp:Label>
<asp:TextBox ID="txtRequiredSrch" runat="Server" Visible="false" Width="60%" />
<asp:ImageButton ID="btnRequiredSrchGridView" Visible="false" OnClientClick="SetHiddenField();" OnClick="btnRequiredSrchGridView_Click" runat="server" ImageUrl="~/Images/find1.png" Width="2.5%" />
</td>
</tr>
<tr>
<td>
<UserControl:RequiredsGridView runat="server" ID="RequiredsGridView2"></Requireds:RequiredsGridView>
<asp:HiddenField runat="server" ID="HiddenShowGrid" Value ="False" />
</td>
</tr>
Step 1 : I have this problem too. My solution is i try get value of scrollbar and keep that value to sessionStorage:
my asp file:
<div overflow: auto; width:1000px; height:400px;" onscroll="myFunction()" id="myscroll" runat="server" name="myscroll">
function Javascript
function myFunction() {
var elmnt = document.getElementById("myscroll");
sessionStorage.setItem('focus', elmnt.scrollTop);
}
step 2 : wait for gridview loaded: (it mean insert this code after code you get gridview) and call new function to set scrollbar gridview.For my code i have to call Javafucntion from c# :
string script = "window.onload = function() { gridview_finish(); };";
ClientScript.RegisterStartupScript(this.GetType(), "gridview_finish", script, true);
step 3 : set position gridview by value sessionStorage :
function gridview_finish() {
var elmnt = document.getElementById("myscroll");
elmnt.scrollTop=sessionStorage.getItem('focus');
}

listview if checkbox is checked and dropdown selectedvalue = x then alert + uncheck

In a aspx page, I am trying to to validate when the user is checking a checkbox, if the select value of the same line has a certain value (the default one) to fire an alert message and uncheck the checkbox. I would like to realise this in javascript to avoid a postback but if possible without jquery.
<asp:ListView ID="lstView_retrievedIPPhones" runat="server" OnDataBound="lstView_retrievedIPPhones_DataBound" OnItemDataBound="lstView_retrievedIPPhones_ItemDataBound">
<LayoutTemplate>
<table id="tbl1" runat="server" class="bordered">
<tr id="tr1" runat="server">
<th id="th1" runat="server"><asp:CheckBox ID="chkbox_checkAllRows" runat="server" OnClick="javascript:ToogleCheckAll(this.id)"/></th>
<th id="th9" runat="server">Sites</th>
<th id="th8" runat="server">Result</th>
</tr>
<tr id="ItemPlaceholder" runat="server">
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td><asp:CheckBox ID="chkbox_toConfigure" runat="server" OnClick="javascript:btnclick()" /></td>
<td>
<asp:DropDownList ID="dpdown_Site" runat="server"></asp:DropDownList>
</td>
<td><asp:Image ID="imgResultLastOp" tooltip= "" runat="server" /></td>
</tr>
</ItemTemplate>
<EmptyDataTemplate></EmptyDataTemplate>
</asp:ListView>
In the above code, when clicking on chkbox_toConfigure, I want to validate that the DropDownList selectedvalue is not the default one.
Your help would be greatly appreciated.
If you know the Value of the default item of dropdown (for example its -1 here), then you can check on click of checkbox and alert the user to select another item from dropdown:
Adding this code just before the ending ItemTemplate tag: </ItemTemplate>
<script>
function CheckSelectedItem() {
var ddl = document.getElementById("<%# Container.FindControl("dpdown_Site").ClientID %>");
var ddlValue = ddl.options[ddl.selectedIndex].value;
if(ddlValue == "-1")
alert("Select another item!");
}
document.getElementById("<%# Container.FindControl("chkbox_toConfigure").ClientID %>").onclick = function() {
CheckSelectedItem();
return false;
}
</script>
Some help
Well I end up doing the following code:
<asp:CheckBox ID="chkbox_toConfigure" runat="server" OnClick='<%# "javascript:CheckSelectedItem(this.id," + ((ListViewDataItem)Container).FindControl("dpdown_Site").ClientID + ");" %>'/>
Into my javascript section :
function CheckSelectedItem(checkboxID, dropdown) {
var checkbox = document.getElementById(checkboxID);
var dropdownValue = dropdown.options[dropdown.selectedIndex].text;
if (dropdownValue == "<>") {
alert("Please select a valid value");
checkbox.checked = false;
}
}

Get Control values of datalist in javascript

I have a datalist and I am calling javascript on div click added in datalist ..
How can i get control values on click of my div added in datalist
<asp:DataList ID="DataList1" runat="server">
<ItemTemplate>
<div id="metroaqui" class="divsub" runat="server"
onclick="javascript:getvalues(this);">
<table>
<tr class="clstd">
<td>
<b>IP NO:-</b>
</td>
<td colspan="2" style="width: 20%">
<asp:Label runat="server" ID="ipnolable"
Text='<%# Eval("IpNo") %>'></asp:Label>
</td>
<td>
<b>PATIENT NO:-</b>
</td>
<td colspan="2">
<asp:Label runat="server" ID="Label1"
Text='<%# Eval("PatientNo") %>'>
</asp:Label>
</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</asp:DataList>
To access the control inside the DataList, try to use the following way,
function getVal()
{
var datalist = document.getElementById('<%=DataList1.ClientID%>').childNodes[0];
var tb = datalist.getElementsByTagName("input");
for (var i=0;i<tb.length;i++)
{
//TextBox
if (tb[i].type=="text")
{
alert(tb[i].value);
}
//DropDown
if (tb[i].type=="select")
{
alert(tb[i].options[tb[i].selectedIndex].value);
}
}
}
You can simple use document.getElementById to get the values from your controls.
Note that you id's will change at runtime.
Also remember that label render as span on browser so you will have to check for innerText and innerHtml of your control.
You can take benefit of ClientIDMode="static" for static client id of the server controls. like asp:Label etc.

JQuery Validate dropdown selection on Button click

I'm having trouble validating a drop down asp control on button click. I have a panel that contains radio buttons, textboxes, a drop down, and a save button. If the radio button for zip is chosen a drop down list appears (that is binded with data in the code behind) and you must select a zip from the list. I'm having trouble validating on button click of the save button that a selection was made from the downdown list.
I would like to do it with jQuery and tried doing it like so that pops up and alert but its not working. Like to have it validate the selection before it does on the onClick of the button.
<script type="text/javascript">
$(document).ready(function() {
$('#btn_submit').click(function() {
if ($('#ZIPDD').val() > 0) {
return true;
}
else {
alert('Please select a zip.');
return false;
}
});
});
<asp:UpdatePanel runat="server" ID="UP6" ChildrenAsTriggers="false" UpdateMode="conditional">
<ContentTemplate>
<table style="text-align:center;" cellpadding="5px">
<tr>
<td>
<table runat="server" id="_table" width="100%" cellspacing="10">
<tr>
<td style="width:100px; font-weight:bold; padding-bottom:inherit;" valign="middle">
<div>STEP 1:</div>
<div>Enter a #</div>
</td>
<td align="left" valign="middle" style=" margin-bottom:15px;">
<asp:TextBox runat="server" ID="txt_nbr" Width="70px"/>
<asp:Button ID="Button1" Text="Continue" runat="server" OnClick="Button1_Click"/>
</td>
</tr>
<tr>
<td style="width:100px; font-weight:bold; margin-bottom:15px;" valign="middle">
</td>
<td style="border:2px solid gray; background-color:Silver;">
<table runat="server" id="SHTable" visible="false" width="100%">
<tr align="left">
<th style="font-weight:bold;border-bottom:2px solid black;">Methods</th>
<th style="font-weight:bold;border-bottom:2px solid black;">Location</th>
<th style="font-weight:bold;border-bottom:2px solid black;"> <asp:Label runat="server" ID="DOTEXT"></asp:Label></th>
</tr>
<tr align="left">
<td>
<div style="margin-bottom:10px;"><asp:CheckBox runat="server" ID="ZIP" Text="ZIP" AutoPostBack="true" OnCheckedChanged="ZIP_CheckedChanged" /></div>
</td>
<td style="width:300px;">
<asp:DropDownList runat="server" ID="ZIPDD" Visible="false"/><br /><asp:Label ID="ziplabel" Visible="false" runat="server" style="color: red; font-size:12px;"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width:100px; font-weight:bold; margin-bottom:15px;" valign="middle">
<div>Confirm changes and hit save</div>
</td>
<td align="left" valign="middle">
<asp:Button Text="Save" runat="server" ID="btn_submit" OnClick="btn_submit_Click" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</ContentTemplate>
Binding to the dropdown in the code behind on page load
protected void Page_Load(object sender, EventArgs e)
{
if (ZIPDD.Items.Count == 0)
{
Loadzips();
}
}
private void LoadBranches()
{
using (SqlConnection SQLCONN)
{
SQLCONN.Open();
SqlCommand SQLCOMM = SQLCONN.CreateCommand();
SQLCOMM.CommandText = "SELECT * FROM table";
IDataReader dr = SQLCOMM.ExecuteReader();
ZIPDD.DataSource = dr;
ZIPDD.DataValueField = "ZIPID";
ZIPDD.DataTextField = "ZIPLABEL";
ZIPDD.DataBind();
ZIPDD.Items.Insert(0, new ListItem(String.Empty, String.Empty));
ZIPDD.SelectedIndex = 0;
}
}
When you are planning to use javascript/jquery, pay attention to how controls are rendered in the client side. You are setting visible="false" to table and controls, they will never render in the client side. You can't find them using jquery. To work properly, you need to set this:
<table runat="server" id="SHTable" visible="false" width="100%">
to this:
<table runat="server" id="SHTable" style="display:none" width="100%">
and also change this:
<asp:DropDownList runat="server" ID="ZIPDD" Visible="false"/>
to this:
<asp:DropDownList runat="server" ID="ZIPDD" style="display:none"/>
To test your script, set style="display:block" for the table and the dropdown also, otherwise you will see porpup to select a zip (dropdown value is 0).
Good luck!
Why dont you look at using the jQuery.validate plugin. It will validate all form items that have the class "required" attached to it. You could use jQuery and addClass to add the class required to the dropdown if the checkbox is highlighted.
if($('#radio_button').is(':checked')) {
$( ".dropDownClassIdentifier" ).addClass( "required" );
}
else
{
$( ".dropDownClassIdentifier" ).removeClass( "required" );
}
http://jqueryvalidation.org/ and
http://api.jquery.com/addClass/ are good places to start looking for documentation

how to change repeater row back color on checkbox check using java script asp.net

I want to change back color of repeater row when a particular row check box is checked client side or whenever a row td is clicked.
For that the simplest way is that you will need to output your markup in tabular format like below code:
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<HeaderTemplate>
<table>
</HeaderTemplate>
<ItemTemplate>
<tr class="trclass" style="width:100px">
<td>
<asp:CheckBox ID="CheckBox1" runat="server" Text=""/>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<style type="text/css">
.backg
{
background-color:Blue;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id$='_CheckBox1']").click(function () {
var checked = $(this).is(':checked');
if (checked == true) {
$(this).parent().parent().addClass("backg");
}
else {
$(this).parent().parent().removeClass("backg");
}
});
$(".trclass").click(function() {
if ($(':checkbox', this).is(':checked')) {
$(this).addClass("backg");
}
else {
$(this).removeClass("backg");
}
});
});
</script>
There is a minor flaw but let me know if this is what you are looking for and we can fix it.
Edited:
I have updated the tr click code. See if that's what you want. If not can you update your question to clarify when you want the row color to change exactly and if the checbox is affected on row click?
Edit 2:
I came across this link which might be helpful.

Categories