0

I have already made a drag and drop function using jquery/javascript and html. This is working so far and it is possible to drag a div to a table cell and get the info from it etc. This table represents the week days from monday to sunday. But since I wanted to make it possible to add another week and still use the drag and drop function, it went wrong. I don't know exactly what is wrong, but I suspect it has something to do with the "class='ui-widget-header'" I have in my droppable <td>.

For starters, here is my table

<div id='trainingWeeks' class='bigDiv'>
    <table id='trainingWeekTable'>
        <tr id='tableHead'>
            <td>Monday</td>
            <td>Tuesday</td>
            <td>Wednessday</td>
            <td>Thursday</td>
            <td>Friday</td>
            <td>Saturday</td>
            <td>Sunday</td>
        </tr>
        <tr>
            <td colspan='7' style='text-align: center; background: #eee;'>Week 1</td>
        </tr>
        <tr id='tableContent' data-options='week: 1'>
            <td class='ui-widget-header' id='weekday' data-options='weekday: 1'></td>
            <td class='ui-widget-header' id='weekday' data-options='weekday: 2'></td>
            <td class='ui-widget-header' id='weekday' data-options='weekday: 3'></td>
            <td class='ui-widget-header' id='weekday' data-options='weekday: 4'></td>
            <td class='ui-widget-header' id='weekday' data-options='weekday: 5'></td>
            <td class='ui-widget-header' id='weekday' data-options='weekday: 6'></td>
            <td class='ui-widget-header' id='weekday' data-options='weekday: 7'></td>
        </tr>
    </table>
</div>

And to add another one of these tables, I simply use javascripts append():

<script>
    $(document).ready(function() {
        var weekNo = 1;
        $('#addAnotherWeek').click(function() {
            weekNo++;
            $('#trainingWeeks').append('<table id=.. THE SAME TABLE ... ');
        });
    });
</script>

And my problem is that the drag and drop functions works when I add the table directly into my html, but when I let javascript "append" it to the div with id #trainingWeeks, it simpy doesn't work.. i also tried using the java html('...??');

I hope you can understand my problem and perhaps have some kind of solution. any help will be greatly appreciated :)

(btw. I haven't posted the jquery code for my drag and drop on purpose, as this is working like it should and hasn' anything to do with my problem)

mdml
  • 22,442
  • 8
  • 58
  • 66
Langkiller
  • 3,377
  • 13
  • 43
  • 72
  • HTML Elements should always have a unique ID on the page. jQuery and most selectors rely on this rule. Not sure if this is causing your problem, but you should definitely look at implementing this differently – jasonscript Dec 09 '13 at 01:23
  • Bit more research: Check out the jQuery `Clone` method. **[Here](http://stackoverflow.com/questions/10126395/how-to-jquery-clone-and-change-id)** is an example on StackOverflow about how to clone and update the IDs – jasonscript Dec 09 '13 at 01:42
  • Okay thanks for your answer.. but I tried using clone() like this: $('#trainingWeekTable').clone().appendTo('#trainingWeeks'); but still doesn't work :( – Langkiller Dec 09 '13 at 02:01
  • I think that is because of the ID issue I mentioned earlier. You're creating (via clone) an element with ID "TrainingWeeksTable" and then you're trying to append to "TrainingWeeks" that already contains a element called "TrainingWeeksTable" – jasonscript Dec 09 '13 at 02:03

0 Answers0