Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    planning a script and need pointer

    Hi,

    I have a page with a list of say 10 items. they will be retrieved from a db and presented as per a sequence number also stored with each item in the db. so they will output in the order 1,2,3,4 etc

    Now, I want to be able to alter the sequence numbers for each item, so that they will display in the newly chosen sequence.

    Is this easiest done (for the user) if they can drag an item to a higher/lower point in the list? Or would you do it by setting a digit in a select drop down?

    After having moved the items around into the new order, I want to click a button (AJAX), which will send off the necessary data to the db and update the sequence values for each record.

    How would you suggest this be done - basic selects or with AJAX. I don't need to worry about progressive enhancement for this task since it is within a cms and scripting will always be enabled.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    sup bazz, long time

    I'm actually doing something similar. I am using http://dragsort.codeplex.com/

    grab the zip file and in the example.html there is what you are talking about. The plugin allows you to reordder the LIs within a UL easily enough. On submit, just grab the text of each LI in a for each and do what you need with it.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Great HarbingerOTV.

    Thanks I'll look into that.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #4
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Having finally been able to get around to this, it is quite nifty. Only took about half an hour to get working too.

    Thanks Harb...

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #5
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    oo-er, I thought I was sorted.

    putting together the processing part, to input to the db.

    I have read the discussion pages but seem not to be 'getting it'.

    If I move two items for example, into the left div (list2), I can see that sortOrder is trying to create the correct number of values. but they are currently empty. what am I blind to?

    Oh BTW I am just getting it working using a normal form submission to a new script. I'll change it later, when I get AJAX working in a perl file.

    Code:
     <form action="/cgi-bin/client_control_panel2/sequencing.pl" method="post">
        <input type="hidden" name="action" value="enter_sequence" />
    	<input type="hidden" id="sortOrder" name="sortOrder">
    	<script type="text/javascript">
    		$("ul:first").dragsort();
    	</script> 
       <ul id="list1" style="float:right;"> 
            <li itemID="0">
    
              <div><p>this value</p></div>
            </li> 
            <li itemID="1">
              <div><p>2nd value</p></div>
            </li> 
            <li itemID="2">
              <div><p>3rd value</p></div>
            </li> 
            <li itemID="3">
    
              <div><p>4th value</p></div>
            </li> 
             </ul>
    	 <h4>Place your divs in order of choice beneath here</h4>
    	  <ul id="list2" style="float:left; background:#ccc; padding:0 20px">
    			  <li>&nbsp;</li>
    			
    	</ul>
    	<div style="clear:left;"></div> 
        <input type='submit' value='Enter the Sequence' />
    
      
        <script type="text/javascript" src="/javascript/jquery.dragsort-0.4.1.min.js"></script>
        <script type="text/javascript">
    		$("#list1, #list2").dragsort({ dragSelector: "div", dragBetween: true, dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });
    		
    		function saveOrder() {
    			var data = $("#list2 li").map(function() { return $(this).children().html(); }).get();
    			$("input[name=list2SortOrder]").val(data.join("|"));
    		};
    		// this is the function that puts the new sort order into a string
    function saveOrder() {
        var serialStr = "";
        $("#list2 li").each(function(i, elm) { serialStr += (i > 0 ? "," : "") + $(elm).attr("id"); });
    
    // this dynamically updates string to hidden form field
        document.getElementById('sortOrder').value = serialStr;
    };
    </script>
    	
    
    	
        </form>
    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    One thing I notice is that you are defining saveOrder() twice. That caused my local to bug out.

    try this and see if it's going the direction you want:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>bazz :: drag | sort | woot :D</title>
    </head>
    
    <form action="/cgi-bin/client_control_panel2/sequencing.pl" method="post">
        <input type="hidden" name="action" value="enter_sequence" />
    	<input type="hidden" id="sortOrder" name="sortOrder">
       	<ul id="list1" style="float:right;"> 
            <li><div><p>this value</p></div></li> 
            <li><div><p>2nd value</p></div></li> 
            <li><div><p>3rd value</p></div></li> 
            <li><div><p>4th value</p></div></li> 
         </ul>
    	 <h4>Place your divs in order of choice beneath here</h4>
    	 <ul id="list2" style="float:left; background:#ccc; padding:20px; width:200px;"></ul>
    	<div style="clear:left;"></div> 
        <input type='submit' value='Enter the Sequence' id='submit' />
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.dragsort.js"></script>
    <script type="text/javascript">
    /*
    $("ul:first").dragsort();
    */
    
    $("#list1, #list2").dragsort({ 
    	dragSelector: "div", 
    	dragBetween: true, 
    	dragEnd: saveOrder, 
    	placeHolderTemplate: "<li class='placeHolder'><div></div></li>" 
    });
    
    function saveOrder() {
    	var serialStr = $('#list2 li p').map(function(){
    		return $(this).text();
    	}).get().join('|')
        $('#sortOrder').val(serialStr);
    };
    
    
    $('#submit').click(function(){
    	alert($('#sortOrder').val());
    });
    </script>
    </form>
        
    <body>
    </body>
    </html>
    notice my name for my version of the dragsort.js file.

    All I'm doing is, upon submit, grabbing the text of each LI inside the left UL then joining them with "|". I think this is what you were trying to do with this line:

    Code:
    $("input[name=list2SortOrder]").val(data.join("|"));
    So see if this does anything towards your goal.

    -alan
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

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