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"; 
    });


});

Answer 1

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).