Change the value of a text box to its current order in a sortable tab

Question!

Edit: I have solved this by myself. See my answer below

I have set up a nice sortable table with jQuery and it is quite nice. But now i want to extend it.

Each table row has a text box, and i want i am after is to, every time a row is dropped, the text boxes update to reflect the order of the text boxes. E.g. The text box up the top always has the value of '1', the second is always '2' and so on.

I am using jQuery and the Table Drag and Drop JQuery plugin

Code

Javascript:

<script type="text/javascript">
    $(document).ready(function() {		  
	$("#table-2").tableDnD({
		onDrop: function(table, row) {
			var rows = table.tBodies[0].rows;
			var debugStr = "Order: ";
			for (var i=0; i<rows.length; i++) {
				debugStr += rows[i].id+", ";
			}
			console.log(debugStr)
			document.forms['productform'].sort1.value = debugStr;
			document.forms['productform'].sort2.value = debugStr;
			document.forms['productform'].sort3.value = debugStr;
			document.forms['productform'].sort4.value = debugStr;
		},
	});
});

HTML Table:

<form name="productform">
		<table cellspacing="0" id="table-2" name="productform"> 
			<thead>
				<tr><td>Product</td>	<td>Order</td></tr> 
			</thead>

			<tbody>
				<tr class="row1" id="Pol">	<td><a href="1/">Pol</a></td>	<td><input type="textbox" name="sort1"/></td>	</tr>
				<tr class="row2" id="Evo">	<td><a href="2/">Evo</a></td>	<td><input type="textbox" name="sort2"/></td>	</tr>
				<tr class="row3" id="Kal">	<td><a href="3/">Kal</a></td>	<td><input type="textbox" name="sort3"/></td>	</tr>
				<tr class="row4" id="Lok">	<td><a href="4/">Lok</a></td>	<td><input type="textbox" name="sort4"/></td>	</tr>
			</tbody> 
		</table>
	</form>
By : Josh Hunt


Answers

Hardnrg in #jquery ended up solving it for me.

It involved adding an id="" to each input:

<form name="productform">
    <table cellspacing="0" id="table-2" name="productform"> 
		<thead>
			<tr><td>Product</td>	<td>Order</td></tr> 
		</thead>

		<tbody>
			<tr class="row1" id="Pol">	<td><a href="1/">Pol</a></td>	<td><input id="Pol_field" type="textbox" name="sort1"/></td>	</tr>
			<tr class="row2" id="Evo">	<td><a href="2/">Evo</a></td>	<td><input id="Evo_field" type="textbox" name="sort2"/></td>	</tr>
			<tr class="row3" id="Kal">	<td><a href="3/">Kal</a></td>	<td><input id="Kal_field" type="textbox" name="sort3"/></td>	</tr>
			<tr class="row4" id="Lok">	<td><a href="4/">Lok</a></td>	<td><input id="Lok_field" type="textbox" name="sort4"/></td>	</tr>
		</tbody> 
	</table>
</form>

And add this js to the OnDrop event:

for (var i=0; i < rows.length; i++) {
    $('#' + rows[i].id + "_field").val(i+1);
}

Easy peasy!

By : Josh Hunt


Hmmm.. I think you want to do something like this:

$("input:text", "#table-2").each( function(i){ this.value=i+1; });

The $().each() function's info is here: http://docs.jquery.com/Core/each

By : Sugendran


first do a

fdisk -l

get the harddrive partition, ie /dev/sda2

then

mount /dev/sda2 /mnt/windows

if this fails, try a

yum install ntfs-3g

* Just noted this is not included by default, so you can check out NTFS-3g here, and find a suitable package for your system.

to auto mount this, add a line to /etc/fstab saying

/dev/sda2      /mnt/temp     ntfs    defaults 0 0

and this should auto mount on a reboot

By : PostMan


This video can help you solving your question :)
By: admin