up vote 0 down vote favorite
1

Can someone please help me with this one:

I am reposting this just in case people have missed it and or to see if UI Sortables is something beyond most people - so I apologise in advance: After considerable research on the BigG, posting here there and everywhere I am still no nearer finding or getting an answer or even seeing something I can understand. OK I admit I am quite at home with php, css, html etc but js/Jquery ummmm that is all new to me -. so I am always looking for things/explanations that I can understand. Sadly for JQuery it seems that 99% of the tutorials etc. out there are written in a way that I cannot understand. Based on on posts in other forums etc I know I am not alone we are looking for a "dummies" Please do not say look at "help" items like http://jqueryui.com/demos/sortable/#event-update - http://jqueryui.com/demos/sortable/#method-toArray - http://jqueryui.com/demos/sortable/#method-serialize as they are not help items to people like me. As I have said in other posts they are "martian".

When using UISortables where - and how do I put "serialize" into the JQuery function?

I have 4 columns class '.columm' and each with a unique id - col1,col2,col3 & col4 -like this.

<div class="column" id="col1(to col4)">
Feeds Lorem ipsum dolor sit amet, consectetuer adipiscing elit Feeds Lorem ipsum dolor sit amet, consectetuer adipiscing elit

I can get the drag & drop bit to work I now need to put the "final" positions into a serialized array.

Here is my code:

$(".column").sortable({
        revert: true,
        scroll: true,
        appendTo: 'body',
        connectWith: '.column',
        delay:200,
        stop: function() {
        $(".column").each(function(){
        var test = $(this).attr('id');

    alert(test);

    //
        //var myArray = $(this).sortable("serialize");

        })
    },
    revertDuration:50000,
    scope:'scope',
    opacity: 0.80,
});

You will see alert test. I have done this to see if I can get the col id's into an alert and I can, but where do i put

.sortable( "serialize" , [options] ) and how do I do that for the 4 columns to create 1 single serialized array?

having done that how/where do you set the order when you next load the page? (OK yes, I do intent to "store" the serialized array)

Help please - thanks

link|flag
75% accept rate
Not an answer I know - but I reccommend that you install the jQueryify plugin for Firebug and also use console.log(whatever) instead of alert - these two things really helped me when I was learing / am debugging jQuery. You can also type jQuery directly into the console in Firebug to execute it. – calumbrodie May 24 at 13:46

1 Answer

up vote 0 down vote

I'm guessing you want to grab the serialized string when the sorting has stopped? Or maybe add a button to submit?

I posted a demo, and tried to cover both of those ways to do it, I hope it helps:

$(function() {
    $("#sortable").sortable({
        revert: true,
        scroll: true,
        appendTo: 'body',
        connectWith: '.column',
        delay:200,
        stop: function(){ $(':button').trigger('click') },
        revertDuration:50000,
        scope:'scope',
        opacity: 0.80,
    });

    $(':button').click(function(){
        var string = $("#sortable").sortable("serialize");
        alert( string);
    })

});
link|flag

Your Answer

 
get an OpenID
or
never shown

Not the answer you're looking for? Browse other questions tagged or ask your own question.