Question

I am trying to clear images using external jquery file but it’s not showing me even the alert.

Here are the images inside my div which I need to be cleared.

 $('#<%=thumbs.ClientId%>').append("<img class='LoadclickImage' align='left' style='height:48px;width:75px;' src='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "' width='75' height='50' rel='group1' href='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "' >");

This is my external JS file:

 self.ClearAll_button.click(function (e) {
     $('#<%=thumbs.ClientId%> img').hide;
     alert('You have cleared everything!');
     e.preventDefault(); 
     }

Answer 1

<%=thumbs.ClientId%> makes very little sense in external javascript files. That’s an ASP.NET server side tag that you could only use in ASPX/ASCX WebForms.

One possibility is to define global javascript variable in your ASPX page:

<script type="text/javascript">
    var thumbsId = '<%=thumbs.ClientId%>';
</script>

and then in your separate js file use this variable:

self.ClearAll_button.click(function (e) {
    $('#' + thumbsId + ' img').hide();
    alert('You have cleared everything!');
    e.preventDefault(); 
}

Another possibility is to use a class selector instead of an id selector. And yet another possibility if you are running on ASP.NET 4.0 is to use predictable ids thanks to the ClientIDMode setting.