History.js reloads page inside the tab when clicking on jquery tabs
kumarngrjn opened this issue · comments
I am using jquery mobile along with history.js for my SPA. I require history.js to change my url to remove some url params
Eg : a.com/?id=123&page=rep#rep_page
i use history.js to change this to a.com/#rep_page - works fine and the user is rep_page
This is my history.js redirect function
function redirectUser() {
History.pushState(null,null,"#repo_page");
}
The issue occurs when i click on other page which has tabs.
Eg a.com/#tabs_page contains 3 tabs . I have the tab loading function inside
$(document).ready(function() {
$("#test_tabs").tabs();
});
The page loads fine for the first tab but when i click on the second or the third tab, the tab loads and then the whole page is reloded and now i have a whole page inside the tab i clicked.
So my inital page structure is
<div id="container">
<div id="repo_page">--Content--</div>
<div id="tabs_page">-- Content --</div>
</div>
The new page structure after clicking on the tabs is
<div id="container">
<div id="repo_page">--Content--</div>
<div id="tabs_page">-- Content --
<div id="container">
<div id="repo_page">--Content--</div>
<div id="tabs_page">-- Content --</div>
</div>
</div>
</div>