title: Call jQuery function on button click in asp.net
body: <p>Using asp.net I am trying to call jQuery function from a server side program. In my form I've a button called <code>clear image</code> 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</p>
  
  <pre><code>       &lt;div id="PhotoTransport" style="float: left; width: 40%; padding-left: 5px;"&gt;
                  &lt;img id="imgEventPhoto" width="120" height="90" class="IntGalHLNoBrdr" alt='Sorry! No image found.'
                      src='' runat="server" /&gt;
              &lt;/div&gt;
     &lt;div id="divPhotoUpload" 
     style="float: left; width: 50%;"&gt;
                  &lt;input id="fupEventPhoto" type="file" size="45" name="PhotoUploadedToUpload" class="imguploader validate[required]"
                      onchange="return validatePhotographToUploadPhoto();" /&gt;
                  &lt;img id="PhotoLoading" alt="Loading..." src="&lt;%=ResolveClientUrl("~/Images/loading.gif")%&gt;"style="display: none;" /&gt;
              &lt;/div&gt;                
              &lt;div id="divPhotoThumb" style="font-size: 10px; float: left;"&gt;
                  &lt;asp:Button ID="btnClearPhoto" runat="server" Text="Clear Image" CssClass="SubmitButton"
                      OnClick="btnClearPhoto_Click" /&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>I've a jQuery function as below:</p>
  
  <pre><code>function ShowThumbPhoto() {           
          $('#divPhotoThumb').show();
          $('[#divPhotoUpload').hide();
      };
      function HideThumbPhoto() {
          $('[id$=divPhotoThumb]').hide();
          $('[id$=divPhotoUpload]').show();
          $('[id$=btnClearPhoto]').hide();
      };     
  </code></pre>
  
  <p>I also have One server side function as below</p>
  
  <pre><code> private void CheckImage()
  {
      if (Session["ucPhotoUploaderUploadedImagePhoto"] != null)
      {
          this.RegisterJS("ShowThumbPhoto();");
  
      }
      else
      {
          this.RegisterJS("HideThumbPhoto();");
  
      }
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>My Problem is that Despite of calling checkimage() on click event of btnClearPhoto. the code of click event of btnClearPhoto is as follows:</p>
  
  <pre><code>protected void btnClearPhoto_Click(object sender, EventArgs e)
      {
          Session["ucPhotoUploaderUploadedImagePhoto"] = null;            
          CheckImage();
      }
  </code></pre>
  
  <p>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</p>
  
  <pre><code>$("[id$=btnClearPhoto]").click(function(e){
      e.HideThumbPhoto();
  });
  </code></pre>