SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Mootools:1, Me:0. Help with sortables

    Hey everyone... any help that anyone could provide... or at least a direction to look into would be much welcomed.

    I seem to keep coming back to this problem, just after I thought I had it figured out.

    Working with Sortables in mootools.

    I have some basic nested lists.. such as...

    HTML Code:
    <ul id="cat0">
       <li>test1</li>
       <ul id="cat1">
            <li>sub 1</li>
            <li>sub 2</li>
       </ul>
       <li>test2</li>
        <ul id="cat2">
            <li>sub 3</li>
            <li>sub 4</li>
       </ul>
       <li>test3</li>
    </ul>
    Pretty straight forward.
    Then I have the javascript to set them up as sortable lists...

    Code:
    var z=$$('ul[id^=cat]');	
    for(i=0;i<z.length;i++) {				
    	var mySortables = new Sortables(z[i],{
    		clone: true,	
    		revert: true,
    		handle:'div.rowGreyInner',
    		opacity: 0,
    		onComplete: function(){
    		      var myString = mySortables.serialize(); 
    		      alert (myString);
    		} 							
    	});
     }
    With this set-up, each list becomes sortable within itself... perfect... except when the onComplete gets called.... myString ALWAYS returns the same list, no matter what list I am actually sorting...
    For example, in the above example, If I move "sub2" to go above "sub1", it will return results on "sub3" and "sub4".

    Im assuming it has something to do with me assigning all the sortable objects to the same array, but I cant figure out how to have a new name each iteration... I tried "var mySortables[i] = new Sortables....." but that just starts to give me errors.

    Anyone have any Tylenol for me? Or a shot of Crown?

    thanks!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    If you want an array then you'll have to do it like this:

    Code javascript:
    var mySortables = [];
    for (...) {
        mySortables[i] = new Sortables(z[i], {
            ...
        });
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. That works, but it doesnt seem to be fixing the problem I am having.

    I still get the same output when I serialize the list no matter what list Im actually in.

    I have modified the creation of lists to....

    Code:
    var z=$$('ul[id^=cat]');
    var mySortables = [];	
    for(i=0;i<z.length;i++) {
    	 mySortables[i] = new Sortables(z[i],{
    		clone: true,	
    		revert: true,
    		handle:'div.rowGreyInner',
    		opacity: 0,
    		onComplete: function(){
    			 var myString = mySortables[i].serialize(); 
    		         alert (myString);
    		} 
    	});
     }

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I see what's happening. When the onComplete occurs it's using the last value of i, whereas you need it to remember the value of i that was being used.

    Code javascript:
    var z=$$('ul[id^=cat]');
    var mySortables = [];	
    for(i=0;i<z.length;i++) {
    	 mySortables[i] = new Sortables(z[i],{
    		clone: true,	
    		revert: true,
    		handle:'div.rowGreyInner',
    		opacity: 0,
    		onComplete: function(i) {
    			return function () {
    				var myString = mySortables[i].serialize(); 
    				alert (myString);
    			}
    		}(i)
    	});
    }

    Now the onComplete function will be able to remember the value of i, and properly use it.
    Last edited by paul_wilkins; Nov 18, 2008 at 15:15.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works perfectly. Thanks you very much for the help.

    Just for my own knowledge though, and of course if you have a free moment later... (its one thing to have something work, its a whole other matter understanding how it works..)

    Is this what is happening?

    the onComplete function is making a function that makes a function with the current value of "i"?

    Also, what does the extra (i) at the end of it all do? I notice the whole operation doesn't work without it?

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The extra (i) at the end invokes the function, which in turn returns a function that knows about the i variable.

    You may not even need that variable i to be passed in to the function, because you should be able to use the this keyword instead. If that's the case then you can also get rid of the for loop and use the mootools each method instead.

    Code javascript:
    $$('ul[id^=cat]').each(function (el) {
         new Sortables(el, {
            clone: true,    
            revert: true,
            handle: 'div.rowGreyInner',
            opacity: 0,
            onComplete: function () {
                var myString = this.serialize(); 
                alert (myString);
            }
        });
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •