جافا سكريبت / المنطق الجزئي لمدير الملفات

Question

أحاول بشكل أساسي إنشاء مدير ملفات لتطبيق Rails الخاص بي على غرار كيفية عمل قسم "الوسائط" في WordPress.لدي حاليا نموذج يسمى Asset وهو المكان الذي يذهب إليه المستخدمون لتحميل الصور المختلفة.في العديد من النماذج الأخرى لدي حقل للصور وهو مجرد حقل نصي.آمل أنه عندما ينقر المستخدم على حقل النص، فإنه سيفتح "مدير الأصول" في نافذة مشروطة تحتوي على جميع الصور الموجودة بداخلها Asset عرض.عندما ينقر المستخدم على إحدى الصور، يجب عليه إغلاق النموذج وملء حقل النص بعنوان URL للصورة المحددة.

عندي نموذج اسمه Events الذي يحتوي على حقل النص الذي كنت أتحدث عنه.في ال new الإجراء الذي أستجيب فيه لـ js، حيث أقوم بتحميل جزء يحتوي على جميع الأصول في نافذة مشروطة، تمامًا كما كنت أتوقع ذلك.مشكلتي الوحيدة هي أنني أفعل هذا عبر $.getScript اتصل ولا يمكنني استدعاء أي جافا سكريبت إضافي لتحميل عنوان url للصورة مرة أخرى في حقل النص، وأعتقد أن السبب في ذلك هو أن الكائنات غير موجودة بعد.على أية حال، إلى الكود:

مراقب

def new
  @event = Event.new
  @asset = Asset.all
end
respond_to do |f|
  f.html
  f.js
end

new.js

$('.acontainer').html('<%= render @asset %>');

page.js

//when a user clicks the image field, show the asset partial
$('.image-field').click(function() {
    $.getScript('edit.js');
});

// when a user clicks an image, add it's src to the image field <-- does nothing
$('.actonainer img').click(function() {
    $('.image-field').val($(this).attr('src'));
});

ستكون أي أفكار محل تقدير كبير، خاصة إذا كان أي شخص يعرف طريقة أفضل للقيام بذلك.:-)

Answer 1

يبدو أنك قد تربط حدث النقر بعناصر .acontainer img DOM غير الموجودة في ذلك الوقت، حيث يمكنك استردادها عند النقر على .image-field.

بشكل عام، يجب عليك استخدام jQuery.on وربط الأحداث الخاصة بك بجذر المستند.وهذا ما يسمى التفويض.عندما تنقر على رابط، سيظهر الحدث ويصل إلى عقدة المستند، وسيتعامل مع الحدث.بهذه الطريقة، عند إضافة عناصر DOM عبر ajax أو مباشرة في DOM، ستظل تحصل على معالج الأحداث الذي قصدته.

$(function() {
  $(document).on('click', '.acontainer img', function(event) {
    $('.image-field').val($(this).attr('src'));
  })
});

ومع ذلك، هناك مشكلة أكبر هنا.يبدو أن لديك عدة عناصر .image-field على الصفحة.ما قد تحتاج إلى القيام به في معالج .image-field الخاص بك هو إرجاع HTML بدلاً من js، حتى تتمكن من ربط حدث بالعنصر الجذر لـ HTML المضاف حديثًا.ستحدد هذه الكتلة حقل الإدخال المحدد، الذي يمكن تعيين قيمته بمجرد النقر فوق الصورة.

$(function() {
    $(document).on('click', '.image-field',
    function(event) {
        var field = $(this);
        $.ajax('/edit', {
            success: function(data, textStatus, jqXHR) {
                var blah = $(Dialog.new(data));
                // Create a modal and return its root DOM element
                blah.on('click', 'img',
                function(event) {
                    field.val($(this).attr('src'));
                });
            }
        })
    });
});

ملاحظة أخيرة، قد ترغب في التفكير في استخدام وحدة تحكم RESTful لأصولك.قد لا ترغب في جلب مورد واحد (أصل) من وحدة تحكم تسمى EventsController، خاصة باستخدام إجراء التحرير.تريد أن يقوم GET AssetsController::index بإرجاع قائمة الأصول.

Answer 2

لا يحدث شيء عند النقر فوق الصور لأن الاستعلام الأولي عنها ".acontainer img" لا يُرجع أي عناصر، وبالتالي لا يرتبط معالج الحدث بأي شيء.لم يتم تحميلها بعد.

قد ترغب في المحاولة مسج live طريقة.يقوم بإرفاق المعالجات بالعناصر الموجودة عند تحميل الصفحة و تمت إضافة العناصر لاحقًا إلى DOM.

---

تحديث: كما يشير @aceofspades، live تم إهماله في jQuery 1.7.يستخدم on بدلاً من.