Question

I have the following JQuery code that is giving me some problems. The first two alerts return the expected values, but alerts 3-5 return “undefined”.

In short, this should allow me to drag any draggable item onto a droppable div. Once that occurs a function should be fired to look at the ids and determine which subsequent function to call (each part of the page has its own set of functions). That next function should be able to access the original elements by id.

Could someone please shed some light on this for me? I’m beating my head against the wall here. Thanks.

$( ".draggable").draggable({
    opacity: 1,
    revert: 'invalid',
    cursor: 'move',
    helper: 'clone',
    scroll: false,
    appendTo: $("#POCONS02"),
    containment: 'window',
    start: function(event, ui) {
        ui.helper.css("z-index" , "1000000");
        ui.helper.css("border" , "1px solid ##000000");
    },
    stop: function(event, ui) {
        $('body').css("cursor", "auto");
    }
});

// Attaches droppable events.
$( ".droppable").droppable({
    hoverClass: 'drophover',
    tolerance: 'pointer',
    accept: function(dropElem) {
        var targetID    = $(this).attr("id");
        var dragID      = $(dropElem).attr("id");

        if (targetID.substr(0, 10) == 'POCONSOL02') {
            if (targetID == 'POCONSOL02_unGrouped' && dragID.substr(0, 10) == 'POCONSOL02') {
                return true;
            } else if (targetID == 'POCONSOL02_grouped' && dragID.substr(0, 10) == 'POCONSOL02') {
                return true;
            } else {
                return false;
            }
        } else {
            return false;
        }
    },
    drop: itemDropped
});


 function itemDropped (event, ui) {
var targetID    = $(this).attr("id");
var itemID      = $(ui.draggable).attr("id");

if (targetID.substr(0, 10) == 'POCONSOL02') {
    itemDroppedPOCONSOL02($.trim(targetID), $.trim(itemID));
}
 }

function itemDroppedPOCONSOL02 (targetID, itemID) {
    alert(targetID);
    alert("-" + itemID + "-");
    alert($("#" + itemID).attr("id"));
    alert($("#" + itemID).parent().attr("id"));

    $("#" + itemID).appendTo("#" + targetID);
    alert($("#" + itemID).parent().attr("id"));
    $("#POCONS02SaveButton").removeAttr("disabled");
}

