Asp.net button visibility using javascript

Question

I am using a simple Asp.Net button and trying to hide it on page load event and I want to show it back after doing some client side script.

I have tried out by this way document.getElementById('<%=Button1.ClientID %>').style.visibility = "visible"; and its not showing me up.

So how do I enable it back?

Page_Load:

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 Button1.Visible = False
End Sub

This is my script:

<script type="text/javascript">
    // Convert divs to queue widgets when the DOM is ready
    $(function () {
        $("#uploader").plupload({
            // General settings
            runtimes: 'gears,flash,silverlight,browserplus,html5',
            url: 'Final.aspx',
            max_file_size: '10mb',
            max_file_count: 25,
            chunk_size: '1mb',
            unique_names: true,

        // Resize images on clientside if we can
        //                    resize: { width: 320, height: 240, quality: 90 },

        // Specify what files to browse for
        filters: [
        { title: "Image files", extensions: "jpg,gif,png" },
        { title: "Zip files", extensions: "zip" }
    ],

        // Flash settings
        flash_swf_url: 'js/plupload.flash.swf',

        // Silverlight settings
        silverlight_xap_url: 'js/plupload.silverlight.xap'
    });


    // Client side form validation
    $('form').submit(function (e) {
        var uploader = $('#uploader').plupload('getUploader');

        // Files in queue upload them first
        if (uploader.files.length > 0) {
            // When all files are uploaded submit form
            uploader.bind('StateChanged', function () {
                if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                    $('form')[0].submit();
                }
            });

            uploader.start();
        }
        else
            alert('You must at least upload one file.');

        return false;
    });
    var uploader = $('#uploader').plupload('getUploader');
    uploader.bind('FileUploaded', function (up, file, res) {
        $('#showfilelist').append("<div id=" + file.id + " class='thumb'><a href='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' target='_blank' rel='gallery'><img src='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' width='50' height='50'/></a></div>");
        $('#Maintabs').tabs('enable', 1);
        document.getElementById('<%=Button1.ClientID %>').style.visibility = "visible"; 
    });


});

Graham Clark · Accepted Answer · 2011-11-03 16:09:12Z

12

If you set a control's Visible property to false (on the server side), the control will not be rendered to the client, so there'll be nothing there to change the style of.

If you want to hide it on the server but still render it to the client, set the visibility CSS property (via the Style property), or assign the element a CSS class that will hide it (via the CssClass property).

answered Nov 3, 2011 at 16:09

Graham Clark

13k8 gold badges56 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

coder Over a year ago

Thanks for pointing me out in the right way and you have solved my problem!

coder · Accepted Answer · 2011-11-03 16:13:23Z

7

Thanks for all your suggestions and I have set its visibility as below

<script type="text/javascript">
$(function () {
document.getElementById('<%=Button1.ClientID %>').style.visibility = "hidden";
}); 
<script>

answered Nov 3, 2011 at 16:13

coder

13.2k32 gold badges116 silver badges221 bronze badges

1 Comment

coder Over a year ago

Thanks Eric and I forgot this little point and struggling for it!

Eric · Accepted Answer · 2011-11-03 16:12:18Z

2

Why can't you use the display attribute instead?

document.getElementById('<%=Button1.ClientID %>').style.display= '';
document.getElementById('<%=Button1.ClientID %>').style.display= 'none';

This way, you're not touching the server attributes, but the client ones. You may have to tweak the above code a bit.

answered Nov 3, 2011 at 16:12

Eric

8,10819 gold badges102 silver badges131 bronze badges

Comments

CBRRacer · Accepted Answer · 2011-11-03 16:11:37Z

1

If the element is always going to be hidden on page load then I would just set a default class or style that sets display: none; and then toggle that with javascript

so in the HTML for you button

<asp:button runate="server" id="Button1" CssClass="displayNone"></asp:button>

<script>
  $("#Button1").removeClass(displayNone");
</script>

<style>
  .displayNone { display: none; }
</style>

answered Nov 3, 2011 at 16:11

CBRRacer

4,6791 gold badge26 silver badges27 bronze badges

Collectives™ on Stack Overflow

Asp.net button visibility using javascript

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related