CODEWITHSUNDEEP
javascriptjqueryasp.net
Iswar
Iswar

Reputation: 2301

Call jQuery function on button click in asp.net

Using asp.net I am trying to call jQuery function from a server side program. In my form I've a button called clear image and a browse option. when I browse, then image get inserted in the image field. When page is loaded the clear image is invisible. When I browse the photo then the Clear image button should be visible and the browse option should be invisible. and when i click the clear image button then the browse option should be visible and clear image button itself should be invisible. Code is as follows

       <div id="PhotoTransport" style="float: left; width: 40%; padding-left: 5px;">
                <img id="imgEventPhoto" width="120" height="90" class="IntGalHLNoBrdr" alt='Sorry! No image found.'
                    src='' runat="server" />
            </div>
   <div id="divPhotoUpload" 
   style="float: left; width: 50%;">
                <input id="fupEventPhoto" type="file" size="45" name="PhotoUploadedToUpload" class="imguploader validate[required]"
                    onchange="return validatePhotographToUploadPhoto();" />
                <img id="PhotoLoading" alt="Loading..." src="<%=ResolveClientUrl("~/Images/loading.gif")%>"style="display: none;" />
            </div>                
            <div id="divPhotoThumb" style="font-size: 10px; float: left;">
                <asp:Button ID="btnClearPhoto" runat="server" Text="Clear Image" CssClass="SubmitButton"
                    OnClick="btnClearPhoto_Click" />
            </div>

I've a jQuery function as below:

function ShowThumbPhoto() {           
        $('#divPhotoThumb').show();
        $('[#divPhotoUpload').hide();
    };
    function HideThumbPhoto() {
        $('[id$=divPhotoThumb]').hide();
        $('[id$=divPhotoUpload]').show();
        $('[id$=btnClearPhoto]').hide();
    };

I also have One server side function as below

 private void CheckImage()
{
    if (Session["ucPhotoUploaderUploadedImagePhoto"] != null)
    {
        this.RegisterJS("ShowThumbPhoto();");

    }
    else
    {
        this.RegisterJS("HideThumbPhoto();");

    }
}

When I am trying to call Checkimage() on click event of btnClearPhoto. Here I am storing photo in Session["ucPhotoUploaderUploadedImagePhoto"]. the check image function is called on every postback. every time it is executing well.

My Problem is that Despite of calling checkimage() on click event of btnClearPhoto. the code of click event of btnClearPhoto is as follows:

protected void btnClearPhoto_Click(object sender, EventArgs e)
    {
        Session["ucPhotoUploaderUploadedImagePhoto"] = null;            
        CheckImage();
    }

My problem is jQuery function is called from checkimage() but in client side the jQuery function is not called. meaning I am not able to full fill my requirement. I have tried this piece of code also but it's not working

$("[id$=btnClearPhoto]").click(function(e){
    e.HideThumbPhoto();
});

Upvotes: 1

Views: 13449

Answers (1)

Taimur Khan
Taimur Khan

Reputation: 531

$('[#divPhotoUpload').hide(); it think there is problem with this selector, removing [ will correct it. Also in asp.net id's of elements get changed depending on their parent container id, so chnage as follows whereever you have referring to your asp.net controls in javascript. 

<%=btnClearPhoto.ClientID%> e.g
$("<%=btnClearPhoto.ClientID%>").click(function(e){
      e.HideThumbPhoto();
      });

Upvotes: 1

Related Questions