Question

I was hoping someone can point out what my problem could be. I am trying to get a drag and drop effect in place for a small project which trying to mimic a shopping cart. So this is what I am working with:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

This is what I got on my index.html page which is going out to the database and retrieving the art elements which also has some price information attached to the elements.

<script type="text/javascript">
/* <![CDATA[ */
$.ajax({
    type : "GET",
    url  : "getRow.php",
    dataType: 'html',
    success: function (data) {
        $("#products").html(data);
        $.event.trigger('init-draggable-products');
    },
    error: function (xhr) {
        $('#errorDisplay').html('Error: '+ xhr.status + '' + xhr.statusText);
    }
});
/* ]]> */

The problem that I am having is in IE the images which should be objects you can drag and drop are sometimes working and sometimes not. Is there something that IE does not like?

Here is my $.event.trigger('init-draggable-products'); code:

function initializeDraggableProductImage() {
$(".products img").draggable({

    containment: 'document',
    opacity: 0.6,
    revert: 'invalid',
    helper: 'clone',
    zIndex: 100
});

$("#cabinet").droppable({

        drop:
                function(e, ui)
                {
                    $(this).removeClass('cabinetDrop');
                    $(this).addClass('ui-state-highlight');
                    $("#cabinetReset").show(); 
                    var param = $(ui.draggable).attr('src');

                    if($.browser.msie && $.browser.version=='6.0')
                    {
                        param = $(ui.draggable).attr('style').match(/src=\"([^\"]+)\"/);
                        param = param[1];
                    }

                    addlist(param);
                }

});
};

$(document).bind('init-draggable-products', initializeDraggableProductImage);

I had upgraded to:

https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js

When I did the products or images were not coming through.

Answer 1

You should try putting this code in a document.ready statement.
Next to that, like Steve said: IE9 requires jQuery UI 1.8.6 or greater.

<script type="text/javascript">
$(function(){
 $.ajax({
    type : "GET",
    url  : "getRow.php",
    dataType: 'html',
    success: function (data) {
        $("#products").html(data);
        $.event.trigger('init-draggable-products');
    },
    error: function (xhr) {
        $('#errorDisplay').html('Error: '+ xhr.status + '' + xhr.statusText);
    }
 });
);
</script>