In order to make our application SPA, we have used a third party library Page.js along with ASP.NET MVC.
Page.js Reference: https://visionmedia.github.io/page.js/
We perform basically two tasks by making use of Page.js library.
- First, we hit some controller/action (partial view) on MVC application & then inject the returned HTML into DOM.
- Secondly, at the same time, we change the URL of the browser using this library.
All the Partial Views which we are fetching through Page.js also has the reference to <script/> tag. So whenever we inject the returned HTML into DOM, we start seeing the deprecation issue in browser's console tab.
[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
Application Flow:
Below picture explains the flow of our application.
Currently, all the child partial views are also having their own script & that script gets executed as soon as they are injected in DOM.
Attempted approach as a solution to fix this Deprecation issue:
On each partial view(not the child one), that is injected via Page.js library, we are writing below code to load all the dependencies asynchronously. And in the callback function (once all the dependencies are loaded), we are executing the page-specific javascript code like below.
HTML of the Page that is injected into DOM via Ajax (i.e. Page Partial View):
<div>
......
......
</div>
<!-- This part causes issue -->
<!--<script type="application/javascript" src="/script1.js"></script>
<script type="application/javascript" src="/script2.js"></script>-->
<script>
$(function () {
$.getMultiScripts(["@scriptFile1", "@scriptFile2"]).done(function () {
onPageLoad();
});
function onPageLoad() {
// 1. Defer kendo scripts
@Html.Kendo().DeferredScripts(false);
// 2. Initialize partial view 1
partialView1.init();
// 2. Initialize partial view 2
partialView2.init();
// 3. Initialize partial view 3
partialView3.init();
}
});
</script>
Important: $.getMultipleScripts was taken from here - How to include multiple js files using jQuery $.getScript() method
The script at the end of child Partial View looks like below:
<script>
window.partialView1 = (function() {
var init = function() {
// 1. Initialize partial control
tabControl.initControl();
// 2. Initialize partial control
common.bindEvents();
};
return {
init: init
};
})();
</script>
Note: For this, we have also stopped child partial views to execute the javascript code as soon as they are loaded. In fact, we are now just providing the javascript definitions (in the form of module pattern) in partial views & controlling the whole execution from the main page (parent partial view).
I know that this is not a good approach. We could have used some frontend framework. But at this stage, we can't take that decision to make the entire framework shift.
From this post, I just wanted to know, whether this approach is good or there could be a better approach to resolve this issue. If yes, please share.
