jQuery drag & drop problem

Hello everyone. My name is Mateusz (in english - Matthew), I come from Poland. I’m sorry in advance for my english, but I hope everyone will understand me and somebody will help me. I’ve got a problem with jQuery UI drag & drop. I’m creating a web page for my local volleyball club (never mind). I created simple website where I put players on pitch:

On the left there is a table, where are names and surnames of players. On the right there’s a pitch, on which I could change players.

Second image show situation when I drag “John Terry” and replace him with “Garry Edison”

Last image show when I drop “John Terry” on the place of “Garry Edison”. As you see, on the pitch everything is ok. “John” has replaced “Garry”

But the problem is on the left, in the table (I marked it). There is “Garry Edison” twice. Sometimes when I drag and drop another players nothing change in table. Now I’ll show jQuery code:

function change_line_up() {
	var o_squad = new Array(); // squad in table
	var n_squad = new Array(); // squad on the pitch
	o_squad[1] = $('table.first-squad tbody tr.set td.number').attr('id'); // I get ID of player from table
	o_squad[2] = $('table.first-squad tbody tr.rec1 td.number').attr('id'); //the same as over
	// etc ...

	id_help = $('table.tactics-players tbody tr td.set div.ui-droppable span.player-drag').attr('id').split('_');
	n_squad[1] = new Array();
	n_squad[1][1] = parseInt(id_help[1]);
	n_squad[1][2] = $('table.tactics-players tbody tr td.set div.ui-droppable span.player-drag').attr("name");
	id_help = $('table.tactics-players tbody tr td.r1 div.ui-droppable span.player-drag').attr('id').split('_');
	n_squad[2] = new Array();
	n_squad[2][1] = parseInt(id_help[1]);
	n_squad[2][2] = $('table.tactics-players tbody tr td.r1 div.ui-droppable span.player-drag').attr("name");

/* In this part of code I get the ID from div which is on the pitch (right).
    ID is like clone_1823, so I have to split it.
     eg. Terry on the left has html ID 1111 and Terry on the pitch has html ID clone_1111
	for(i=1; i<8; i++) {
		if(o_squad[i] != n_squad[i][1]) { // I check if after drop ID from table is different as ID from pitch
			if(i == 1) {
				$('table.first-squad tbody tr.set td.name').html(n_squad[1][2]); // and replace
				$('table.first-squad tbody tr.set td.number').attr('id', n_squad[1][1]);
			else if(i == 2) {
				$('table.first-squad tbody tr.rec1 td.name').html(n_squad[2][2]);				$('table.first-squad tbody tr.rec1 td.number').attr('id', n_squad[1][1]);

I call this function after drop player on the pitch :

$('table.tactics-players tbody tr td div, table.reserves-players tbody tr td div').droppable({
      accept: "span.player-drag, td.number",
      activeClass: "bordered",
      hoverClass: "ui-state-active",
       drop: function( event, ui ) {

HTML code:


<td class="at"><div><img src="images/icons/tshirt2.png" /><br /><span class="player-drag" id="clone_352" name="Garry Edison">Garry<br />Edison<br />A</span></div></td>


<tr class='atk'><td class='number' id='352' info='Garry<br />Edison<br />A'>4</td><td class='position'>A</td><td class='name'>Garry Edison</td></tr>

I completely don’t know why it doesn’t work properly (sometimes it doesn’t work at all as I said). I hope somebody will help me, I can write more things about my problems if it’s necessary.

I forgot to say: when I change players on the pitch, their’s html IDs and names change properly, so I don’t know why it doesn’t replace players in table.

Thank you in advance.

Hi there,

Welcome to the forums :slight_smile:

Could you post a link to a page where I can see this in action?

Ohh, thanks for your interest but I solved it :slight_smile:

My fault was in incorrect html IDs … Stupid mistake.