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)

4
  • 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 Dec 9, 2013 at 1:23
  • Bit more research: Check out the jQuery Clone method. Here is an example on StackOverflow about how to clone and update the IDs Dec 9, 2013 at 1:42
  • Okay thanks for your answer.. but I tried using clone() like this: $('#trainingWeekTable').clone().appendTo('#trainingWeeks'); but still doesn't work :(
    – Langkiller
    Dec 9, 2013 at 2: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" Dec 9, 2013 at 2:03

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.