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 8 of 8
  1. #1
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    vars not being passed to script

    Been a while since I was here and I am rusty. I think I am overlooking something simple but need to ask for your help.

    The following script functions as expected on its first iteration such that it enables a list of items to be moved about on the screen into a new ordering sequence.

    However, when the form is submitted, none of the list items are passed to the processing script. only the 'list1SortOrder' is being passed.

    Please can anyone give me a pointer on what is incorrect in the script. I think it is the saveOrder function that is not doing as expected.

    bazz

    Code:
    	<script type="text/javascript" src="/javascript/jquery.min.js"></script>
    	<script type="text/javascript" src="/javascript/jquery.dragsort-0.5.1.min.js"></script>
    	
    	<h1>Menus Sequencer.</h1>
    	
    	<p> Just click and drag an item into the place where you want it to be in the list.</p>
    	<form action="post" method="/cgi-bin/client_control_panel2/menu_sequencer.pl">
    	  <input type='hidden' name='action' value='set_new_sequence'/>
    
    	<ul id='menus' data-listidx="0">
    		<li class='a' style="cursor: pointer; ">bread</li>
    		<li class='b' style="cursor: pointer; ">vegetables</li>
    		<li class='c' style="cursor: pointer; ">meat</li>
    		<li class='d' style="cursor: pointer; ">milk</li>
    		<li class='e' style="cursor: pointer; " data-cursor="pointer">butter</li>
    
    		<li class='f' style="cursor: pointer; ">ice cream</li>
    	</ul>
    	<br>
    	
    	<script type="text/javascript">
    		$("ul:first").dragsort();
    	</script>
    	
    	
    	<!-- save sort order here which can be retrieved on server on postback -->
    	<input name="list1SortOrder" type="hidden" value="1|2|3|4|5|10|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20">
    
    	<script type="text/javascript">
    		$("#menus, #list2").dragsort({ dragSelector: "div", dragBetween: true, dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });
    		
    		function saveOrder() {
    			var data = $("#menus li").map(function() { return $(this).children().html(); }).get();
    			$("input[name=list1SortOrder]").val(data.join("|"));
    		};
    	</script>
    
    	<div style="clear:both;"></div>
    
     
     <input class='form_button' type='submit' value="Click Me" />
    
     </form>
    "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 DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Code:
    	<script type="text/javascript" src="/javascript/jquery.min.js"></script>
    	<script type="text/javascript" src="/javascript/jquery.dragsort-0.5.1.min.js"></script>
    	
    	<h1>Menus Sequencer.</h1>
    	
    	<p> Just click and drag an item into the place where you want it to be in the list.</p>
    	<form action="post" method="/cgi-bin/client_control_panel2/menu_sequencer.pl">
    	  <input type='hidden' name='action' value='set_new_sequence'/>
    
    	<ul id='menus' data-listidx="0">
    		<li class='a' style="cursor: pointer; ">bread</li>
    		<li class='b' style="cursor: pointer; ">vegetables</li>
    		<li class='c' style="cursor: pointer; ">meat</li>
    		<li class='d' style="cursor: pointer; ">milk</li>
    		<li class='e' style="cursor: pointer; " data-cursor="pointer">butter</li>
    
    		<li class='f' style="cursor: pointer; ">ice cream</li>
    	</ul>
    	<br>
    	
    	<script type="text/javascript">
    		$("ul:first").dragsort();
    	</script>
    	
    	
    	<!-- save sort order here which can be retrieved on server on postback -->
    	<input name="list1SortOrder" type="hidden" value="1|2|3|4|5|10|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20">
    
    	<script type="text/javascript">
    		$("#menus, #list2").dragsort({ dragSelector: "div", dragBetween: true, dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });
    		
    		function saveOrder() {
    			var data = $("#menus li").map(function() { return $(this).children().html(); }).get();
    			$("input[name=list1SortOrder]").val(data.join("|"));
    		};
    	</script>
    
    	<div style="clear:both;"></div>
    
     
     <input class='form_button' type='submit' value="Click Me" />
    
     </form>
    - the line in red means " get the html for the children of the specified LI" , your LI's have no children, and therefore no html, so I would imagine your getting a blank value in the hidden input.

    - Also, if there were, it would turn your hidden data value into a long string of html.
    - as a reminder, javascript uses a 0 index

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    have you looked at the dragsort docs by chance, this discussions lists seeral approaches. - http://dragsort.codeplex.com/discussions/218585

  • #4
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Thanks DanInMa,

    JS wasn't my string point.

    Still not getting it to run.

    Here is the saveOrder function, as I have tried now. Still no data passing though.

    I am now confused as to whether I should have each list item in a DIV of its own or not.

    Basically, I am trying to re-order a single list (not drag items from one list to another), and then when submitting that form, to capture the order in which they were, when the form was submitted.

    any further assistance you can give would be greatly appreciated.

    bazz

    Code:
    function saveOrder() {
    	         var data = $("#menus li").map(function(){
    		     return $(this).text();
    	         }).get().join('|')
                 $("input[name=list1SortOrder]").val(data.join("|"));
            };
    "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
    Thanks for that link but they seem all to use cookies and I won't be using them.

    scratching my head now. :/

    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 DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    how were you planning on saving the order of the li elements? to a database field of some kind? Should the order be unique for each person that uses the form?

  • #7
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Hi DanInMa,

    The list will be unique to each person using the form so all I need to capture when the form is submitted, is the order they have chosen. I can then input that to the db with the other data that relates it to the user.

    I just haven't yet been able to get the list sequence passed to the processing script.

    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

  • #8
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    ok, here's my latest attempt. the hidden field is being populated but with incorrect data.

    Code:
    	<script type="text/javascript" src="/javascript/jquery.min.js"></script>
    	<script type="text/javascript" src="/javascript/jquery.dragsort-0.5.1.min.js"></script>
    	
    	<h1>Menus Sequencer.</h1>
    	
    	<p>Your menus output in you website in an order.  Here you can rearrange that order so they output as you choose.  Just click and drag an item into the place where you want it to be in the list.</p>
    	<form action="post" name='myForm' method="/cgi-bin/client_control_panel2/menu_sequencer.pl">
    	  <input type='hidden' name='action' value='set_new_sequence'/>
    
    	 <input type="hidden" id="sortOrder" name="sortOrder">
    	<ul id="menus"> 
    		<li>Continental Breakfast</li> 
    		<li>Main Breakfast</li>		
    	</ul>
    	<input id="submit" name='submit' class='form_button' type='submit' value="Click Me" />
    	<script type="text/javascript">
    			$("ul:first").dragsort();
    	
    	</script>
    
    
    	
    	<!-- save sort order here which can be retrieved on server on postback -->
    
    	<input name="list1SortOrder" type="hidden" value="1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20">
    
    	
    	 <script type="text/javascript">
    		$("#menus").dragsort({ 
    		    dragSelector: "li", 
    			dragBetween: true, 
    			dragEnd: saveOrder, 
    			placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });
    	 </script>
    <script type='text/javascript'>
    function saveOrder() {
    	         var data = $("#menus li").map(function(){
    		     return $(this).text();
    	         }).get().join('|')
                 $("input[name=sortOrder]").val(data.join("|"));
            };	
    
    
    
    document.myForm.sortOrder.value = ($('sortOrder'));
    
    $('#submit').click(function(){
    	alert($('#sortOrder').val());
    });
    
    	
    </script>
    	
    
     </form>
    the param being sent to the processing script contains the following data:

    'sortOrder' => '[object Object]'

    Does that give a clue to what is wrong?

    I also get a js error console warning that saveOrder is not being defined. what does this mean, please? As far as I can tell, it is.

    bazz
    Last edited by bazz; 09-29-2012 at 05:34 AM.
    "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


  •  

    Posting Permissions

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