إدارة القيم القديمة باستخدام JavaScript وBlade: Laravel 10 نماذج إدخال ديناميكية

إدارة بيانات النموذج القديم باستخدام JavaScript في Laravel 10

عند تطوير النماذج الديناميكية في Laravel 10، أحد التحديات الشائعة هو الاحتفاظ بإدخال المستخدم بعد فشل التحقق من الصحة. في قوالب Blade، يمكن عادةً إدارة ذلك باستخدام ملف قديم() وظيفة المساعدة، التي تستعيد القيم التي تم إدخالها مسبقًا. ومع ذلك، فإن استخدام هذه الوظيفة ديناميكيًا عند إلحاق حقول النموذج باستخدام JavaScript يتطلب معالجة خاصة.

في مشروعي، واجهت هذه المشكلة أثناء تطوير نظام يسمح للمستخدمين بإضافة المكافآت وإزالتها ديناميكيًا. بعد فشل التحقق من الصحة، يجب أن يحتفظ النموذج ببيانات المكافأة القديمة ويعرضها وفقًا لذلك. لارافيل قديم() تعمل الوظيفة بشكل جيد داخل Blade، ولكن دمجها مع منطق إلحاق JavaScript قد يكون أمرًا صعبًا.

يكمن جوهر المشكلة في كيفية تفسير قوالب Blade وJavaScript للبيانات بشكل مختلف. عند إلحاق عناصر جديدة باستخدام JavaScript، أحتاج إلى إدراج القيم القديمة ديناميكيًا، لكن بناء الجملة للقيام بذلك ليس دائمًا واضحًا. يؤدي الفشل في تنفيذ ذلك بشكل صحيح إلى فقدان البيانات المهمة بعد إعادة تحميل الصفحة.

سيرشدك هذا الدليل إلى منهج عملي لاستخدام قديم() وظيفة ضمن الحقول التي تم إنشاؤها بواسطة JavaScript. سنستكشف كيفية إلحاق المدخلات الجديدة ديناميكيًا والتأكد من الاحتفاظ الصحيح بالقيم القديمة في مشروع Laravel 10. دعونا نتعمق!

التعامل مع النماذج الديناميكية مع القيم القديمة في Laravel 10

في البرامج النصية المقدمة، يتمثل التحدي الأساسي في إلحاق حقول نماذج المكافآت الجديدة ديناميكيًا مع إمكانية الاحتفاظ بها القيم القديمة بعد فشل التحقق من الصحة في Laravel. عادة، لارافيل قديم() يقوم المساعد باسترداد القيم التي تم إدخالها مسبقًا بعد فشل إرسال النموذج، ولكن هذا غالبًا ما يكون صعبًا عند إلحاق العناصر باستخدام JavaScript. الحل يكمن في الجمع بين بليد @json() التوجيه باستخدام JavaScript، مما يسمح بتمرير بيانات الإدخال القديمة مباشرة إلى الحقول التي تم إنشاؤها ديناميكيًا.

الوظيفة addMoreItem() هو المفتاح لهذا النهج. ويستخدم جافا سكريبت لإلحاق حقول إدخال جديدة لكل مكافأة. قبل إلحاق الحقول، نتحقق مما إذا كان هناك أي قيم قديمة تستخدم @json(قديم('مكافأة')). يؤدي هذا إلى تحويل قيم الإدخال القديمة من جانب PHP إلى كائن JavaScript، والذي يمكن بعد ذلك تكراره باستخدام كائن.إدخالات(). تسمح هذه الطريقة بالمرور عبر كل إدخال مكافأة وإدراج القيم المرتبطة به في عناصر النموذج التي تم إنشاؤها ديناميكيًا.

يستخدم البرنامج النصي أيضًا إدراجالمجاورHTML() الطريقة، التي تقوم بإدراج محتوى HTML في موضع محدد بالنسبة للنموذج الموجود. يعد هذا أمرًا بالغ الأهمية لإلحاق عناصر المكافآت الجديدة دون تحديث الصفحة. على سبيل المثال، عند إضافة مكافأة جديدة، يقوم البرنامج النصي بإنشاء حقل نموذج جديد بقيم الإدخال المناسبة وإلحاقه بحاوية النموذج. ال قديم() تضمن الوظيفة أنه في حالة فشل التحقق من صحة النموذج، يتم عرض البيانات التي تم إدخالها مسبقًا مرة أخرى للمستخدم.

