سؤال

ما هي أفضل مكتبة JavaScript، أو البرنامج المساعد أو التمديد إلى مكتبة، والتي قامت بتنفيذ وظيفة التلقائي؟

الحاجة المحددة هي أن تكون قادرة على "حفظ" شبكة البيانات. فكر في Gmail و Google Documents 'AutoSave.

لا أريد إعادة اختراع العجلة إذا اخترعت بالفعل. أبحث عن تنفيذ موجود لوظيفة AutoSave () السحرية.

حفظ تلقائي: الدفع إلى رمز الخادم الذي يحفظ التخزين المستمر، عادة DB. إطار رمز الخادم هو خارج نطاق هذا السؤال.

لاحظ أنني لا أبحث عن مكتبة AJAX، ولكن مكتبة / إطار مستوى أعلى: يتفاعل مع النموذج نفسه.

قدمت Daemach تنفيذا أعلى من JQuery @ http://daemach.blogspot.de/2007/03/autosave-jquery-plugin.html. النصي يستضيف]. أنا غير مقتنع أنه يلبي معايير الوزن وخفيفة الوزن.

معايير

  • مستقرة وخفيفة الوزن، مصممة جيدا
  • يحفظ onchange و / أو OnBlur
  • لا يحفظ بشكل أكثر تواترا، ثم عدد معين من المللي ثانية
  • يعالج تحديثات متعددة تحدث في نفس الوقت
  • لا ينقذ إذا لم يحدث أي تغيير منذ آخر حفظ
  • يحفظ على عناوين URL مختلفة لكل فئة المدخلات
هل كانت مفيدة؟

المحلول

يجب أن يكون الحفظ التلقائي بسيطا جدا في التنفيذ، ويمكنك استخدام أحد الأطر الرئيسية مثل JQuery أو Mootools. كل ما عليك فعله هو استخدام window.settimeout () بمجرد تعديل المستخدم الخاص بك شيء يجب أن يكون التلقائي، ولديه هذه المهلة استدعاء أطر JavaScript الاشياء القياسية ajax.

على سبيل المثال (مع jQuery):

var autosaveOn = false;
function myAutosavedTextbox_onTextChanged()
{
    if (!autosaveOn)
    {
        autosaveOn = true;

        $('#myAutosavedTextbox').everyTime("300000", function(){
             $.ajax({
                 type: "POST",
                 url: "autosavecallbackurl",
                 data: "id=1",
                 success: function(msg) {
                     $('#autosavenotify').text(msg);
                 }
             });
        }); //closing tag
    }
}

نصائح أخرى

أعلم أن هذا السؤال قديم، لكن أود أن أدرج كود يعجبني أكثر. لقد وجدت هنا:http://codetunnel.io/how-to-implement-autosave-in-your-web-app/

هنا هو الرمز:

var $status = $('#status'),
    $commentBox = $('#commentBox'),
    timeoutId;

$commentBox.keypress(function () { // or keyup to detect backspaces
    $status.attr('class', 'pending').text('changes pending');

    // If a timer was already started, clear it.
    if (timeoutId) clearTimeout(timeoutId);

    // Set timer that will save comment when it fires.
    timeoutId = setTimeout(function () {
        // Make ajax call to save data.
        $status.attr('class', 'saved').text('changes saved');
    }, 750);
});

إنه يوفر بعد توقف المستخدم عن الكتابة لأكثر من 750 مللي ثانية.

كما أن لديها حالة السماح للمستخدم بمعرفة أن التغييرات قد تم حفظها أم لا

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

لذلك، فإنك تتطلع إلى معرفة متى تم حفظه آخر مرة، قبل استدعاء وظيفة AJAX.

سيمكنك هذا من التوفير فقط عند الحاجة، ولكن بمعدل محدد مسبقا. لذلك، إذا كنت ترغب في توفير كل 5 دقائق، فغالحاء بغض النظر عن التغييرات التي تم إجراؤها، إذا تم إجراء تغيير في نافذة 5 دقائق التي تحفظها.

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

ل AutoSave بسيطة من حقول النموذج في ملفات تعريف الارتباط، استخدم هذا البرنامج المساعد الرائع http://rikrikrik.com/jquery/autosave/لا يرسل البيانات إلى الخادم، ولكن إذا لم تجد أي شيء أفضل، فمن الأسهل الترقية منه هو funcitonalily غير ذلك من الصفر.

أود أن أقترح عليك استخدام jQuery. لا يزال يتعين القيام بجزء "حفظ" على الخلفية، بطبيعة الحال، لكن مسج يجعل تقديم أياكس يطلب نسيما.

إذا كانت لديك ASP.NET BACKEND، فيمكنك ببساطة استدعاء WebMethod وتقديم السلسلة المرتبطة (محتوى Textbox وما إلى ذلك) على فاصل زمني محدد:

[WebMethod]
public void AutoSave(String autoSaveContent)
{
 // Save
}

سيكون طلب JQuery للاتصال بهذه الطريقة:

$.ajax({  
type: "POST",  
contentType: "application/json; charset=utf-8",  
url: "AutoSaveService.asmx/AutoSave", 
data: "{textBoxToAutosaveText}",  
dataType: "json"
});  

هذا كل شئ. يمكنك العثور على jQuery في http://jquery.com/ .

ليس كل ما تحتاجه مؤقت يطلق كل x ثواني؟ ستؤدي وظيفة Callback إلى عودة AJAX إلى خادم النموذج باستخدام الحقل "AutoSave = True". مجرد التعامل مع هذا postback على الخادم وأنت القيام به.

تزامن هو مسج البرنامج المساعد يضيف ذلك وظيفة إلى صفحة HTML الخاصة بك لإرسال إدخال المستخدم بشكل دوري مرة أخرى إلى الخادم. فيمصدر الرمز)

JavaScript و HTML عينة:

<script>
  $("input").synchronize();
</script>

<input type="text" value="initial_value" 
       class="{url:'/entity.cfc?method=updateDescription',data:{ID1:'1',ID2:'2'}}" />

يؤدي طلب أوجاكس الناتج بعد التأخير الافتراضي لل 1S:

http://localhost/entity.cfc?method=updateDescription&value=update_value&preVal=initial_value&ID1=1&ID2=2

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

function autoSave()
{
  $.get(URL, DATA); // Use any AJAX code here for the actual autosaving. This is lightweight jQuery.
  setTimeout("autoSave()", 60000); // Autosaves every minute.
}
autoSave(); // Initiate the auto-saving.
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top