Jquery复制PHP效果

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

这个过程中，你有你的典型的PHP调用数据库的PHP版本中目前连接：

<?php 

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

?>

现在有这个过程的一个部分，使得对DB的调用和拉动产品和echo将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); 
} 
});

我得到的图像来横跨，但没有得到可拖动和droppable效果适用于这些产品。我不是在提供我需要的所有信息吗？

这里是拖放脚本与此过程一起工作：

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

}); 

});

感谢，

马特

来源

2010-02-10 TikaL13

在哪里可拖动/可弃脚本？ – David 2010-02-10 16:43:39

我刚刚添加了拖放脚本 – TikaL13 2010-02-10 17:18:02

奥凯对于那些希望看到的回答这个问题，我在这里贴有一天你是谁：

感谢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-16 02:20:36 TikaL13

函数调用所做应用拖/下降影响发生在你的ajax呼叫之前..一旦图像被插入，他们需要在ajax呼叫的成功部分重新呼叫

来源

2010-02-10 16:45:09

我想这就是我迷失的地方。我怎样才能在这个过程的成功部分回顾它们？ Thanks guys – TikaL13 2010-02-10 17:19:04

将你的拖/放脚本的相关部分包装在一个函数中，然后调用函数 – 2010-02-11 09:59:26

Greate让我试试看，如果可行，我会让你知道 – TikaL13 2010-02-11 16:27:49

现在有一些其他脚本认识到这一点吐出信息和应用工具提示的产品和使他们拖动。

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

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

来源

2010-02-10 16:48:04

Jquery复制PHP效果

回答

相关问题