Solved

hide button IMMEDIATELY

Posted on 2013-06-27
19
344 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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Comment Utility
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Comment Utility
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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Comment Utility
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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Comment Utility
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
Comment Utility
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 250 total points
Comment Utility
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
Comment Utility
Okay.

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

Author Comment

by:knowlton
Comment Utility
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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Comment Utility
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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Comment Utility
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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Comment Utility
no problemo : )

Thanks for your time spent on this!
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
You're welcome.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
This article discusses how to create an extensible mechanism for linked drop downs.
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

771 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

10 Experts available now in Live!

Get 1:1 Help Now