jQuery - two columns - sortable and cookie?

Question

Hello everybody!

On my page I have two kind of columns with several conainers in it. Now I want to be able to sort these containers in these two columns. This was not really a problem. I can sort my containers in the two colums and toggle it on or off. But now my problem: I want to sort my containers on reload. I want to sort and toggle them the same order like before reload. So I need a cookie. But I have no idea how to do this.

Please have a look at my code:

    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"&gt;&lt;/script&gt;
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"&gt;&lt;/script&gt;
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"&gt;&lt;/script&gt;

    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.sortable.js"&gt;&lt;/script&gt;

    <style>
        body{
            font-size:12px;
            font-family:helvetica,verdana,arial,sans-serif;
        }

        h3{
            margin:0;
            padding-top:5px;
            padding-bottom:5px;
            padding-left:5px;
            font-size:12px;
            font-weight:bold;
        }

        #box-left{
            width:300px;
            float:left;
        }

        #box-right{
            width:300px;
            float:left;
        }

        .box-border{
            border:1px solid #333;
            margin-left:5px;
            margin-right:5px;
            margin-top:10px;
        }

        .container-header{
            background:#efefef;
            cursor:move;
        }

        .container-header span{
            cursor:pointer;
            float:right;
            margin-top:-20px;
            margin-right:5px;
            text-decoration:underline;
        }
    </style>


    <script type="text/javascript">

        $(document).ready(function() {
            $(".sortable-column").sortable({
                connectWith: '.sortable-column'
            });
        });

        function toggleContent(container_id){
            $('#' + container_id + ' .container-content').toggle();
        }

    </script>



    <div id="box-left" class="sortable-column">

        <div id="container1" class="box-border">
            <div class="container-header">
                <h3>Box Nummer 1</h3>
                <span onclick="toggleContent('container1')">toggle</span>
            </div>

            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
            </div>
        </div>
        <div id="container2" class="box-border">
            <div class="container-header">
                <h3>Box Nummer 2</h3>
                <span onclick="toggleContent('container2')">toggle</span>

            </div>
            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
            </div>
        </div>
        <div id="container3" class="box-border">
            <div class="container-header">
                <h3>Box Nummer 3</h3>

                <span onclick="toggleContent('container3')">toggle</span>
            </div>
            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
            </div>
        </div>
        <div id="container4" class="box-border">
            <div class="container-header">

                <h3>Box Nummer 4</h3>
                <span onclick="toggleContent('container4')">toggle</span>
            </div>
            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
            </div>
        </div>

    </div>
    <div id="box-right" class="sortable-column">

        <div id="container5" class="box-border">
            <div class="container-header">
                <h3>Box Nummer 5</h3>
                <span onclick="toggleContent('container5')">toggle</span>
            </div>

            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
            </div>
        </div>
        <div id="container6" class="box-border">
            <div class="container-header">
                <h3>Box Nummer 6</h3>
                <span onclick="toggleContent('container6')">toggle</span>

            </div>
            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
            </div>
        </div>
        <div id="container7" class="box-border">
            <div class="container-header">
                <h3>Box Nummer 7</h3>

                <span onclick="toggleContent('container7')">toggle</span>
            </div>
            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
            </div>
        </div>
        <div id="container8" class="box-border">
            <div class="container-header">

                <h3>Box Nummer 8</h3>
                <span onclick="toggleContent('container8')">toggle</span>
            </div>
            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
            </div>
        </div>

        <div id="container9" class="box-border">
            <div class="container-header">
                <h3>Box Nummer 9</h3>
                <span onclick="toggleContent('container9')">toggle</span>
            </div>
            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>

            </div>
        </div>

    </div>

How can I set the cookie? I don't know much about javascript, sry.

Answer 1

If you already use jQuery, take a look at the cookie plugin:

http://plugins.jquery.com/project/cookie

I used it in a project, and it was very useful.

And of course, to see if it worked, you can use the cookie plugin for firebug, Firecookie

Answer 2

Hello again, Now I am trying to use the jQuery Plugin. My part looks like this:

$(document).ready(function() {
$(".sortable-column").sortable({
    connectWith: '.sortable-column',
    update: function(event, ui) {
        // This will trigger after a sort is completed
        var ordering = "";
        var $columns = $(".sortable-column");
        $columns.each(function() {
            alert($columns.index(this));
            ordering += this.id + "=" + $columns.index(this) + ";";
        });
        $.cookie("ordering", ordering);
    }
});

var ordering = $.cookie("ordering");
var orderings = ordering.split(";");
$.each(orderings, function(index, ordering) {
    alert("order my container");
});

});

Is this right now? But what do I have to write instead of alert("order my container"); exactly? I need to sort my containers in the right order.

BTW: For this code I used another Stack Overflow Thread