Jquery pour reproduire un effet de PHP

Question

D'accord, je suis en train de faire est de reproduire la même fonctionnalité dans une page HTML en utilisant JQuery pour tirer dans les produits de la page de ma base de données.

À l'heure actuelle au sein de la version PHP de ce processus, vous avez votre appel PHP typique à la DB pour se connecter:

<?php

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

?>

Maintenant, il y a une partie de ce processus qui fait un appel à la DB et tire des produits et des années d'écho un div et la balise img avec les informations extraites allouées aux zones appropriées.

<?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>';
}

?>

Maintenant, il y a d'autres scripts qui reconnaissent cette recracher des informations et appliquer infobulles pour les produits et les rendre draggable. Cela fonctionne très bien lorsque vous avez terminé comme celui-ci dans une page PHP.

Maintenant, ce que je fais pour essayer d'obtenir cela à faire la même chose est d'utiliser le .ajax () appeler dans mon page html.

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

Je reçois les images à venir accross mais ne reçoivent pas les effets glissables et déposables à appliquer à ces produits. Est-ce que je ne tire pas toutes les informations que j'ai besoin?

Voici le Drag and Drop script qui fonctionne avec ce processus:

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

});

});

Merci,

Matt

Answer 1

Bon pour ceux qui voudraient voir la réponse à cette question que je posté l'autre jour vous êtes ici:

Merci à Simon, et malsup ils me ont fait remarquer dans la bonne direction et leur aide vraiment m'a fait sortir d'un cornichon.

Bon alors ce que je ne manquait pour envelopper les parties relevent du script de script.js en fonction comme ceci:

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

lier au document.

Puis rappeler dans l'appel de succès comme:

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

Answer 2

la fonction appelle que vous avez fait pour appliquer une fois ont été insérées les images du glisser / déposer les affects eu lieu avant votre appel ajax .. ils doivent être re-disant dans la partie de la réussite de l'appel ajax

Answer 3

  

Maintenant, il y a d'autres scripts   reconnaître ces informations recracher   et appliquer infobulles aux produits et   les rendre draggable.

Et il se trouve votre problème. Ces scripts sont probablement lancés sur la charge de page, lorsque tous les éléments existent déjà. Si vous utilisez la méthode AJAX pour remplir le html (et je suppose ces scripts font partie du html reçu), l'événement onload ne sera jamais le feu. Ce que vous devez faire est de savoir quels événements sont appelés chargement de la page, et les feu à nouveau.

Un travail autour pourrait être d'utiliser une iframe pour charger le contenu au lieu d'AJAX. Je ne suis pas un grand fan de iframes, mais dans ce cas particulier, il sonne comme une solution rapide.