JQuery per replicare un effetto PHP

Question

Va bene che sto cercando di fare è di replicare la stessa funzionalità in una pagina HTML utilizzando jQuery tirare dentro ai prodotti di pagina dal mio database.

Attualmente all'interno della versione di PHP di questo processo si ha la chiamata di PHP tipico al DB per la connessione:

<?php

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

?>

Ora c'è una sezione di questo processo che effettua una chiamata al DB e tira i prodotti e l'eco di un tag div e img con le informazioni tirato assegnato alle aree corrette.

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

?>

Ora ci sono alcuni altri script che riconoscono questo sputare informazioni e applicare i suggerimenti per i prodotti e renderli trascinabili. Funziona bene quando è fatto in questo modo all'interno di una pagina PHP.

Ora quello che sto facendo per cercare di ottenere questo per fare la stessa cosa è utilizzare l'Ajax () chiamata nel mio pagina 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);
}
});

ottengo le immagini a venire dall'altra parte, ma non ottengono gli effetti trascinabili e droppable di applicare a questi prodotti. Non sono io tirando in tutte le informazioni di cui ho bisogno?

Ecco il Drag and Drop script che sta lavorando insieme a questo processo:

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

});

});

Grazie,

Matt

Answer 1

Va bene per chi vorrebbe vedere la risposta a questa domanda che ho postato l'altro giorno qui sei:

Grazie a Simon e malsup Mi hanno puntato nella giusta direzione e il loro aiuto mi ha davvero è sfuggita di una salamoia.

Va bene così quello che mi mancava era quello di avvolgere le parti rilevanti della sceneggiatura da script.js in una funzione in questo modo:

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

e associarlo al documento.

Poi richiamarlo nella chiamata di successo come:

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 funzione di chiamate che hai fatto per applicare il drag / drop affetti avvenuto prima della chiamata AJAX .. avranno bisogno di essere ri-chiamato nella parte successo della chiamata AJAX, una volta sono state inserite le immagini

Answer 3

  

Ora ci sono alcuni altri script che   riconoscere queste informazioni sputare   e applicare i suggerimenti ai prodotti e   renderli trascinabili.

E ci si trova il problema. Questi script sono probabilmente avviate al caricamento della pagina, quando esistono già tutti gli elementi. Se si utilizza il metodo AJAX per riempire il html (e sto assumendo questi script sono parte del HTML ricevuto), l'evento onload non sarà mai il fuoco. Quello che dovrete fare è scoprire quali eventi sono chiamati al caricamento della pagina, e li fuoco di nuovo.

Un lavoro intorno potrebbe essere quella di utilizzare un iframe per caricare il contenuto invece di AJAX. Io non sono un grande fan di iframe, ma in questo caso particolare, suona come una soluzione veloce.