Jquery to replicate a PHP effect

Question

Hello,

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

the function calls that you made to apply the drag/drop affects occurred before your ajax call.. they'll need to be re-called in the success part of the ajax call once the images have been inserted

Answer 2

Now there are some other scripts that recognize this spit out information and apply tooltips to the products and make them draggable.

And there lies your problem. These scripts are probably initiated on page load, when all the elements already exist. If you use the AJAX method to fill the html (and I'm assuming these scripts are part of the received html), the onload event will never fire. What you will have to do is find out what events are called on page load, and fire them again.

A work-around could be to use an iframe to load the contents instead of AJAX. I'm not a big fan of iframes, but in this particular case it sounds like a fast solution.

Answer 3

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);
}
});