Jquery 复制 PHP 效果答案

【问题标题】：Jquery to replicate a PHP effectJquery 复制 PHP 效果
【发布时间】：2010-02-10 16:42:23
【问题描述】：

好的，我正在尝试使用 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);
                }

});

});

谢谢，

马特

【问题讨论】：

可拖放脚本在哪里？
我刚刚添加了拖放脚本

标签： jquery ajax tooltip shopping-cart simpletip

【解决方案1】：

您为应用拖放影响而进行的函数调用发生在您的 ajax 调用之前。一旦插入图像，它们将需要在 ajax 调用的成功部分重新调用

【讨论】：

我想这就是我迷路的地方。我怎样才能在这个过程的成功部分回忆它们？谢谢大家
将拖放脚本的相关部分包装在一个函数中，然后调用该函数
Simon... 很抱歉，您能告诉我如何做到这一点吗？

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

好的，对于那些希望看到我前几天在这里发布的这个问题的答案的人来说，你是：

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

【讨论】：