...

View Full Version : vars not being passed to script



bazz
09-28-2012, 05:23 PM
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



<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>

DanInMa
09-28-2012, 06:26 PM
<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

DanInMa
09-28-2012, 06:28 PM
have you looked at the dragsort docs by chance, this discussions lists seeral approaches. - http://dragsort.codeplex.com/discussions/218585

bazz
09-28-2012, 06:42 PM
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



function saveOrder() {
var data = $("#menus li").map(function(){
return $(this).text();
}).get().join('|')
$("input[name=list1SortOrder]").val(data.join("|"));
};

bazz
09-28-2012, 07:06 PM
Thanks for that link but they seem all to use cookies and I won't be using them.

scratching my head now. :/

bazz

DanInMa
09-28-2012, 07:50 PM
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?

bazz
09-28-2012, 08:33 PM
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

bazz
09-29-2012, 04:30 AM
ok, here's my latest attempt. the hidden field is being populated but with incorrect data.



<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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum