CODEWITHSUNDEEP
javascriptasp.netbutton
coder
coder

Reputation: 13248

Asp.net button visibility using javascript

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


});

Upvotes: 2

Views: 44573

Answers (4)

coder
coder

Reputation: 13248

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>

Upvotes: 7

Eric
Eric

Reputation: 8078

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.

Upvotes: 2

CBRRacer
CBRRacer

Reputation: 4659

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>

Upvotes: 1

Graham Clark
Graham Clark

Reputation: 12966

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

Upvotes: 12

Related Questions