Relevant HTML:

        <div style="text-align:center;">
            <table cellpadding="5" cellspacing="0" style="width:100%; height:40%;">
                <tr>
                    <td>    
                        <div style="text-align:left;" class="tableControlHeaderDiv">
                            <table class="tableControlHeader" cellpadding="0" cellspacing="0" style="width:100%;">
                                <tr style="text-align:center;" class="tableColumnHeader">
                                    <td style="text-align:center; width:20%;" class="tableControlBorder">Reference Number</td>
                                    <td style="text-align:center; width:25%;" class="tableControlBorder">Part</td>
                                    <td style="text-align:center; width:15%;" class="tableControlBorder">Due Date</td>
                                    <td style="text-align:center; width:10%;" class="tableControlBorder">Price</td>
                                    <td style="text-align:center; width:10%;" class="tableControlBorder">Gauge</td>
                                    <td style="text-align:center; width:5%;" class="tableControlBorder">UM</td>
                                    <td style="text-align:center; width:10%;" class="tableControlBorder">Width</td>
                                    <td style="text-align:center; width:5%;" class="tableControlBorder">UM</td>
                                </tr>
                            </table>
                        </div>      
                        <div id="POCONSOL02_unGrouped" class="droppable" style="height:90%; overflow:auto;">
                            <cfloop query="getPOs">
                                <table id="POCONSOL02_item#getPOs.po_line#" cellpadding="0" cellspacing="0" class="draggable tableControlInnerTable">
                                    <tr>
                                        <td style="width:20%;"  class="tableControlBorder">#getPOs.po_line#</td>
                                        <td style="width:25%;"  class="tableControlBorder">#getPOs.finished_part_nbr#</td>
                                        <td style="width:15%;"  class="tableControlBorder">#getPOs.Due_Date#</td>
                                        <td style="width:10%;"  class="tableControlBorder">#getPOs.Unit_Price#</td>
                                        <td style="width:10%;"  class="tableControlBorder">#getPOs.gauge#</td>
                                        <td style="width:5%;"   class="tableControlBorder">#getPOs.gauge_um#</td>
                                        <td style="width:10%;"  class="tableControlBorder">#getPOs.width#</td>
                                        <td style="width:5%;"   class="tableControlBorder">#getPOs.width_um#</td>
                                    </tr>
                                </table>
                            </cfloop>
                        </div>
                    </td>
                </tr>
            </table>

            <table cellpadding="5" cellspacing="0" style="width:100%; height:40%;">
                <tr>
                    <td>    
                        <div style="text-align:left;" class="tableControlHeaderDiv">
                            <table class="tableControlHeader" cellpadding="0" cellspacing="0">
                                <tr style="text-align:center;" class="tableColumnHeader">
                                    <td style="text-align:center; width:20%;" class="tableControlBorder">Reference Number</td>
                                    <td style="text-align:center; width:25%;" class="tableControlBorder">Part</td>
                                    <td style="text-align:center; width:15%;" class="tableControlBorder">Due Date</td>
                                    <td style="text-align:center; width:10%;" class="tableControlBorder">Price</td>
                                    <td style="text-align:center; width:10%;" class="tableControlBorder">Gauge</td>
                                    <td style="text-align:center; width:5%;" class="tableControlBorder">UM</td>
                                    <td style="text-align:center; width:10%;" class="tableControlBorder">Width</td>
                                    <td style="text-align:center; width:5%;" class="tableControlBorder">UM</td>
                                </tr>
                            </table>
                        </div>      
                        <div id="POCONSOL02_grouped" class="droppable" style="height:90%; overflow:auto;">
                            <cfloop query="getPOs">
                                <table id="POCONSOL02_item99" cellpadding="0" cellspacing="0" class="draggable tableControlInnerTable">
                                    <tr>
                                        <td style="width:20%;"  class="tableControlBorder">#getPOs.po_line#</td>
                                        <td style="width:25%;"  class="tableControlBorder">#getPOs.finished_part_nbr#</td>
                                        <td style="width:15%;"  class="tableControlBorder">#getPOs.Due_Date#</td>
                                        <td style="width:10%;"  class="tableControlBorder">#getPOs.Unit_Price#</td>
                                        <td style="width:10%;"  class="tableControlBorder">#getPOs.gauge#</td>
                                        <td style="width:5%;"   class="tableControlBorder">#getPOs.gauge_um#</td>
                                        <td style="width:10%;"  class="tableControlBorder">#getPOs.width#</td>
                                        <td style="width:5%;"   class="tableControlBorder">#getPOs.width_um#</td>
                                    </tr>
                                </table>
                            </cfloop>
                        </div>
                    </td>
                </tr>
            </table>
        </div>

Answer 1

I found an alternate way to resolve this issue by modifying two of the functions:

function itemDropped (event, ui) {
    var targetID    = $(this).attr("id");

    if (targetID.substr(0, 10) == 'POCONSOL02') {
            itemDroppedPOCONSOL02($.trim(targetID), ui);
    }
}

function itemDroppedPOCONSOL02 (targetID, ui) {
    //alert(targetID);
    //alert("-" + itemID + "-");
    //alert($(ui.draggable).attr("id"));
    //alert($(ui.draggable).parent().attr("id"));

        $(ui.draggable).appendTo("#" + targetID);
    //alert($(ui.draggable).parent().attr("id"));
    $("#POCONS02SaveButton").removeAttr("disabled");
}

For some reason the itemID does not pass correctly from the first to the secton function. And for some reason the event does not pass correctly. But by evaluating the event immediately and passing the id, then evaluating the ui in the called function, everything is peachy.

I’d be interested in hearing why this occurs and if there is a better way. But for now this works.