jQuery لتكرار تأثير php

Question

حسنا، أحاول القيام به هو تكرار نفس الوظيفة في صفحة HTML باستخدام JQUERY لاستعادة إلى منتجات الصفحة من قاعدة البيانات الخاصة بي.

حاليا ضمن إصدار PHP من هذه العملية، لديك دعوة PHP النموذجية إلى DB للاتصال:

<?php

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

?>

الآن هناك قسم واحد من هذه العملية التي تصدر مكالمة إلى DB وسحب المنتجات والصدى من علامة 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.

الآن ما أفعله لمحاولة الحصول على هذا للقيام بنفس الشيء هو استخدام دعوة .ajax () داخل صفحة HTML الخاصة بي.

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

حسنا بالنسبة لأولئك الذين يرغبون في رؤية الإجابة على هذا السؤال الذي نشرته في اليوم الآخر هنا أنت:

بفضل سيمون، وأشار لي 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، ولكن في هذه الحالة بالذات يبدو وكأنه حل سريع.