زر العودة التعامل مع نموذج ديناميكي

Question

لدي نموذج مع مجموعة من حقول النص. يمكن للمستخدم (من خلال JavaScript) إضافة عدد التعسفي من حقول النص إلى النموذج. بعد تقديم النموذج والضغط على الزر الخلفي، يعرض النموذج فقط مع الحقول التي كانت على النموذج الأصلي عند تقديمها لأول مرة (يتم فقد أي حقول نصية إضافية). ما هي أفضل طريقة للسماح بالزر الخلفي لتقديم النموذج في الحالة عندما قدم المستخدم؟ أي أفكار هي موضع ترحيب، بعض الأشياء التي جربتها هي:

• ضع بيانات النموذج في ملف تعريف ارتباط (هذا لا يعمل بشكل رائع لسببين، لكن القاتل الأكبر بالنسبة لي هو أن ملفات تعريف الارتباط تقتصر بحجم 4K)
• ضع بيانات النموذج في جلسة
• إرسال النموذج عبر Ajax ثم إدارة التاريخ

شكرا للمساعدة. لقد نشرت نموذج اختبار على موقع الويب الخاص بي في http://fishtale.org/formtest/f1.php.. وبعد هنا أيضا هنا نموذج بسيط يظهر السلوك الذي ذكرته:

<form action="f2.php" method="post">
<input type="text" name="text[]" id="text1"/>
<input type="submit" name="saveaction" value="submit form" />
</form>

<a href="f2.php" id="add_element">Add Form Element</a>

<script type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" ></script>

<script type="text/javascript" >
    $('#add_element').click(function (event) {
        event.preventDefault();
        $('#text1').after('<input type="text" name="text[]" />');
    });
</script>

يشبه هذا سؤال نشرته منذ فترة، أفضل طريقة للمرة الثانية لمغادرة بيانات النموذج, ومع ذلك، يتم تعديل عناصر هذا النموذج من قبل المستخدم.

Answer 1

لا يمكنني العثور على مكتبة مسبقا لهذا، لكنني متأكد من حلها من قبل. إذا كان لي نفسي، فسأخذ هذا النهج:

1. استخدم ال نمط الأمر بحيث تستدعي كل طريقة تعدل واجهة مستخدم الصفحة عن طريق إضافة عناصر التحكم بطريقة AJAX لدفع الطريقة التي تم استدعاءها (تمثيل JavaScript النصي) على قائمة انتظار مخزنة في جلسة الخادم.

2. بعد اكتمال تحميل الجسم، استخدم طريقة AJAX للاستعلام عن جلسة الخادم لقائمة انتظار الأوامر للصفحة قيد التشغيل. إذا تم استرداد المرء، فقط eval كل عضو في قائمة الانتظار لإعادة بناء واجهة المستخدم في العلامة بنفس الترتيب الذي قام به المستخدم بذلك.

ضع في اعتبارك هذا النهج الذي تقوم بتسجيله ليس فقط إضافات عن الضوابط، ولكن عمليات الإزالة أيضا. ستحتاج إلى حاملي حالة منفصلة عناصر تحكم إدخال المستخدم، مثل مربعات النص (ستحتاج أيضا إلى جلسة جانب الخادم مع الوصول إلى طريقة AJAX).

Answer 2

ماذا عن إنشاء <input type="hidden"> (مع عدم وجود name أو خارج النموذج، لذلك لم يتم تقديمه) تخزين قائمة مشفرة من الحقول الإضافية لإضافة وقيمها؟ في حين أن المتصفح لن يتذكر الحقول المضافة حديثا على "الظهر"، فإنه إرادة تذكر قيم الحقول المخفية التي كانت في النموذج من البداية.

فيما يلي مثال يحفظ الحقول الإضافية على تفريغ المستند واستردادها على استعداد:

<input type="hidden" id="remembertexts" />

<form action="http://www.google.com/" method="get">
    <div id="texts">
        <input type="text" name="text[]" value="" />
    </div>
    <div>
        <input type="submit" />
        <input type="button" id="addtext" value="+" />
    </div>
</form>

<script type="text/javascript">

    // Add new field on button press
    //
    $('#addtext').click(function() {
        addInput('');
    });

    function addInput(text) {
        $('#texts input').eq(0).clone().val(text).appendTo('#texts');
    };

    // Store dynamic values in hidden field on leaving
    //
    $(window).bind('beforeunload', function() {
        var vals= [];
        $('#texts input').each(function() {
            vals.push(encodeURIComponent(this.value));
        });
        $('#remembertexts').val(vals.join(';'));
    });

    // Retrieve dynamic values on returning to page
    //
    $(function() {
        var extratexts= $('#remembertexts').val().split(';').slice(1);
        $.each(extratexts, function() {
            addInput(decodeURIComponent(this));
        });
    });
</script>

ملاحظات:

• يمكنك استخدام form.onsubmit بدلا من window.onbeforeunload إذا كنت بحاجة فقط إلى تذكر القيم على التقديم. onunload لا يعمل لأن بعض المتصفحات ستقوم بالفعل بتخزين قيم النموذج القديم قبل حدوث هذا الحدث.

