Develop Reference

Hide div on textbox change without AutoPostBack

I have a textbox that users can enter comments into, and then click save. When they click save, some code executes in the background, but their comments stay in the textbox so that they can see them. I want to display some text above the box that says "Comments saved" when they click save, so that they know that their request went through, since nothing else changes on the page after clicking save. However, they can then change the text in the textbox, and it won't save unless they click "save" again. So, I want the "Comments saved" text to disappear if they change the text in the box. However, I cannot set AutoPostBack="true", because it will mess up some other stuff that's happening on the page. Is there a way to make the "Comments Saved" text disappear when the textbox is changed, without reloading the page? Here is the code I have so far:
<div id="savedMsg" runat="server"><p class="msgAlert"> Comments Saved! </p></div>
<div>
<asp:Panel runat="server" DefaultButton="Save">
<asp:TextBox runat="server" ID="TextBox" CssClass="form-control" TextMode="MultiLine"/>
</asp:Panel>
</div>
Here is the code behind:
protected void SaveComments(object sender, EventArgs e)
{
//some code here that is unrelated
savedMsg.Visible = true;
}
Ideally, I would set TextChange="SomeMethod" and include this in my code behind:
protected void SomeMethod(object sender, EventArgs e)
{
savedMsg.Visible = false;
}
but I can't enable AutoPostBack, so this event never happens.

You can hide the message on the onkeydown event of the TextBox:
<asp:TextBox runat="server" ID="TextBox" onkeydown="hideSaveMessage();" CssClass="form-control" TextMode="MultiLine" />
with the Javascript code:
<script type="text/javascript">
function hideSaveMessage() {
var div = document.getElementById('<%= savedMsg.ClientID %>');
div.style.visibility = 'hidden';
}
</script>
You could also use div.style.display = 'none' to hide the message but that causes the TextBox to "jump" to a new position, which is somewhat disturbing.
I used document.getElementById('<%= savedMsg.ClientID %>') to account for any modification applied to the div ID by ASP.NET. The simpler syntax document.getElementById('savedMsg') may work in your case.

Displaying a div on a button click in asp.net

I want to display a particular div on the click of a button
My asp code is as follows
<asp:Button ID="Button1" class="btn" runat="server" OnClick="Submit" />
<div runat="server" id="signup" Visible="false">Some Content </div>
Now in the CodeBehind i have written the following code
protected void Submit(object sender, EventArgs e)
{
Button1.Visible = false;
signup.Visible = true;
}
But every time i get the error as
the name signup does't exist in the current context
i am not able to figure out the problem in the code..

You probably have wrong html for the div, you can also use style="visible:none" instead of Visible="false"
Change
visible:"false"
To
Visible="false"

This has to be done through JavaScript, I believe in the onClientClick attribute of the button. I'm currently searching for the code to jog my own

asp:Button not displaying correctly

this is my scenario:
I want to display a button(btnGenerate) based on the amount of rows displayed in my gridview. I've gotten it to display for a second then it goes away again. I'm using the onclientclick of one of my other buttons(btnImport). What I think is causing the problem is that on the same button(btnImport)'s OnClick event two gridview's performs for each a databind. Could this be the problem? I have written a script using javascript to perform this task from the client side. Is there a better way to do it? What can I do to fix my problem?
Here is my code that I have so far:
<asp:Button runat="server" ID="btnImport" Text="Load Data from File"
BackColor="#990000" ForeColor="White" nowrap OnClick="btnImport_Click"
style="display:none" OnClientClick="DisplayButtonGenerate()"/>
<asp:Button ID="btnGenerate" runat="server" Text="Generate New Stock Codes"
BackColor="#990000" ForeColor="White" OnClick="btnGenerate_Click"
style="display:none" />
I have two gridviews : ErrorsGrid that displays all the faulty records and InventoryGrid that displays the records that are correct. Like I said above, the idea is to display btnGenerate if ErrorsGrid has rowCount=0.
protected void btnImport_Click(object sender, EventArgs e)
{
InventoryGrid.DataBind();
ErrorsGrid.DataBind();
}
protected void btnGenerate_Click(object sender, EventArgs e)
{
FinalMessage.AppendLine(_InsertWrapper.PostData());
}
Here is the script:
<script language="javascript" type="text/javascript">
function DisplayButtonGenerate() {
var rowCount = <%=ErrorsGrid.Rows.Count %>;
var buttonGen = document.getElementById("<%=btnGenerate.ClientID%>");
if(rowCount == 0)
{
buttonGen.style.display = "block";
}
}
</script>

