Solved

hide button IMMEDIATELY

Posted on 2013-06-27
19
347 Views
Last Modified: 2013-06-28
Is there a way to give a higher "priority" or a speedier "paint refresh" to a button on a web page?


I have a button that, when clicked, I want to hide it IMMEDIATELY -- before any attempt by the client to initiate a round-trip to the server (which clicking the button does)

Even the javascript method I wrote seems to be ignored.  All the processing seems to want to happen FIRST.


The problem is - when the button is clicked it takes a while for the page to process everything.  The user does not wait patiently.  Instead, they click the button several times more, resulting in unwanted behavior.

So what I want to do is AS SOON AS the user clicks the button, the first time, I want to hide the button so that they cannot click on the button again.
0
Comment
Question by:knowlton
  • 9
  • 9
19 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39283021
Try this.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>hideButton</title>
<script type="text/javascript">
<!--
function hideButton()
{
// hide div
document.getElementById('theButton').style.visibility = 'hidden';
document.getElementById('theButton').style.display = 'none';
// do other stuff here
}
// -->
</script>
</head>
<body>


<div id="theButton">
<input type="button" onclick="hideButton()" value="Click Me" />If you click this button, it will disappear.</div>
</body>
</html>

Open in new window

0
 
LVL 21

Accepted Solution

by:
Tapan Pattanaik earned 250 total points
ID: 39283025
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39283051
This one is better because it loads an animated GIF that shows until the next page gets loaded.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>hideButton</title>
<script type="text/javascript">
<!--
function hideButton()
{
// hide div
var loadgif = "<img alt='x' src='progressbar_green.gif' />";

document.getElementById('theButton').innerHTML = loadgif;
// do other stuff here
}
// -->
</script>
</head>
<body>


<div id="theButton">
<input type="button" onclick="hideButton()" value="Click Me" />If you click this button, it will disappear.</div>
</body>
</html>

Open in new window

Right click on the image and download it.
green progress bar
0
 
LVL 5

Author Comment

by:knowlton
ID: 39283063
The button in question is a submit button.  the submit still needs to happen, but AFTER the button is hidden.

Right now it goes like this:

-click button
-process server stuff
-hide button

I need it to do this:
-click button
-hide button
-process server stuff

"hide button" must be atomic.  Nothing should process until the button is hidden.



<asp:Button ID="btnSubmit" runat="server" Text="Save & Submit -  Tom"  OnClick="btnSubmit_Click" />

Open in new window

0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39283079
I think for it to work properly, you need to put it in an 'onsubmit' in the <form> tag.  Not in an 'onclick' in the submit button.
0
 
LVL 5

Author Comment

by:knowlton
ID: 39283084
I think for it to work properly, you need to put it in an 'onsubmit' in the <form> tag.  Not in an 'onclick' in the submit button.

Please provide sample asp.net code showing what you mean.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39283110
I don't have asp.net, just general HTML and javascript.  Someone else will have to provide that for you.
0
 
LVL 5

Author Comment

by:knowlton
ID: 39283116
Okay.

What are some reasons why a client-side command to HIDE a button would be ignored when the OnClick for that same button fires?

<script type="text/javascript">

    $(document).ready(function () {

        $('input [id*="btnSubmit"]').click(function () {
            $(this).hide();
      //      alert("hide");
        });

    });                                      

</script>

Open in new window

0
 
LVL 5

Author Comment

by:knowlton
ID: 39283118
Here is the rendered HTML for the button control:

<<td>
                        <span id="ctl09_spnSubmitBtn" class="button">
                            <input type="submit" name="ctl09$btnSubmit" value="Save &amp; Submit -  Tom" id="ctl09_btnSubmit">
                           
                        </span>
                    </td>

Open in new window

0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 250 total points
ID: 39283140
When you click on a 'submit' button, the event goes to the form it seems and not that button.  Which is why the javascript needs to be in 'onsubmit' in the <form> tag.  In other questions, putting an 'onclick' in the 'submit' button never seemed to work.

I think that the same sequence is probably true in jQuery even though it is much less obvious which is why I'm not that fond of jQuery.  Try attaching your code to the form tag instead of the submit button.

Note that you might want to do any javascript or jQuery form validation Before you hide the submit button.
0
 
LVL 5

Author Comment

by:knowlton
ID: 39283149
Okay.

I'll see what I can do.
0
 
LVL 5

Author Comment

by:knowlton
ID: 39284673
I am still stuck.

Here is the current <form> tag.  How would I modify it?

<form method="post" action="Main.aspx?MenuId=534&amp;AcqCalculatorID=47-1" id="frmMain" enctype="multipart/form-data">
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39284886
With plain javascript, you would add an 'onsubmit'...

<form method="post" action="Main.aspx?MenuId=534&amp;AcqCalculatorID=47-1" id="frmMain" enctype="multipart/form-data" onsubmit="hideDiv();">

That is also where you would include a javascript validation.  If you have jQuery 'attached' to "frmMain", you may already have something that you can edit to hide the button.
0
 
LVL 5

Author Closing Comment

by:knowlton
ID: 39284899
This link ended-up being my final key to obtaining a solution:

http://encosia.com/disable-a-button-control-during-postback/

My button code in the markup looks like this now:

   <asp:Button ID="btnSubmit" UseSubmitBehavior="false" OnClientClick="this.disabled = true; this.value = 'Submitting...';" runat="server" Text="Save & Submit -  Tom" OnClick="btnSubmit_Click" />
                           

Notice:

UseSubmitBehavior="false"

in combination with this event:

OnClientClick="this.disabled = true; this.value = 'Submitting...';"
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39284984
Glad you got it working.  I'm curious what that looks like in the "View Source" that the browser actually sees.
0
 
LVL 5

Author Comment

by:knowlton
ID: 39285025
I'm curious what that looks like in the "View Source" that the browser actually sees.

It looks like this:

<input type="button" name="ctl09$btnSubmit" value="Save &amp; Submit -  Tom" onclick="this.disabled = true; this.value = 'Submitting...';__doPostBack('ctl09$btnSubmit','')" id="ctl09_btnSubmit">


This part:

__doPostBack('ctl09$btnSubmit','')

Gets added later on by ASP.NET -- which allows the submit button to be disabled AND still allows the postback to occur.  Whereas, normally if you disabled the button it would prevent the postback from happening.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39285042
Thanks for the details.  That makes sense that way with just the normal HTML and javascript to look at.
0
 
LVL 5

Author Comment

by:knowlton
ID: 39285052
no problemo : )

Thanks for your time spent on this!
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39285115
You're welcome.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

912 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now