وأخيرًا، يعد اختبار الوحدة أمرًا بالغ الأهمية للتحقق من صحة سلوك هذه البرامج النصية. في هذه الحالة، AssurseSessionHasOldInput() و تأكيدSessionHasErrors () تُستخدم في اختبارات PHPUnit للتأكد من أن Laravel يخزن ويستعيد بيانات الإدخال القديمة بشكل صحيح. هذه الاختبارات تؤكد أن جائزة يتم الاحتفاظ بالبيانات في الجلسة بعد فشل التحقق من الصحة، مما يضمن احتفاظ حقول النموذج الديناميكي بقيم الإدخال السابقة عند عمليات إعادة تحميل النموذج اللاحقة. يضمن هذا المزيج من JavaScript وBlade تجربة مستخدم سلسة عند العمل مع النماذج الديناميكية المعقدة في Laravel.

// JavaScript function to dynamically append form fields
function addMoreItem() {
    let rewardCount = document.querySelectorAll('.reward-item').length + 1;
    let rewardData = @json(old('reward'));  // Get old values from Laravel
    let rewardItem = rewardData ? rewardData[rewardCount] : {};  // Default to empty object
    let rewardHtml = `
        <div id="reward-${rewardCount}" class="reward-item">`
            <input type="text" name="reward[${rewardCount}][reward_name]"
                value="{{ old('reward.${rewardCount}.reward_name', rewardItem.reward_name || '') }}" />`
        </div>`;
    document.getElementById('reward_details').insertAdjacentHTML('beforeend', rewardHtml);
}

// JavaScript function that handles form generation and appends old values if available
function appendRewardItem(key, value) {
    let rewardHtml = `
        <div id="reward-${key}" class="card">`
            <input type="text" name="reward[${key}][reward_name]" class="form-control"
                value="{{ old('reward.' + key + '.reward_name', value.reward_name || '') }}">`
        </div>`;
    document.getElementById('reward_details').insertAdjacentHTML('beforeend', rewardHtml);
}

// Loop through existing rewards and append them
let rewardDetails = @json(old('reward'));
if (rewardDetails) {
    Object.entries(rewardDetails).forEach(([key, value]) => {
        appendRewardItem(key, value);
    });
}

// PHPUnit test for validating old input values
public function testOldRewardValuesPersist() {
    // Simulate form validation failure
    $response = $this->post('/submit-form', [
        'reward' => [
            '1' => [
                'reward_name' => 'Test Reward 1'
            ]
        ]
    ]);
    $response->assertSessionHasErrors();
    $response->assertSessionHasOldInput('reward');  // Check old input
}

تحسين التعامل مع النماذج الديناميكية في Laravel باستخدام Blade وJavaScript

في Laravel، يتطلب التعامل ديناميكيًا مع مدخلات النموذج، خاصة مع JavaScript، اهتمامًا دقيقًا بكيفية تفاعل Blade وJavaScript. أحد الجوانب الرئيسية التي يتم تجاهلها غالبًا هو الحفاظ على بيانات النموذج بعد حدوث أخطاء في التحقق من الصحة. باستخدام قديم() وظيفة المساعد، يوفر Laravel طريقة مباشرة لإعادة ملء حقول الإدخال، ولكن دمج هذه الوظيفة في العناصر المضافة ديناميكيًا يتطلب نهجًا أكثر تفكيرًا. وينطبق هذا بشكل خاص عند التعامل مع المصفوفات أو المجموعات، مثل المكافآت، حيث يجب أن يحتفظ كل عنصر ببياناته.

الحل القوي لهذا التحدي هو الجمع بين حلول Laravel @json() التوجيه مع جافا سكريبت. ال @json() يسمح التوجيه بتحويل البيانات من جانب الخادم إلى تنسيق يمكن لجافا سكريبت فهمه، وهو أمر بالغ الأهمية لتمرير القيم القديمة مرة أخرى إلى الواجهة الأمامية. ومن خلال تعيين هذه القيم في حقول النماذج الملحقة حديثًا، يمكنك التأكد من عدم فقدان المستخدمين لتقدمهم في حالة حدوث فشل في التحقق من الصحة. تعمل هذه التقنية على تعزيز قوة عرض قالب Blade مع السماح أيضًا بمرونة إدارة النماذج المستندة إلى JavaScript.

بالإضافة إلى استعادة القيم القديمة، من المهم مراعاة معالجة الأخطاء والتحقق من صحة الإدخال. بالإضافة إلى قديم()يوفر لارافيل @خطأ() لعرض رسائل التحقق بجوار حقول محددة، مما يسهل على المستخدمين فهم الخطأ الذي حدث. يضمن دمج كلا الأمرين تجربة سلسة عندما تفشل النماذج في التحقق من الصحة ويحتاج المستخدمون إلى تصحيح مدخلاتهم. من خلال الجمع بين وظائف Blade ومرونة JavaScript، يمكنك الحفاظ على تجربة مستخدم ديناميكية ومستقرة في تطبيقات Laravel الخاصة بك.