LobiPanel does not load panel positions from localStorage

[nebelkuchen]

Hello everybody,

Can anyone tell me how saving panel positions (in localStorage) with LobiPanel's stateful option exactly works?

The documentation says one must use the stateful option in order to save the position among it's siblings and it will apply them when you reload the browser.

Unfortunately when I do a reload on my site, the panel positions are always back to it's initial state.

It doesn't work, even though LobiPanel successfully adds parent keys and values to the Local Storage, e.g.: lobipanel_parent_BKlPfuXKuW:"{"panel-2":0,"panel-3":1,"panel-1":2}" lobipanel_parent_KyCQKms0ir:"{"panel-1":0,"panel-2":1,"panel-3":2}" lobipanel_parent_lDSURxUHh2:"{"LwmEvZSUiF":0,"vpT9FMcurP":1,"awfVUjhLzE":2}" lobipanel_parent_lk5lsV9Y3k:"{"panel-6":0,"panel-5":1,"panel-4":2}"

So the positions are actually saved to Local Storage but are somehow not applied when reloading.

This is how my HTML code (Bootstrap v3.3.5) looks like:

<div id="lobipanel-multiple lobipanel">
    <h3>Multiple panels with drag & drop</h3>
    <p>Drag panels by clicking on the headers</p>
    <div class="bs-example">
        <div class="row">
            <div class="col-md-6 panel">
                <div class="panel panel-default" data-index="0" data-inner-id="panel-1">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <h4>Panel title 1</h4>
                        </div>
                    </div>
                    <div class="panel-body">
                    Panel body 1
                    </div>
                </div>
                <div class="panel panel-warning" data-index="1" data-inner-id="panel-2">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <h4>Panel title 2</h4>
                        </div>
                    </div>
                    <div class="panel-body">
                    Panel body 2
                    </div>
                </div>
                <div class="panel panel-danger" data-index="2" data-inner-id="panel-3">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <h4>Panel title 3</h4>
                        </div>
                    </div>
                    <div class="panel-body">
                    Panel body 3
                    </div>
                </div>
            </div>
            <div class="col-md-6 panel">
                <div class="panel panel-success" data-index="3" data-inner-id="panel-4">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <h4>Panel title 4</h4>
                        </div>
                    </div>
                    <div class="panel-body">
                    Panel body 4
                    </div>
                </div>
                <div class="panel panel-info" data-index="4" data-inner-id="panel-5">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <h4>Panel title 5</h4>
                        </div>
                    </div>
                    <div class="panel-body">
                    Panel body 5
                    </div>
                </div>
               <div class="panel panel-danger" data-index="5" data-inner-id="panel-6">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <h4>Panel title 6</h4>
                        </div>
                    </div>
                    <div class="panel-body">
                    Panel body 6
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function(){
        $('.panel').lobiPanel({
            sortable: true,
            stateful: true
        });
    });
</script>

Thank you in advance.