My boss order to convert a website to single page application.
The Migrations from jQuery to React/Vuejs required a lot of refactoring in both frontends and backends. so we decided to make single page application using jQuery.
I have do the following:
1- I divided the document like this
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="navbar">
</div>
<div id = "sidebar">
</div>
<div >
<ul class="nav nav-tabs mainTabs" id="myTab">
<li class="active "><a href="#home" class="backgroundRed">Inbox </a>
</li>
</ul>
<div id="root">
</div>
</div>
</body>
</html>
You can look for this example to get more info about tabs design.
2- I converted all project files to js6 module.
3- I created js file for router and to return the current container.
function getCurrentContainer(){
var path = document.location.pathname.replace('/','_');
return $('#'+path)
}
4- When the user click the link, I use ajax to bring the content only, then I append it to new tab.
$(document).on('click','a[data="no-reload"]',function(){
var path = $(this).attr('href');
if (!$('#'+path.replace('/','_')).length){
$.ajax(..) // bring content from server and make new tab
}
//function to show content of other tab and hide content of current tab
// change the document title, url and update history
});
5- I replaced all $(document) selectors by $(currentContainer).
import {getCurrentContainer} from './my_router.js'
const $container = getCurrentContainer();
$($container). ... // instead of $(document). ...
The problem is:
when I select input, $('[input[name=id]'), it will select all ids inputs of hidden tabs.
I can solve it by $(currentContainer).find('[input[name=id]') but it take long time to refactor all operations.
Can I reinitialize the $, to change the root to currentContainer instead of document,
$ = ? //make currentContainer selector as root