Jquery to replicate a PHP effect

Question

Okay i'm trying to do is replicate the same functionality in an HTML page using JQuery to pull in to the page products from my Database.

Currently within the PHP version of this process you have your typical PHP call to the DB to connect:

<?php

define('INCLUDE_CHECK',1);
require "connect.php";

?>

Now there is one section of this process that makes a call to the DB and pulls products and echo's out a div and img tag with the information pulled allocated to the proper areas.

<?php

$result = mysql_query("SELECT * FROM internet_shop");
while($row=mysql_fetch_assoc($result))
{
echo '<div class="product"><img src="img/products/'.$row['img'].'" alt="'.htmlspecialchars($row['name']).'" width="128" height="128" class="pngfix" /></div>';
}

?>

Now there are some other scripts that recognize this spit out information and apply tooltips to the products and make them draggable. It works fine when done like this within a PHP page.

Now what I'm doing to try to get this to do the same thing is use the .ajax() call within my html page.

var grbData = $.ajax({
type : "GET",
url : "getRow.php",
dataType: 'html',
success: function (html) {
    $(".product").html(html);
},
error: function (xhr) {
    $('#errorDisplay').html('Error: '+ xhr.status +'' +xhr.statusText);
}
});

I get the images to come accross but don't get the draggable and droppable effects to apply to these products. Am I not pulling in all the information that I need?

Here is the Drag and Drop script that is working along with this process:

$(document).ready(function(){
var xhr;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
}else if (window.ActiveXObject) {
    xhr = new ActiveXObject("sxml2.XMLHTTP");
}else {
    throw new Error("Ajax is not supported by this browser");
}

$(".product img").draggable({

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

});

$("div.content.drop-here").droppable({

        drop:
                function(e, ui)
                {
                    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);
                }

});

});

Thanks,

Matt

Answer 1

Okay for those who would like to see the answer to this question that I posted the other day here you are:

Thanks to Simon, and malsup they got me pointed in the right direction and their help really got me out of a pickle.

Okay so what I was missing was to wrap the relevent parts of the script from script.js into a function like so:

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

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

$("div.content2.drop-here").droppable({

        drop:
                function(e, ui)
                {
                    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);

And bind it to the document.

Then recall it in the success call like:

var grbData = $.ajax({
type : "GET",
url : "getRow.php",
dataType: 'html',
success: function (html) {
    $(".drag-desired").html(html);
    $.event.trigger('init-draggable-products');
},
error: function (xhr) {
    $('#errorDisplay').html('Error: '+ xhr.status +'' +xhr.statusText);
}
});