I am unable to figure this out

[fastsol1]

Ok so this may be kind of lengthy to explain but I will try to make it easy to understand.

I have a mysql table with the normal stuff in it for products and one column is a INT that I use to set the display order of the products. Meaning if product 1 has an id of 1 but a display number of 3 it would display as the 3rd product on the page.

I have a admin panel for the products to be able to change all aspects of the product except the display order. What I am trying to do is something very similar to Netflix in the queue for your movies when they list all the movies and you can change the order you want them by changing the number in the text field next to the movie. Now I am not trying to do it like them cause the use javascript and I only need this to work upon posting a form not client side.

So basically I would have a list of products and next to them a text box prefilled with the display number from the db. I want to be able to change the number in the textbox and in the end check the other products to see if they have to be moved down or up a spot in the order based on what has changed in the textbox after submitting the form. At this point I can probably figure out the up and down thing but my struggle is trying to figure out the best way to make the form and run a check to see if anything has changed.

I truly have no idea of the right way to go about this. I have tried several different things and have really gotten nowhere. I think I need to have the textboxes come across as an array in the $_POST and maybe even some hidden fields the same way for the original order of the list.

I have provided the code I have currently and a link to a live page of the code - http://amewebdesigns.com/t.php

<?php
if(isset($_POST['cats']))
{
print_r ($cat = $_POST['cats']);
print_r ($old = $_POST['old']);
$pc = count($_POST['old']);

for($w=0; $w<$pc; $w++)
{
if($_POST['old']['$w']===$_POST['cats']['$w'])
{echo "same<br/>";}
else echo "different<br/>";
}
}
?>
<form method="post" action="">
<?php
$count = 5;
for($i=0; $i < $count; $i++)
{
echo "<input type=\"text\" name=\"cats[]\"/>";
echo "<input type=\"hidden\" name=\"old[]\" value=\"$i\" />";
}
?>
<input name="Submit1" type="submit" value="submit" />
</form>


I hope that I explained it well enough, if you have Netflix online or even Blockbuster online then this should be easy to understand the result I am after. Any suggestions or help will be appreciated for I have been pondering this for months and have been trying for days.

[traq]

If you're using a <form> (and not by editing the database entry directly), then you are on the "client side." Javascript is the best solution for this.

When you change one of the display order numbers, you need to adjust all of the other values to accommodate the change - PHP can't do that*, because it receives all of the values at the same time. For example, if you have:

itemA > 1
itemB > 2
itemC > 3
itemD > 4

and change itemD's display position to "2", PHP will have no way of knowing (from this form) if you intend the #2 item to be itemD or itemB. With javascript, you can make your math-adjustments as each value is changed, and when you submit the form everything will be nice and neat for the PHP script.

* of course, PHP can do it (php is awesome like that), but not easily or conveniently. You'd need to save the original item order (probably in a session variable) so you can compare the original order with the new order.
But it really is better to just do it on the client side.

[fastsol1]

Thanks, I understand that Javascript would be easiest in the computing but I know virtually nothing about Javascript. Everything I have tried with java has never worked, which is interesting since php and java share similar coding styles, but yet I don't get it at all.

If you know of any tutorials on something like this or in general to maybe point me in the right direction that would be cool too.

[traq]

I've been messing around with some javascript, just working out the best way to re-order things. I'll post when I have something.

BTW, yes, you're right about php and js having similar syntax - the major difference is that javascript is an object-oriented language. You can use OO scripting in php, but it's not inherent; once you understand the differences between OO and [the more prevalent style of] "procedural" coding, js becomes far easier. That was the big epiphany for me, at least, though there are still the odd differences (operators, arrays (which don't really exist in js), scope, etc.).

[fastsol1]

I really appreciate your efforts!! I am pretty good at learning how something works if I have a working example, unless it's a crazy super long page of like I see most of these java things written in.

Thanks again

[traq]

actually, have a look at this (http://www.utdallas.edu/~jrb048000/ListReorder/). it's a jquery plugin, and much smoother & easier to use than anything I've come up with so far. good luck!



this (http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/) looks cool too (for tables)

[fastsol1]

Thanks for trying Traq. Last night I was able to find another forum with someone asking for hte same exact thing like the Netflix queue I talked about, and someone posted a working javascript code that is perfect.

Thanks again, JD

[traq]

would you care to post the solution? I'm actually interested

[fastsol1]

Here is the fuction

function renumber(oInput) {
var oFormElems, nFormElems, bUp, aElements, i, nCurOrder, oCurElem,
nNewOrder = parseInt(oInput.value, 10) || 0;
nOldOrder = parseInt(oInput.oldvalue, 10) || 0;
if ((bUp = nNewOrder - nOldOrder)) {
oFormElems = oInput.form.elements;
nFormElems = oFormElems.length,
aElements = [];
for (i=0; i<nFormElems; i++) {
oCurElem = oFormElems[i];
if (oCurElem.type == "text") {
nCurOrder = parseInt(oCurElem.value, 10) || 0;
if (oCurElem != oInput) {
if (bUp < 0 && nCurOrder >= nNewOrder) {
nCurOrder++;
}
else if (bUp > 0 && nCurOrder <= nNewOrder) {
nCurOrder--;
}
}
aElements[aElements.length] = { element: oCurElem, order: nCurOrder };
}
}
aElements.sort(function(a, b) {
return a.order - b.order > 0? 1 : b.order - a.order == 0? 0 : -1;
});
for (i=0; i<aElements.length; i++) {
aElements[i].element.value = i + 1;
}
}
}

And here is what the input is

<input type="text" name="cats[$id]" value="$display" onfocus="this.oldvalue=this.value" onchange="renumber(this)"/>