I have this ddl:
<asp:DropDownList ID="ddl" runat="server">
<asp:ListItem Value="-1">Select</asp:ListItem>
<asp:ListItem Value="2">My Images</asp:ListItem>
<asp:ListItem Value="3">My Documents</asp:ListItem>
</asp:DropDownList>
I want to show images below that dropdownlist only when a user click on "My Images"
I know how to open an alert when a user click on one of the options, but I dont know how to show things in the same page.
Thanks for helping.
Put your images inside a div:
<div id="myImages" class="ShowHide">
your images here
</div>
add javascript to the server-side:
ddl.Attributes["onchange"] = "ddl_onchange()";
add css class:
<style>
.ShowHide {
display: none;
}
</style>
and below is the javascript code that will show or hide images div:
<script type="text/javascript">
function ddl_onchange(){
var el = document.getElementById("ddl");
var panel = document.getELementById("myImages");
if (el.options[e.selectedIndex].value == "2")
panel.style.display ="block";
else
panel.style.display ="none";
}
</script>
Related
I have an aspx page that contains an ASPxComboBox. When this combo is changed after the page loads the div hides/unhides fine. In my case I load existing values from the database. I need to hide/show div based on these loaded values. If I populate the dropdown with "None" I want to hide the divs. Thanks.
< script type = "text/javascript" >
function OnSizeChanged(cbSide) {
const str = cbSide.GetText().toString();
if (str.includes('None')) {
bottomtext.style.display = "block";
lblbottomtext.style.display = "block";
} else {
lblbottomtext.style.display = "none";
bottomtext.style.display = "none";
}
}
</script>
<dx:ASPxComboBox ID="cbSide" runat="server" Width="280" ValueType="System.String">
<Items>
<dx:ListEditItem Text="DXF" Value="DXF" />
<dx:ListEditItem Text="None" Value="None" />
</Items>
<ClientSideEvents SelectedIndexChanged="function(s, e) { OnSizeChanged(s); }" />
<ValidationSettings RequiredField-IsRequired="true" Display="Dynamic">
<RequiredField IsRequired="True"></RequiredField>
</ValidationSettings>
</dx:ASPxComboBox>
<div id="lblbottomtext" runat="server">
<dx:ASPxLabel ID="lblBST" runat="server" Text="Bottom Side Text:"></dx:ASPxLabel>
</div>
<div id="bottomtext" runat="server">
<dx:ASPxMemo ID="txtBottom" runat="server" Height="71px" Width="280px"></dx:ASPxMemo>
</div>
So I am trying to enable text box if other option is selected from dropdown list
i.e when i select the other option without clicking any button it shows the textbox
code is listed below with js file but its not working need help with this
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script src="../Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$('#type_').change(function () {
if (this.value == 'other') {
$('#other_type').css('display', 'block');
}
else {
$('#other_type').css('display', 'none');
}
});
</script>
<div>
<asp:Label ID="Label1" runat="server" Text="Type : "></asp:Label>
<asp:DropDownList ID="type_" runat="server" style="margin-left: 0px">
<asp:ListItem>a</asp:ListItem>
<asp:ListItem>b</asp:ListItem>
<asp:ListItem>c</asp:ListItem>
<asp:ListItem>other</asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="other_type" runat="server" style="margin-left: 33px; display:none" Width="157px"></asp:TextBox>.......
First, wrap the code with $(function(){}); to bind the click after the page loads.
You're not properly selecting elements. ASP .NET changes the ID property, so you have to use <%= ControlName.ClientID %> to get the generated ID.
Or give a CssClass to the controls.
$(function(){
$('#<%= type_.ClientID %>').change(function () {
if (this.val() == 'other') {
$('#<%= other_type.ClientID %>').css('display', 'block');
}
else {
$('#<%= other_type.ClientID %>').css('display', 'none');
}
});
I am trying to disable/enable a button of the parent window from the child window.
The following is a snippet from the parent page.
<ajaxToolkit:ModalPopupExtender ID="mpeTest" runat="server"
CancelControlID="btnClose" PopupControlID="pnl1" TargetControlID="showMpe"/>
<asp:Panel ID="pnl1" runat="server" >
<ContentTemplate>
<iframe id="ContentIframe" runat="server">
<p>Your browser does not support iframes.</p>
</iframe>
</ContentTemplate>
<p class="submitButton">
<asp:Button ID="btnClose" runat="server" Text="Close" />
<asp:Button ID="btnTest" runat="server" Text="EnableDisable" />
</p>
</asp:Panel>
In the child page that is loaded in the iframe, I have a grid view with LinkButtons. I am attempting to get one of these LinkButtons to disable/enable the btnTest from the parent window.
I have tried many things but I can't seem to figure this out...
for example:
<script type="text/javascript" >
$(document).ready(function() {
jQuery('[id$="linkButtonDisable"]').click(function() {
window.parent.opener.document.getElementById("btnTest").disabled = true;
});
});
</script>
Can anyone please help me out. I am fairly new to this
Maybe you should try something like this...
$("#<%=linkButtonDisable.ClientID %>").click(function() {
//Option N#1 HTML Attribute
$("#<%=btnTest.ClientID %>").attr("disabled","disabled");
//Option 2 With jQueryMobile integration, the same it supposed to work if your using bootstrap, but I ignore the css class for disabling an element
$("#<%=btnTest.ClientID %>").addClass("ui-disabled");
//Also if you want to toggle states between disable/enable maybe this could work either...
var id = $("#<%=btnTest.ClientID %>");
var state = id.attr("disabled");
//Dunno if it's needed to catch if disabled attr it isn't set
if(state == "disabled") {
id.removeAttr("disabled");
} else {
id.attr("disabled","disabled");
}
});
Hope this help!...
I am working on a ASPX project with .VB in the code behind. The goal is to have two divs hidden when the page loads. Then when the user clicks the "No" radio button it will display the hidden div under it. The Radio buttons are asp List Items.
The code below works but on page load the divs are visible. I'm assuming it is either my VB code or the JS code not hiding on page load.
Here's the VB code behind.
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
For Each li As ListItem In rbPickUpOnTime.Items
If li.Value = "Y" Then
li.Attributes.Add("onclick", "javascript:hidePickup();")
End If
If li.Value = "N" Then
li.Attributes.Add("onclick", "javascript:showPickup();")
End If
Next
For Each li As ListItem In rbDeliveryOnTime.Items
If li.Value = "Y" Then
li.Attributes.Add("onclick", "javascript:hideDelivery();")
End If
If li.Value = "N" Then
li.Attributes.Add("onclick", "javascript:showDelivery();")
End If
Next
Here's the JavaScript:
function hidePickup() {
document.getElementById('pnlPickupNo').style.display = 'none';
};
function showPickup() {
document.getElementById('pnlPickupNo').style.display = 'block';
};
function hideDelivery() {
document.getElementById('pnlDeliveryNo').style.display = 'none';
};
function showDelivery() {
document.getElementById('pnlDeliveryNo').style.display = 'block';
};
Finally here's one of the ASPX panels it needs to show/hide:
<div class="container" style="margin-top: 20px;">
<div class="centerContainer" style="width: 230px;">
<label class="Emphasis">I can pickup on time </label>
<asp:RadioButtonList ID="rbPickUpOnTime" runat="server"
RepeatDirection="Horizontal"
Style="margin-left: 60px;" TabIndex="2" AutoPostBack="false">
<asp:ListItem Text="Yes" Value="Y" Selected="True" />
<asp:ListItem Text="No" Value="N" />
</asp:RadioButtonList>
</div>
<asp:Panel ID="pnlPickupNo" runat="server" >
<div class="centerContainer ui-widget-content" style="width: 230px;">
<label>If No, ETA to pickup </label>
<table style="margin-left: 15px;">
.....
</table>
</div>
Any suggestions?
If you are using .Net 4.0 or higher , you can use the Client ID Mode Static to generate the same ID's in the server side.
If you are not mentioning any thing, then you have use ClientID's instead of directly using ID
For example, if your id is 'pnlPickupNo' , then you can client ID's by using below syntax:
<%# 'pnlPickupNo'.ClientID %>
Hope this helps..
If you don't have to use JavaScript, you could make an OnClick event in your RadioButtonList
OnSelectedIndexChanged="yourBehindCodeFunction"
and make add runat="server" and an ID to all of your div's, then grab the id in the behind code and set visible to false
HTML
div class="centerContainer ui-widget-content" style="width: 230px;" runat="server" ID="test">
Behind-Code
var list = sender as RadioButtonList;
if(list.SelectedValue.Equals("No"))
test.Visible = false;
If you are using JavaScript, you either need to make all of your controls static to use document.getElementById or you could use JQuery and call each by
$('#<%= yourControlId.ClientID %>').hide()
The question was: How do I make the divs hide onload?
This is a work project. I was told to use JavaScript to remove the need for a callback in the code behind.
Here's the simple answer I came up with:
JavaScript:
function hideDiv() {
document.getElementById("pnlPickupNo").style.display = 'none';
document.getElementById("pnlDeliveryNo").style.display = 'none';
};
Markup:
body tag onload="hideDiv()"
As you can see it is a simple pure JavaScript solution. It works and saves me time.
Thanks everyone for your suggestions.
I've designed a web page in asp.net. And in that page i placed html control too like <a> & <div>. I have written one java script function which is hiding the <div> when i'm clicking on the <a> tag. Its working fine. But when i'm clicking on the asp.net button then page refresh occur again. And it is loading my previous design of the page. I set the display:none of the <div> at the design time. so it is hiding my <div> again when occuring any other server side event. And i don't want let it happen.
Javascript function-
<script language="javascript" type="text/javascript">
function toggle5(showHideDiv, switchTag) {
try {
'<%Session["temp"] = "'+more+'"; %>';
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchTag);
if (ele.style.display == "block") {
ele.style.display = "none";
imageEle.innerHTML = 'More';
}
else {
ele.style.display = "block";
imageEle.innerHTML = 'Less';
}
}
catch (err) {
alert("Error");
}
}
</script>
html code is-
<div id="divSearch" style="float:left;height:100%;width:100%;">
<span style="float:right;height:27px;"><a id="displayText" href="#" onclick="javascript:toggle5('toggleText', 'displayText');">More</a></span>
</div>
<div id="toggleText" style="display:none;height:100%;width:100%;">
<div id="divCalls" style="width:24%;float:left;height:30%;">
<span style="float:left;width:100%;color:#3b5998;">
<asp:CheckBox ID="chkNoCall" runat="server" Text="No call made in "
AutoPostBack="True" oncheckedchanged="chkNoCall_CheckedChanged"/>
<asp:TextBox ID="txtNoCall" runat="server" Width="12%" Enabled="False"></asp:TextBox><span> days</span></span>
</div>
</div>
C#.net code of the Checkbox-
protected void chkNoCall_CheckedChanged(object sender, EventArgs e)
{
if (chkNoCall.Checked == true)
{
txtNoCall.Enabled = true;
}
else
{
txtNoCall.Enabled = false;
txtNoCall.Text = "";
}
}
How to solve this problem?
thanks
put this data inside the updatepanel like this
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<span style="float:left;width:100%;color:#3b5998;">
<asp:CheckBox ID="chkNoCall" runat="server" Text="No call made in "
AutoPostBack="True" oncheckedchanged="chkNoCall_CheckedChanged"/>
<asp:TextBox ID="txtNoCall" runat="server" Width="12%" Enabled="False"></asp:TextBox><span> days</span></span>
</ContentTemplate>
</asp:UpdatePanel>
hope this help
In your button click event, return false. this will prevent postback.
Use ajax to get the server side data instead of submitting the page.
Try one of the following:
remove runat=server from the component (a component with runat=Server always submits a form.
use standard html controls
use javascript for html controls
it it's a component with autopostback feature; make autopostback=false