0

Here is what I am trying to do:

I have a 'calendar', which consists of 5 columns, each column has 5 divs, which are timeslots. I am displaying appointments in each of the timeslots, and have implemented the JQuery Sortable in order to move the appointment from one timeslot to another, or to another column (which represents days). I would like to implement an AJAX call once the movement has been complete, in order to update my database, and reflect the appointment change, in the calendar.

The problem:

Once I move the appointment from column A to column B, I am not sure how to get the new date and time. Normally, I would use Javascript to get this data by searching the DOM until I find the data I need. But when using the sortable, I'm not able to get the new column, as the DOM seems to still represent the old column.

The question:

How to get the DOM for the spot where I drop the element when I'm using the Sortable interface?

Here is my HTML, which is condensed for the sake of simplicity:

<div class="column" id="day1">
        <div class="route_container">
            <div class="date"></div>
            <button class="add_route" name="add_route" onclick="">Add New Route - 1</button>
            <div class = "truck" id="day1_route1">
                <h3>8-10</h3>
                <div class="timeslot" id="d1_1">
                    <ul class="_ts">
                        <li><a   class="new_appt" href="#">Open</a></li>
                        <li><a   class="new_appt" href="#">Open </a></li>
                    </ul>
                </div>
                <h3>10-12</h3>
                <div class="timeslot" id="d1_2">
                    <ul class="_ts">
                        <li><a   class="new_appt" href="#">Open</a></li>
                        <li><a   class="new_appt" href="#">Open </a></li>
                    </ul>
                </div>
                <h3>12-2</h3>
                <div class="timeslot" id="d1_3">
                    <ul class="_ts">
                        <li><a   class="new_appt" href="#">Open</a></li>
                        <li><a   class="new_appt" href="#">Open </a></li>
                    </ul>
                </div>
                <h3>2-4</h3>
                <div class="timeslot" id="d1_4">
                    <ul class="_ts">
                        <li><a   class="new_appt" href="#">Open</a></li>
                        <li><a   class="new_appt" href="#">Open </a></li>
                    </ul>
                </div>
                <h3>4-6</h3>
                <div class="timeslot" id="d1_5">
                    <ul class="_ts">
                        <li><a   class="new_appt" href="#">Open</a></li>
                        <li><a   class="new_appt" href="#">Open </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="column" id="day2">
        <div class="route_container">
            <div class="date"></div>
            <button class="add_route" name="add_route">Add New Route</button>
            <div class = "truck" id="day2_route1">
                <h3>8-10</h3>
                <div class="timeslot" id="d2_1">
                    <ul class="_ts">
                        <li><a   class="new_appt" href="#">Open</a></li>
                        <li><a   class="new_appt" href="#">Open </a></li>
                    </ul>
                </div>
                <h3>10-12</h3>
                <div class="timeslot" id="d2_2">
                    <ul class="_ts">
                        <li><a   class="new_appt" href="#">Open</a></li>
                        <li><a   class="new_appt" href="#">Open </a></li>
                    </ul>
                </div>
                <h3>12-2</h3>
                <div class="timeslot" id="d2_3">
                    <ul class="_ts">
                        <li><a   class="new_appt" href="#">Open</a></li>
                        <li><a   class="new_appt" href="#">Open </a></li>
                    </ul>
                </div>
                <h3>2-4</h3>
                <div class="timeslot" id="d2_4">
                    <ul class="_ts">
                        <li><a   class="new_appt" href="#">Open</a></li>
                        <li><a   class="new_appt" href="#">Open </a></li>
                    </ul>
                </div>
                <h3>4-6</h3>
                <div class="timeslot" id="d2_5">
                    <ul class="_ts">
                        <li><a   class="new_appt" href="#">Open</a></li>
                        <li><a   class="new_appt" href="#">Open </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

Here is the Javascript I'm using at the moment to move the li elements around:

$("._ts").sortable({
    connectWith: "._ts", 
    revert: "true",
    cancel: ".new_appt", 
    stop: function(){
        var date = $(this).parent().parent().parent().parent().attr('id'); 
        alert("this is the new date: " + date); 

        $.ajax({
            type: "post",
            dataType: "json",
            url: ajaxurl, 
            data:{action: "update_appointments", date: date, timeslot: timeslot},
            success: function(response){
                if(response.type = "success"){
                    add_appointment(date, response.appt, col);  
                }
            }
        });
    }

});

As it stands, I am trying to use the var date = $(this).parent().parent().parent().parent().attr('id'); to get the new date from the new column, but I'm getting the old date. How can I get the new information?

Let me know if there is anything else you need.

4

1 回答 1

1

只是改变：

$(this).parent().parent().parent().parent().attr('id');

至：

$(e.toElement).parents(".column").attr("id")

http://jsfiddle.net/Mt7LF/

于 2013-11-08T19:54:52.077 回答