Using asp 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();
});

Using asp 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();
});

• javascript
• jquery
• asp

• $('[#divPhotoUpload').hide(); what kind of selector is that? Also in asp id's of elements get changed depending on their parent container id. – Taimur Khan Commented Jul 23, 2013 at 4:52
• sir, In other Instance it is working as per the requirement. I have written this to hide the div by its id. – Iswar Commented Jul 23, 2013 at 5:03
• use $("#<%=btnClearPhoto.ClientID %>") this for select your button Id. – Manish Sharma Commented Jul 23, 2013 at 5:24

1 Answer 1

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

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