0

好的，我正在尝试使用 JQuery 在 HTML 页面中复制相同的功能，以从我的数据库中拉入页面产品。

目前在此过程的 PHP 版本中，您可以通过典型的 PHP 调用来连接数据库：

<?php

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

?>

现在这个过程有一个部分调用数据库并提取产品并回显一个 div 和 img 标签，并将提取的信息分配到适当的区域。

<?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

现在有一些其他脚本可以识别这些吐出信息并将工具提示应用于产品并使它们可拖动。

这就是你的问题。当所有元素都已经存在时，这些脚本可能在页面加载时启动。如果您使用 AJAX 方法填充 html（并且我假设这些脚本是接收到的 html 的一部分），onload 事件将永远不会触发。您需要做的是找出页面加载时调用了哪些事件，然后再次触发它们。

解决方法可能是使用 iframe 来加载内容而不是 AJAX。我不是 iframe 的忠实粉丝，但在这种特殊情况下，这听起来像是一个快速的解决方案。

于 2010-02-10T16:48:04.133 回答
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 回答