Avoiding JavaScript and CSS stylesheet caching problems in sharepoint

Good news - Our application got new branding in this release, which changed my perception as a developer to see SharePoint applications. SharePoint is not only about C# and CAML other things like JS, CSS and HTML also plays major role in your application.

We mainly work on the business logic of the application but this time got chance to work with UI designers, and Changing look and feel of SharePoint is not a easy task as lots of tweaking is needed to overwrite existing styles dynamically applied by the SharePoint.

So let me introduce you the structure of our application, All JS, Stylesheets and images are placed inside the _layouts [14 hive\Layouts] folder. 
UI designer made some changes to apply branding on homepage and gave update files to me. I have merged all the files properly and deployed the application on the server. but changes are not reflected and UI is breaking. Called my fellow UI designer showed the issue. She performed hard refresh (CTRL + F5) this resolved all the issues. 

Root cause is the Browser caching for js and css files.

This raised another question in my mind I can perform hard refresh but in Production we cannot tell every user to perform hard refresh.

So here is the solution to above problem...

To avoid browser caching a file even after it is updated, simple change the linking URL format

<link href="/_LAYOUTS/ProjectName/mystyles.css" rel="stylesheet" type="text/css">link>

<script src="/_LAYOUTS/ProjectName/myscript.js" type="text/javascript"> script>

To:

<link href="/_LAYOUTS/ProjectName/mystyles.css?rev=<build-version>" rel="stylesheet" type="text/css">link>

<script src="/_LAYOUTS/ProjectName/myscript.js?rev=<random number>" type="text/javascript"> script>

Update this numbers whenever your file is updated, to avoid facing the same issue of not seeing updated CSS and JavaScript files by default.

Reference link: http://www.sharepointnutsandbolts.com/2011/11/avoiding-bugs-from-cached-javascript.html

ASP:Button OnClientClick and OnClick not working

Sometimes you face really strange scenarios in Development, I faced a very strange issue about Event handlers while development of simple application. It proves that its not always Developers fault for coding defects.

I was creating a Search module in our application where I want call OnClientClick event for validation and if the validation returns true then perform search on DataSource using OnClick event of the Search button.

I have created a JavaScript function for validation and called that method in OnClientClick event

function ValidateSearch()

{

    var flag = true;

    // JavaScript code for validation

    return flag;

}

following is the ASP.Net code for Search button.

<asp:Button ID="keywordSearch" runat="server" Text="Search" TabIndex="1" OnClick="keywordSearch_Click" OnClientClick="ValidateSearch()" />

With above code it should call ValidateSearch() method first on click of Search button and based on the return value, it should call the Server-Side event.

Everything is OK, but above code didn't work, [Don't give up in such cases] 
I tried some other alternative like...

1) <asp:Button ID="keywordSearch" runat="server" Text="Search" TabIndex="1" OnClick="keywordSearch_Click" OnClientClick="javascript:return ValidateSearch();" />

2) <asp:Button ID="keywordSearch" runat="server" Text="Search" TabIndex="1" OnClick="keywordSearch_Click" OnClientClick="return ValidateSearch();" />

but still no Success.

Solution:
We have to explicitly return the result after checking the functions return value. 

<asp:Button ID="keywordSearch" runat="server" Text="Search" TabIndex="1" OnClick="keywordSearch_Click" OnClientClick="if (!ValidateSearch()) { return false;};" />

Hope this helps you.