• في فايرفوكس موقف المدخلات المخفية مهمة. لسبب ما، إذا وضعت عليه أسفل الحقول المضافة بشكل ديناميكي، فإن Firefox يحصل على الخلط بين المدخلات التي يتم بها وفشلها في تذكر القيمة.

• هذا المثال لا يعمل في الأوبرا. يمكن صنعه للعمل في الأوبرا، لكنه ألم. إن استدعاء Opera الخاص بتحميل وأحداث تفريغ غير متسقة، لذا يجب عليك استخدام Onsubmit بدلا من ذلك، أو إعداد الحقل المخفي على فاصل اقتراع أو شيء ما. والأسوأ من ذلك، عندما يتذكر Opera القيم السابقة في النموذج، فإنه في الواقع لا يملأها حتى بعد قام Onload بإطلاق النار! هذا بالفعل يسبب العديد من مشاكل النص البرمجة النصية. يمكنك العمل على أنه من خلال وضع مهلة صغيرة في تحميلك في الانتظار حتى تستمر قيم النموذج إذا كنت بحاجة إلى توافق الأوبرا.

Answer 3

في متصفحات جيدة، يمكنك أن تعمل بشكل مثالي ببساطة لا كسرها.

يستخدم Firefox 1.5 التخزين المؤقت في الذاكرة للحصول على صفحات الويب بأكملها، بما في ذلك حالات JavaScript الخاصة بهم، لجلسة مستعرض واحدة. يتطلب الذهاب إلى الوراء وإلى الأمام بين الصفحات التي تمت زيارتها أي تحميل صفحات وحفظ دول JavaScript. مصدر

هذا مدعوم في أوبرا و WebKit. جدا. ومع ذلك، فإن ذاكرة التخزين المؤقت DOM ممكنة فقط في التمسك بالقواعد:

1. لا تستخدم onunload, onbeforeunload.

2. لا تستخدم Cache-control: no-store أو must-revalidate.
   في php يجب أن تتغير session.cache_limiter من patently_ridiculous (أعتقد أنهم يتهجى ذلك nocache) ل none.

   session_cache_limiter('none');
   

3. لسوء الحظ، فإن https هو أيضا خارج.

إذا كنت لا تجبر المتصفحات على إعادة تحميل الصفحة، فلن. سيبقيون دوم وقيمها دون تغيير، تماما RFC 2616 يقترح.

---

ومع ذلك, ، إذا كنت تبحث عن مكان لتخفيف البيانات، فهناك اختراق ذكي بشكل لا يصدق - window.name يمكن تخزين ميغابايت من البيانات. وبعد لم يتم إرسالها إلى الخادم، ولا يتم مشاركتها بين Windows.

هناك أيضا ملفات تعريف الارتباط فلاش و HTML 5 localStorage يتم تنفيذها في IE8 و Safari 4.

Answer 4

الخطوة 2: معالجة البرنامج النصي يضع النموذج القيم التي تم إدخالها في صفيف وتخزينها التي يتم تعيينها في متغير جلسة (أو نص / DB / كل ما تجده مناسبا).

الخطوة 1: البرنامج النصي الذي يخرج النموذج يضيف جافا سكريبت (مما يملأ بدوره في النموذج) إذا تم العثور على متغير الجلسة (كما أنه يمسح أيضا متغير الجلسة).

Answer 5

يمكنك إجراء زر الخلفي الخاص بك في الجزء العلوي من صفحة الويب وجعلها أكبر وأجماء من الزر مرة أخرى من الزر "استعداد متصفح الويب القياسي".

تحت غطاء محرك السيارة، يمكن أن يعرف الرمز ما هي الدولة السابقة والعودة إليها أو إذا لم تكن هناك دولة سابقة، فيمكنك الاتصال بوظيفة الظهر للمتصفح؟

Answer 6

منع استخدام الزر الخلفي. عند الضغط على الزر الخلفي، Rerender الصفحة السابقة للمستخدم مع الحقول الجديدة المضمنة، إما بشكل واضح إذا كان ذلك منطقي، أو مخفي. بهذه الطريقة قادرة المستخدم على استخدام الزر الخلفي بشكل طبيعي ولديك تحكم كامل في ظهور الصفحة "السابقة" ".

في حالة الاستخدام المحدد، تحتاج فقط إلى تقديم الصفحة مع جميع الحقول المرئية ومليئة بالقيم التي تم تقديمها.

هذا هو نمط جيد لمتابعة أي نوع من العمليات معالج حيث توفر تسلسل من النماذج للمستخدم لملء الدخول وقد يختارون العودة إلى نموذج سابق.

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

فيما يلي بعض الصفحات الإضافية التي تناقش السيطرة على وظيفة الزر الخلفي واستخدام حدث تفريغ لاستمرار بيانات النماذج:

• إتقان زر الظهر مع جافا سكريبت
• لا تدع الباب ضربك
• عبر متصفح تفريغ الحدث والزر الخلفي
• بيانات النماذج المدخل المستمرة في WebSphere Portal V5.1