0

2nd question here and new to coding. I'm trying to change the url when I change the materialize css tabs, using jquery but it isnt working. The html is:

    <div class="row">
                <div class="col s12">
                    <ul class="tabs tabs-transparent">
                        <li class="tab col s6 m6 l6 blue z-depth-0"><a class="waves-effect waves-blue-darken-2" href="#favorites">FAVORITES</a></li>
                        <li class="tab col s6 m6 l6 card-panel blue z-depth-0"><a class="active  waves-effect waves-blue-darken-3" href="#recommended">RECOMMENDED</a></li>
                    </ul>
                </div>
        </div>
    </header>   
    <div class="containter">
        <section class="col s12 card-panel white content z-depth-0" id= "favorites">
                <ul class="collection fixed"> (A LOT OF LI ELEMENTS)
    <section class="col s12 card-panel white content z-depth-0" id="recommended">
    <!--STARTS LIST-->
            <ul class="collection">(AGAIN A LOT OF LI ELEMENTS)

And the Jquery:

 $(function() {
   var $content = $('.content');
   $(document).on('click', '.tabs', function() {
     var href = $(this).attr('href')
     window.history.pushState({$content}, '', href)
     $content.load(href)
     return false;
   });
});

On console it says: 

Uncaught DOMException: Failed to execute 'pushState' on 'History': HTMLElement object could not be cloned.
at HTMLUListElement.<anonymous> (file:///C:/Users/Carla/Desktop/streema-estatica/js/functions.js:13:22)
at HTMLDocument.dispatch (file:///C:/Users/Carla/Desktop/streema-estatica/js/jquery-3.2.1.min.js:3:10316)
at HTMLDocument.q.handle (file:///C:/Users/Carla/Desktop/streema-estatica/js/jquery-3.2.1.min.js:3:8343)

If I take out the $content var in the pushState, the console says:

jquery-3.2.1.min.js:4 Uncaught TypeError: Cannot read property 'indexOf' of undefined
at r.fn.init.r.fn.load (jquery-3.2.1.min.js:4)
at HTMLUListElement.<anonymous> (functions.js:14)
at HTMLDocument.dispatch (jquery-3.2.1.min.js:3)
at HTMLDocument.q.handle (jquery-3.2.1.min.js:3)

Thank you!

parth patel
  • 131
  • 7
sophiet
  • 13
  • 7
  • Possible duplicate of [Failed to execute 'pushState' on 'History' error when using window.history.pushState function](https://stackoverflow.com/questions/24425885/failed-to-execute-pushstate-on-history-error-when-using-window-history-pushs) – tao Nov 26 '17 at 13:46
  • @AndreiGheorghiu Hi, though I agree that it's possible that the problem is the same, I still dont understand how to approach a solution. Currently reading on localStorage and sessionStorage but maybe there's another way this can be done? Thank you! – sophiet Nov 26 '17 at 14:16
  • You're trying to push jQuery objects to `History` and they are larger than `640k`. You need to push a `stateObject`, not a jQuery instance. Read more on `stateObject`s [here](https://developer.mozilla.org/en-US/docs/Web/API/History_API). – tao Nov 26 '17 at 14:18
  • 1
    @AndreiGheorghiu Thank you! – sophiet Nov 26 '17 at 14:38

0 Answers0