[jQuery] Dragging things nowhere.

[HappyFeet]

Evening!

 

I've been tinkering with jQuery a fair bit recently and something that is most likely incredibly simple is alluding me as to why I can't drag these rows of a table.

 

I am before I forget to mention including the jQuery files deffinitely.

 

The java:

<script type="text/javascript"> 
$(document).ready(function() { 
  $("#tableList").sortable({ 
    handle : '.handle', 
    update : function () { 
      var order = $('#tableList').sortable('serialize'); 
      $("#info").load("reorder.php?"+order); 
    } 
  }); 
}); 
</script>

 

Which is supposedly fed from a table with while generated singular rows for each record.

 

<table id="tableList">
      <tr id="tableItem<?=$id;?>">
            <td width="400" align="center">Details...</td>
      </tr>
</table>

 

My problem is that whenever I try to drag. It drags the entire four rows not just one. Equally it doesn't recognise the 2nd, 3rd or 4th as part of the list? I.E you can only drag the 1st row which in turn pulls the rest...

 

 

[joe92]

This looks wrong to me:

<tr id="tableItem<?=$id;?>">

 

It should be something more like:

<tr id="tableItem=$id">

 

Where $id is set before in php. When calling a variable it needn't be called from within <?php ?> tags, it just needs to be set from within them.

 

Could you provide the entire html table code please? I only see one row there...

 

[AyKay47]

you have .handle specified as the sortable handle... where is the element with a class of handle in your code?

[joe92]

Hang on, I'm so used to using heredocs I forget everything on my file is within php tags already. Variables always need to be called from within php tags. Ugh, so stupid of me. Ignore my previous post

 

How are the ID's for the table rows being set? They will need to be unique for the javascript to move only one at a time.

[AyKay47]

Hang on, I'm so used to using heredocs I forget everything on my file is within php tags already. Variables always need to be called from php tags. Ugh, so stupid of me. Ignore my previous post

 

How are the ID's for the table rows being set? They will need to be unique for the javascript to move only one at a time.

if the rows are being created dynamically.. it is advisable to use a class here, unless you need each row for some reason.. then use unique id's

[joe92]

The OP wishes to drag individual rows so will need unique ID's on the rows would he not? (Bearing in mind I don't use jQuery too often, preferring to use javascript itself instead)

[freelance84]

I've had some experience with jQuery resorting table rows.

 

The function i used didn't require any id's on the individual rows...

[freelance84]

js:

<script src="http://127.0.0.1/mysite/jquery/jquery.js"></script>
<script src="http://127.0.0.1/mysite/jquery/jquery.tablednd_0_5.js"></script>
<script type="text/javascript">
	var params = {
		onDragClass: "onDragRow",
		onDrop: function(table, row) { },
		onDragStart: function(table, row) {}
	};
	$(document).ready(function() {
	    // Initialise the table
	    $("#table-1").tableDnD(params);
	});
</script>

html:

<table id="table-1" style="width:100%;margin-left:auto;margin-right:auto:">
put your table rows in here, done
</table>

 

 

You can add a 'no-drag' class to rows you wish to remain fixed too i think... the site of the guy who made the script is probably in the attachement.

 

 

Hope that helps.

 

 

[attachment deleted by admin]

[AyKay47]

The OP wishes to drag individual rows so will need unique ID's on the rows would he not? (Bearing in mind I don't use jQuery too often, preferring to use javascript itself instead)

you obviously are not familiar with how .sortable works.. id's are not needed on the row elements

[HappyFeet]

The OP wishes to drag individual rows so will need unique ID's on the rows would he not? (Bearing in mind I don't use jQuery too often, preferring to use javascript itself instead)

you obviously are not familiar with how .sortable works.. id's are not needed on the row elements

 

Hello again,

 

Thank you to everyone that posted, it is appreciated. I managed to get the drag and drop working in tune with the DnD plugin, as the setup I had was clearly as others have highlighted somewhat dis-functional.

 

However my question is how do I plonk the rows in turn into my external file that simply updates a database with their new positions.

 

I assume, that it would be placed within the onDrop however I can't see to get the rows to pass through to the file.

 

                onDrop: function(table, row) { 
                                              $("#info").load("../ajax/process-sortable.php");  
                                            },

 

I can load the external file in without a problem. It's just pushing the rows through...? Once they reach it is simply a foreach of the rows for the update query and a congratulations message.

 

Once again, thank you for your replies.

[freelance84]

 

Erm... soo... you want to go from rearranging the rows of a table to placing them into a file which then places into a database....

 

That's pretty vague.

 

I would argue that your thread here is solved. And that's a new question all together... also, you haven't stated what exactly goes into the database from the table nor how...?