History.js reloads page inside the tab when clicking on jquery tabs

[kumarngrjn]

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>