Question

I’m using jQuery UI to change the order.

In my application I need to add random number of statements one after the other, then reorder them (if I wish to) and then save to the server.

Adding statements as portlets is ok, but how would I save the positions?

Thanks
Macha

Answer 1

If by jQuery / Portlets you are indeed using http://host.sonspring.com/portlets/, then you can loop through at any point and determine what position each portlet content is in:

jQuery:

$('.portlet_content').each(function(i, v){
    //Get the ID of the first P tag of each portlet content container
    var portlet_content_id = $(this).find('p:first').attr('id');
    //Show content ID and position index in Firebug console
    console.log(portlet_content_id + ' is in Position ' + i); //content id is 1-based and postion is zero-based.
});

HTML (from the jQuery Portlets example, but I added IDs to the P tags – content_1, content_2 …):

<table cellspacing="0" id="columns">
    <tr>
        <td>

            <div class="portlet">
                <div class="portlet_topper">
                    1. <a href="#" class="toggle">Toggle</a>
                </div>
                <div class="portlet_content">
                    <p id="content_1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p>
                </div>

            </div>
            <div class="portlet">
                <div class="portlet_topper">
                    2. <a href="#" class="toggle">Toggle</a>
                </div>
                <div class="portlet_content">
                    <p id="content_2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p>

                </div>
            </div>
            <div class="portlet">
                <div class="portlet_topper">
                    3. <a href="#" class="toggle">Toggle</a>
                </div>
                <div class="portlet_content">
                    <p id="content_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p>

                </div>
            </div>
        </td>
        <td>
            <div class="portlet">
                <div class="portlet_topper">
                    4. <a href="#" class="toggle">Toggle</a>
                </div>

                <div class="portlet_content">
                    <p id="content_4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p>
                </div>
            </div>
            <div class="portlet">
                <div class="portlet_topper">
                    5. <a href="#" class="toggle">Toggle</a>

                </div>
                <div class="portlet_content">
                    <p id="content_5">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p>
                </div>
            </div>
            <div class="portlet">
                <div class="portlet_topper">
                    6. <a href="#" class="toggle">Toggle</a>

                </div>
                <div class="portlet_content">
                    <p id="content_6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p>
                </div>
            </div>
        </td>
        <td>
            <div class="portlet">

                <div class="portlet_topper">
                    7. <a href="#" class="toggle">Toggle</a>
                </div>
                <div class="portlet_content">
                    <p id="content_7">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p>
                </div>
            </div>

            <div class="portlet">
                <div class="portlet_topper">
                    8. <a href="#" class="toggle">Toggle</a>
                </div>
                <div class="portlet_content">
                    <p id="content_8">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p>
                </div>

            </div>
            <div class="portlet">
                <div class="portlet_topper">
                    9. <a href="#" class="toggle">Toggle</a>
                </div>
                <div class="portlet_content">
                    <p id="content_9">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p>

                </div>
            </div>
        </td>
    </tr>
</table><!-- /#columns -->