Your btnImport has server-side OnClient and client-side OnClientClick both set. I guess what's happening is the client-side is called first, shows the button, then the server-side one kicks in, the page gets refreshed from the server, and your button is hidden again. You can do it in one way or another, but not both:
Server-side: Remove the OnClientClick & style="display:none" & JavaScript, set the Visible property of the button to false, and in the code-behind click event on the server add:
if(ErrorsGrid.Rows.Count == 0)
btnImport.Visible = True;
Client-side: Return false from the JavaScript function to the OnClientClick:
OnClientClick="return DisplayButtonGenerate()"
function DisplayButtonGenerate() {
....
return false;
}

If you want to update InventoryGrid,ErrorsGrid grid controls in code after you click a button, you need to keep those in a UpdatePanel
<asp:UpdatePanel ID="upnl" runat="server" UpdateMode="Conditional">
<contenttemplate>
InventoryGrid,ErrorsGrid mark up
</contentTemplate>
<Triggers>
//set async trigger as btnImport
</Triggers>
</asp:UpdatePanel>

Let's breakdown your problem into steps.
you click on btnImport, it first calls the OnClientClick, does client side processing
and then does a full postback, goes to server side and processes its server side handler OnClick.
after the OnClick handler is processed, the page again renders, the unconditioned code in the btnGenerate display:none again runs, and the default state is again rendered.
you see the problem? even if you are manipulating certain logic in your clientClick, it all resets on page reload, because your btnImport is doing that.
Solutions:
there are couple of things I can suggest.
Use UpdatePanel to prevent Postback of the entire page or
make your btnImport a client side button altogether, and do a post using xhr or jQuery's ajax.
Set the visibility of btnGenerate on the server side itself
most simple would be the 3rd one i.e. remove the onclientclick event from the code and change your btnImport to do this:
protected void btnImport_Click(object sender, EventArgs e)
{
InventoryGrid.DataBind();
ErrorsGrid.DataBind();
//set visibility of btnGenerate in Page_Load also;
btnGenerate.Visible = ErrorsGrid.Rows.Count == 0;
}
and remove display:none from btnGenerate from client

There's no need for a JS function here.
Simply check the datasource for ErrorsGrid if count != 0 and if it's not just set the visibility of your button in codebehind.

If i've understood your req. correctly, setting 'Visbible' property of button to true or false should work. i.e btnGenerate.Visible=true/false. Initially you can set the button visibility as false then based on the record count you can modify it in the required event handler.

Disable buttons onclick in asp wizard

I have an asp wizard on my page with three steps.
<asp:Wizard ID="wizardBestellen" runat="server" ActiveStepIndex="0" DisplaySideBar="False" onfinishbuttonclick="wizard_NextButtonClick" onnextbuttonclick="wizard_NextButtonClick" onpreviousbuttonclick="wizard_PreviousButtonClick">
<StartNavigationTemplate></StartNavigationTemplate>
<StepNavigationTemplate></StepNavigationTemplate>
<FinishNavigationTemplate></FinishNavigationTemplate>
<WizardSteps>
<asp:WizardStep runat="server" ID="step1" StepType="Start">
<uc1:control ID="uc1" runat="server" />
</asp:WizardStep>
<asp:WizardStep runat="server"ID="step2" StepType="Step">
<uc2:control ID="uc2" runat="server" />
</asp:WizardStep>
<asp:WizardStep ID="step3" runat="server" StepType="Finish">
<uc3:control ID="uc3" runat="server" />
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
Now every control has a next and a previous button which after the click validates your data and sends you to the next step. The buttons all look like:
<asp:LinkButton ID="bntPrevious" runat="server" CommandName="MovePrevious" CssClass="buttonOrange" CausesValidation="false"><span>Previous</span></asp:LinkButton>
<asp:LinkButton ID="btnNext" runat="server" CommandName="MoveNext" CssClass="buttonOrange" CausesValidation="true"><span>Next</span></asp:LinkButton>
So far it all works perfectly..
Now i wanted to disable the buttons after clicking on it and show a div with a loader image. So i created a div named divLoader and a javascript function which hides the div the buttons are in and shows the div with the loader.
function ToggleDiv(divButton, divLabel)
{
if (divButton.style.display == 'block')
{
divButton.style.display = 'none';
divLabel.style.display = 'block';
}
else
{
divButton.style.display = 'block';
divLabel.style.display = 'none';
}
}
But i can't get this to work. The ToggleDiv function works great in another situation, so thats not the problem.
I've tried calling the function from the OnClick attribute in the linkbutton but this gave me an error. I tried the OnClientClick, but this didn't work and i also tried setting the onclick attribute in the code behind, this also was a dead end.
Can anybody explain to me what i am doing wrong or is there another way to prevent users clicking the button twice?

