PHP 효과를 복제하는 jQuery

Question

좋아, 내가하려는 시도는 jQuery를 사용하여 HTML 페이지에서 동일한 기능을 복제하여 데이터베이스에서 페이지 제품을 가져옵니다.

현재이 프로세스의 PHP 버전 내에서 DB에 대한 일반적인 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);
}
});

이미지가 발생하지만 이러한 제품에 적용 할 수있는 드래그 가능하고 드롭 가능한 효과를 얻지 못합니다. 필요한 모든 정보를 가져 오지 않습니까?

이 과정과 함께 작동하는 드래그 앤 드롭 스크립트는 다음과 같습니다.

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

});

});

감사,

매트

Answer 1

내가 다른 날에 게시 한이 질문에 대한 답을보고 싶은 사람들에게는 다음과 같습니다.

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

Answer 2

ajax 호출 전에 발생한 드래그/드롭 영향을 적용하기 위해 만든 기능 호출은 이미지가 삽입되면 Ajax 호출의 성공 부분에 다시 부과해야합니다.

Answer 3

이제이 정보를 인식하고 제품에 툴팁을 적용하고 드래그 가능하게 만드는 다른 스크립트가 있습니다.

그리고 당신의 문제가 있습니다. 이 스크립트는 모든 요소가 이미 존재할 때 페이지로드에서 시작될 수 있습니다. ajax 메소드를 사용하여 HTML을 채우는 경우 (그리고이 스크립트가 수신 된 HTML의 일부라고 가정하면) Onload 이벤트는 결코 발사되지 않습니다. 당신이해야 할 일은 페이지로드에서 어떤 이벤트가 호출되는지 알아 내고 다시 발사하는 것입니다.

해결 방법은 iframe을 사용하여 Ajax 대신 내용을로드하는 것일 수 있습니다. 나는 Iframes의 열렬한 팬이 아니지만이 경우에는 빠른 해결책처럼 들립니다.