Trying to get this div to disappear, does not seem to doing what I expect it to do, where am I going wrong?
It does not disappear.
Javascript:
<script type="text/javascript">
function Show_Hide_Display() {
var div1 = document.getElementById("checkAvailability");
if (div1.style.display == "" || div1.style.display == "block") {
div1.style.display = "none";
}
else {
div1.style.display = "block";
}
return false;
}
</script>
HTML:
<div runat="server" id="checkAvailability">
<asp:LinkButton OnClientClick="Show_Hide_Display()" ID="lbtnCheckAvailability" runat="server" CausesValidation="true" OnClick="lbtnCheckAvailability_Click">Check availability
</asp:LinkButton>
</div>
I want the button to pretty much hide itself.
Change your line to:
var div1 = document.getElementById("<%=checkAvailability.ClientID%>");
The reason is that when the checkAvailability control is rendered on the client side it may or may not have the same id (checkAvailability) since asp.net will prepend its id with that of the container control or some other logic.
This <%=checkAvailability.ClientID%> will always give you the actual id on the client side.
I think you will be better of looking at some jQuery here. For example, your code could look like:
$(document).ready(function(){
$('#yourbutton').click(function(){
$(this).toggle();
});
});
Of course, in your case you can also hide the wrapping div if you want that for some reason. It's about the same approach.
In addition to what #Icarus has posted, modify your code as such.
OnClientClick="return Show_Hide_Display()"
this will stop a post back from happening. i'm guessing you don't want a postback to occur since your div/button will be visible after a postback.
the problem is linkbutton causes postback, thus div visibility, set by JS, after postback will be restored to it's default value. i.e. style.display will not be saved. a simple solution will be just add simple html button. like this
<input type="button" value="hide the div" onclick="Show_Hide_Display()" />
this just triggers JS, not causing postback, and your div visibility will alter as expected.
Related
I have a basic url redirect on a DIV's onclick.
<div onclick="location.href = 'page.aspx';">
I have a need to do some work server side, rather than just a redirect, when this Div is clicked.
How do I call one of my code behind functions from the DIV onclick? The DIV is the parent control inside a usercontrol. I suppose I can "fix" it by using a literal control and writing a query string into the onclick, but I would use that as a last resort as I don't want to use a query string.
Are there any other ways of catching a DIV click in code behind that I may have missed?
You can have a button whose display can be 'none'.
Handle click of Div on client side and then from there fire the Click of that button and handle the thinks Server Side on the Click Event of the button.
<asp:Button runat="server" id="btnHidden" style="display:none" onclick="btnHidden_OnClick" />
<div onclick="javascript:DivClicked(); return true;"></div>
<script>
function DivClicked()
{
var btnHidden = $('#<%= btnHidden.ClientID %>');
if(btnHidden != null)
{
btnHidden.click();
}
}
</script>
I have received several reports from people not being able to register on my website due to them not being able to check a checkbox stating they agree to the Terms of Use. Basically, once the checkbox is checked a button is enabled to allow one to continue with registration.
I've tried myself and a lot of the time, clicking on the actual checkbox doesn't do anything but clicking on the associated label usually does. I've given that as the workaround but I'd really like to have clicking on the actual checkbox work all of the time.
The registration page is: http://www.lonelycache.com/Account/GeocachingAuth.aspx
The page form has the following for the checkbox (formatted for readability):
<asp:CheckBox ID="AgreeTOUCheckBox"
AutoPostBack="true"
runat="server" Text=" I have read and agree to the"
OnCheckedChanged="AgreeTOUCheckBox_OnCheckChanged" />
The generated html is (formatted for readability):
<input id="MainContent_AgreeTOUCheckBox" type="checkbox"
name="ctl00$MainContent$AgreeTOUCheckBox"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$AgreeTOUCheckBox\',\'\')', 0)"
/>
<label for="MainContent_AgreeTOUCheckBox"> I have read and agree to the</label>
Any ideas on what I might do to get this to work consistently?
Your checkbox is working fine, it's just hidden behind another panel. If you click and drag below the checkbox to highlight the page itself, you can see your left footprint panel is hiding most of the checkbox.
Try clicking just the very right edge of the checkbox and it will work.
It's probably as easy as adjusting your style like so:
<div style="padding-left:10px">
<asp:CheckBox ID="AgreeTOUCheckBox"
AutoPostBack="true"
runat="server" Text=" I have read and agree to the"
OnCheckedChanged="AgreeTOUCheckBox_OnCheckChanged" />
</div>
The same is true of your Authorize button. Try clicking the very left of that and it won't work.
Let me know if that does it for you.
This problem has nothing to do with ASP.NET. I've checked your website and you have a DIV (id: boots) that is sitting on top of the majority of the checkbox (it displays the boots image on the left as it's background image).
If you set the width of that div to be 180px rather than 200px, it should solve your problem,
I tested your site. I can't check either.
According to what I tested, your checkbox is just to enable the button. If so, you can just simply use jQuery to do that.
Here is the sample:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%= AgreeTOUCheckBox.ClientID %>').click(function () {
if ($('#<%= AgreeTOUCheckBox.ClientID %>').attr('checked')) {
$('#<%= AuthorizeButton.ClientID %>').removeAttr("disabled");
} else {
$('#<%= AuthorizeButton.ClientID %>').prop("disabled", "disabled");
}
});
});
</script>
<asp:CheckBox ID="AgreeTOUCheckBox" runat="server"
Text=" I have read and agree to the" />
<asp:Button runat="server" ID="AuthorizeButton"
Text="Authorize" Enabled="False"/>
i Have one div in my default web page . The div style display none, that time in page load event i have to get the status none, but the div status changed in javascript function based on dropdown selection that i dosenot get the none status always show "" status, my code is
aspx page
<div id="Div1" runat="server" clientidmode="Static" style="display: none;">
pageload event
string Display1 = "";
Display1 = Div1.Style["display"]; (working fine)( get the display1 value=none)
when i button click show the div like that in c# code
Div1.Style.Add("display", "");(now show the div it is correct)
Dropdown Changed fire javascript function code
document.getElementById('Div1').style.display = 'none'; (after change dropdown Hide the div after pageload i got Display1 value="")
After changed javascript function i doenot get the none status in page load
you can use like this it's below
<script type="text/javascript">
$(function () {
$("#lnkCompany").click(function () {
if ($("#dvClientReg").css('display') == 'block') {
$("#dvClientReg").css('display', 'none');
}
if ($("#dvCompanyReg").css('display') == 'none') {
$("#dvCompanyReg").css('display', 'block');
}
});
});
</script>
i think this will help you
DIV is a HTMLGenericalControl in ASP.Net and any changes you make it in the client to its style or attributes, i dont think it will be posted back to server, instead you can track the changes on a Hidden control which has runat server attribute to true and capture the changes.
let me know if it helps
This is question is in relation to my last question in case you want some more background information.
My question is: Is it possible to make a cell in an asp.net Table clickable?
Or Is it at least possible to make a clickable WebControl (which should be possible to place in a ControlCollection), that is not a Button or a LinkButton, in ASP.NET?
And if not, is it possible to multiple lines of information into the button text?
I've tried adding other components to the button's ControlCollection (which I've seen working in the Windows Forms version of the Button), to see if I could render child components to a button, but without success:
private void ModifyTableCell(TableCell cell)
{
//Create new button
Button btnCell = new Button();
btnCell.Click += (sender, args) =>
{
//Event for the button
};
//Create new Label
Label lblCell = new Label();
lblCell.Font.Bold = true;
lblCell.Text = "This text won't appear";
btnCell.Controls.Add(lblCell); //Attempt to add label to Button
cell.Controls.Add(btnCell);
}
EDIT: I ended up just creating a multi-lined LinkButton for the entire cell.
You should be able to make pretty much any control clickable by assigning an onclick attribute and leveraging the __doPostBack function.
ctrl.Attributes["onclick"] = string.Format("__doPostBack('{0}', '{1}');", ctrl.ClientID, "SomeArgument");
You could also use the GetPostBackEventReference method too. This option is actually safer, because it will register the __doPostBack function it doesn't already exist:
ctrl.Attributes["onclick"] = Page.ClientScript.GetPostBackEventReference(ctrl, string.Empty);
Then, in the code-behind you can simply override the RaisePostBackEvent method:
protected override void RaisePostBackEvent(IPostBackEventHandler source, string eventArgument)
{
base.RaisePostBackEvent(source, eventArgument);
if (eventArgument == "SomeArgument") //using the argument
{
//do whatever
}
}
You can add multiple lines to a asp.net button by using the string builder, something like:
System.Text.StringBuilder buttonText = new System.Text.StringBuilder();
buttonText.AppendLine("first line");
buttonText.AppendLine("second line");
btnMultiline.Text = buttonText.ToString;
I am not sure how you imagine such a composite control would be rendered. Remember that each ASP.NET control in the end outputs HTML. You Button essentially outputs a
<input type="button">The button text</input>
If you want to place anything else inside the <input> tag, it must be HTML-compatible. I'm not sure the input tag allows other HTML inside.
If it is a LinkButton on the other hand, the generated HTML markup is an <a href=""> tag. You can put anything there, even an image if you wish, which will become clickable.
I am not sure what is your full scenario, but what you're trying to do smells bad. I suggest that you either use a LinkButton or rethink your approach, just have in mind what the final output in HTML would be.
In reading both of your posts, it looks like you want to be able to click on anything in the cell and have it post back as if the whole cell were a button?
If so, one of the fairly simple ways to do it is to build your cell content as you would if you were not trying to post back. Then add a button with a style of display:none;. You can then use client side scripting to capture the click event of the cell, and raise the click event of the button to cause a post back.
This allows you to create the cell content in any way you like, and the postback code and handlers are automatically generated for you.
Using JQuery you end up with something along the lines of this:
<head runat="server">
<style>
input.ClickableCellButton
{
display: none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("td.ClickableCell").click(function (event) { $(event.target).children("input.ClickableCellButton").click() });
});
</script>
<div>
<table>
<tbody>
<tr>
<td class="ClickableCell">
Cell Contents<br />
on multiple lines
<asp:Button ID="Button1" runat="server" Text="Button" CssClass="ClickableCellButton"
OnClick="Button1_Click" />
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
And if not, is it possible to multiple lines of information into the
button text?
For this particular case, you can accomplish this via CSS only; no need to extend Button:
<asp:button id="myMultilineButton" runat="server" style="width:60px; white-space: normal;" Text="Several lines of text" />
It will render as:
I added this script on my page..it didnt work
<script type="text/javascript">
$(document).ready(function(){
$("#accordion").accordion( { active: false, collapsible: true });
});
my accordion
<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" Visible="true" AutoSize="None"SelectedIndex="0" RequireOpenedPane="false" TransitionDuration="250"
HeaderCssClass="accordionHeader toggler" ContentCssClass="accordionContent expanded toggler">
<HeaderTemplate>
<b style="color: Black">
<%#Eval("Ques")%>
</b>
</HeaderTemplate>
<ContentTemplate>
<p> <%#DataBinder.Eval(Container.DataItem, "QuesAns")%></p>
</ContentTemplate>
</cc1:Accordion>
I see the first header expanded when page's loaded. How to make them all collapsed on page load?
There is an easy fix for that - just set SelectedIndex="-1" instead of "0" (plus RequireOpenedPane="false" but it's already set in your markup).. and you really don't need that fancy onReady script.
I think your selector is wrong.
Try
$(document).ready(function(){
$("#<%=Accordion1.ClientID %>").accordion( { active: false, collapsible: true });
});
You have to set
Accordion1.RequireOpenedPane = false;
To have them all closed. And possible set selectedIndex to -1
I think your selector is wrong:
$(document).ready(function(){
$("#<%= Accordion1.ClientID %>").accordion( { active: false, collapsible: true });
});
This would have to go inside your page, not in an external javascript file or the <%= %> code block wont get executed.
Side note: You are using jquery notation which looks like the jquery UI accordion code but then trying to apply it to what looks like the asp.net Ajax Control Toolkit accordion control. If this is what you are doing then it probably wont work. However if you have the very latest version of ACT included with the Microsoft Ajax library then you could be correct here. I know that they have reimplemented all of the ACT controls to be exposed as jquery plugins but I havent used that release.
On a sidenote: When using accordion (or other js-triggered layout), you will be risking FOUC (Flash Of Unstyled Content). I would wrap the accordion control in a div, with display:none in your css and when the accordion javascript is executed, you use JQuerys show() to make it visible again. Then the accordion will be loaded and styled before it's shown.