0

さて、私がやろうとしているのは、JQuery を使用して HTML ページで同じ機能を複製し、データベースからページ製品にプルすることです。

現在、このプロセスの PHP バージョンでは、接続する DB への典型的な PHP 呼び出しがあります。

<?php

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

?>

このプロセスには、DB を呼び出して製品をプルし、適切な領域に割り当てられた情報を含む div および img タグをエコーする 1 つのセクションがあります。

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

?>

現在、この吐き出された情報を認識し、製品にツールチップを適用してドラッグ可能にするスクリプトがいくつかあります。PHP ページ内でこのように実行すると、問題なく動作します。

これを同じようにするために私がやっていることは、HTMLページ内で .ajax() 呼び出しを使用することです。

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

画像は表示されますが、これらの製品に適用するドラッグ アンド ドロップ可能な効果が得られません。必要な情報がすべて取り込まれていませんか?

このプロセスで動作するドラッグ アンド ドロップ スクリプトを次に示します。

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

});

});

ありがとう、

マット

4

3 に答える 3

3

ドラッグ/ドロップの影響を適用するために行った関数呼び出しは、ajax 呼び出しの前に発生しました。画像が挿入されたら、ajax 呼び出しの成功部分で再度呼び出す必要があります。

于 2010-02-10T16:45:09.600 に答える
0

私が先日投稿したこの質問への回答をご覧になりたい方は、次のとおりです。

Simon と malsup のおかげで、彼らは私を正しい方向に向けさせてくれました。

さて、私が欠けていたのは、スクリプトの関連部分をscript.jsから次のような関数にラップすることでした:

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

そしてそれをドキュメントにバインドします。

次に、次のような成功呼び出しでそれを思い出してください。

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);
}
});
于 2010-02-16T02:20:36.087 に答える
0

現在、この吐き出された情報を認識し、製品にツールチップを適用してドラッグ可能にするスクリプトがいくつかあります。

そして、あなたの問題があります。これらのスクリプトは、すべての要素が既に存在する場合、おそらくページの読み込み時に開始されます。AJAX メソッドを使用して HTML を埋める場合 (これらのスクリプトは受信した HTML の一部であると想定しています)、onload イベントは発生しません。あなたがしなければならないことは、ページの読み込み時に呼び出されるイベントを見つけて、それらを再度発生させることです。

回避策として、AJAX の代わりに iframe を使用してコンテンツをロードすることができます。私は iframe の大ファンではありませんが、この特定のケースでは、高速なソリューションのように思えます。

于 2010-02-10T16:48:04.133 に答える