Sounds like you're not getting the binding to work.
The first thing I would do is check the emitted control IDs by doing a view-source. Some implementation of the .NET framework add extra fluff to these control IDs, so can't guarantee that it will be the same as appears on the form.
Next, I would try some JavaScript late binding. If you have a JavaScript file, put it there. If not create one or add a JavaScript block to the foot of your form (create a new file for preference).
All this would be much easier with a JAvaScript lbrary such as jQuery, but for the moment lets assume you don't have one.
Add a window onload event handler
window.onload = function(){
//code to go here
}
Now add the click binding for your button:
window.onload = function(){
document.getElementById("***YOUR BUTTON ID***").onclick = function(){
ToggleDiv(this, document.getElementById("***YOUR LABEL ID***"));
}
}
I said this would be a little easer with jQuery, well, this is the equivalent implementation:
$(document).ready(function(){
$("#***YOUR BUTTON ID***").click(function(){
$(this).toggle();
$("#***YOUR LABEL ID***")).toggle();
});
});
The above sample removes the need for your ToggleDiv function entirely.

Why IE does not refresh the page after a JS call to a click button?

On a ASP.Net page, I am in front of a problem only with IE. Here is the description.
On a page, there is two buttons and one label. The first button is visible and calls a JS function on the click event. This JS function calls the click function of the second button. The second button has an C€ event handler on the click event. The C# event handler edit the label.
In Firefox : the label is correctly edited after the clicks.
In IE (8) : the label is not edited, despite the C€ event handler has been correctly hit.
Also, I observed, in IE, that the Page_Load event is called two times after the JS button click :
Page_Load
button2_OnClick => change of the Label Text
Page_Load => The Label Text is reset :(
In Firefox, the Page_Load is called only once.
My question is : how to make IE refresh correctly the page as Firefox does after a JS button click ?
Below is the sample test code :
1) Page ASPX
<head runat="server">
<title></title>
<script type="text/javascript">
function button1Click(sender, args) {
var button2 = document.getElementById("button2");
button2.click();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button runat="server" ID="button1" Text="Click-me!" OnClientClick="button1Click();" />
<asp:Button runat="server" ID="button2" Text="Second" OnClick="button2_OnClick" style="display:none" />
<p />
<asp:Label runat="server" ID="label1" Text="Init" />
</div>
</form>
</body>
</html>
2) C# code-behind :
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void button2_OnClick(object sender, EventArgs e)
{
label1.Text = "Changed";
}
}

The ID of your button will not be button1 or button2 when it's rendered. It will probably be something like ctl001_button1. Therefore your javascript will not work. In ASP.NET 4 you can override this behaviour by using an assigned ClientID.
<asp:Button runat="server" ID="button1" Text="Click-me!"
OnClientClick="button1Click();" ClientIDMode="Static" />
<asp:Button runat="server" ID="button2" Text="Second"
OnClick="button2_OnClick" style="display:none" ClientIDMode="Static" />
As an aside, this alludes to the main problem with ASP.NET Winforms - it tricks developers into thinking that the web is a connected environment.
What actually happens when you click an <asp:Button /> element by default is that a postback is invoked. I.e. Your browser sends a request to the server for a new page. It sends up something called ViewState which is how the server knows what you've done and what to render. There is no "event" handled as such.

I think the problem is with the way you are trying to get the hidden button
var button2 = document.getElementById("button2");
maybe change this to
var button2 = document.getElementById("<%= button2.ClientID %>");
After the buttons are rendered in the browser, the ID is changed by the ASP.Net engine, and not the same as your source.
http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid.aspx
Hope this helps.