القضبان 3 التحرير في مكانها

Question

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

قبل تحرير حقل "الاعتمادات للتبرع":
لديك 10 أرصدة متبقية. اعتمادات للتبرع: 0.

بعد تحرير حقل "الاعتمادات للتبرع":
لديك 5 أرصدة متبقية. اعتمادات للتبرع: 5.

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

• رمز jQuery-in-Place-Editor
• عينة من القضبان
• جيثب ريبو من تطبيق قضبان العينة

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

ها هو jquery javaScript (من /public/javascripts/application.js في تطبيق العينة) أعتقد أنه مناسب:

// Using a callback function to update 2 divs
$("#editme4").editInPlace({
    callback: function(original_element, html, original){
        $("#updateDiv1").html("The original html was: " + original);
        $("#updateDiv2").html("The updated text is: " + html);
        return(html);
    }
});

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

أ. هناك منشأة في محرر jQuery في مكانها للاتصال بعنوان URL. هل يمكنني استخدام هذا لاستدعاء نص روبي والحصول على نتيجة؟ كيف أفعل هذا في القضبان؟ فيما يلي رمز للاتصال بعنوان URL (مرة أخرى من /public/javascripts/application.js) ؛ لكنه يدعو نص PHP.

$("#editme1").editInPlace({
    // callback: function(unused, enteredText) { return enteredText; },
    url: 'server.php',
    show_buttons: true
});

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

Answer 1

الحل لهذه المشكلة معقد للغاية ، لكنني وجدت طريقة للقيام بذلك. من المدهش بالنسبة لي أن الحل غير متاح بسهولة ، لأنه يبدو ، كما يقول R-Dub ، شيء شائع جدًا. انتهى بي الأمر إلى عدم استخدام أي من التسهيلات في مكانه في مكون إضافي jQuery ، وبدلاً من ذلك ، قمت بتعديل حقل نص مباشرة بمساعدة jQuery على أساس حقل نص النموذج. بعبارة أخرى ، تابعت (ب) أعلاه.

لدي وجهة نظر تبدو هكذا:

Available: <span id="available_cr"><%= @available_credits %></span>
Remaining: <span id="remaining_cr"><%= @remaining_credits %></span>

<%= form_for(@page, :html => { :id => 'do_fvalue' }, :remote => true) do |f| %>
  <div class="field">
    How many to buy at <%= @cost %> credits per unit? <%= f.text_field :fvalue, :autocomplete => :off %>
  </div>
  <div class="field">
    How many to buy at <%= @cost_20 %> credits per unit? <%= f.text_field :gvalue, :autocomplete => :off %>
  </div>
  <div class="actions">
    <%= f.submit "Update" %>
  </div>
<% end %>

ثم أقوم بتوجيه القضبان @-variables إلى .html.erb جزئي (تم تقديمه في بداية صفحتي .html.erb) بحيث يمكن لـ JavaScript/jQuery الوصول إليها:

<script type="text/javascript">
  var cost = parseInt(<%= @cost %>)
  var cost_20 = parseInt(<%= @cost_20 %>)
  var available_credits = parseInt(<%= @available_credits %>)
  var remaining_credits = parseInt(<%= @remaining_credits %>)
</script>

ثم ، في الجمهور/JavaScripts/Applications.js ، لدي الرمز التالي:

function checkFields(){
  var to_buy_f = $("#page_fvalue").val();
  var to_buy_g = $("#page_gvalue").val();
  var subtract_f = to_buy_f * cost;
  var subtract_g = to_buy_g * cost_20;
  var remain = available_credits - subtract_f - subtract_g;
  $("#remaining_cr").text(remain);
};

$("#page_fvalue").keyup(function () {
   checkFields();
}).keyup();

$("#page_gvalue").keyup(function () {
   checkFields();
}).keyup();

تقوم دالة CheckFields بتحديث #Remaining_CR استنادًا إلى القيم الموجودة في #PAGE_FVALUE و #page_gvalue. لاحظ أنه يستفيد من متاح _credits ، التكلفة ، و Cost_20 ، والتي قمنا بتعليقها في متغيرات JavaScript أعلاه. تخبر وظيفتي الأخيرين jQuery بمراقبة #page_fvalue و #page_gvalue لأحداث keyup. عندما يضغط المستخدم على مفتاح ، يقوم باستدعاء CheckFields () لتحديث #Remaining_CR.

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

Answer 2

ما تحاول القيام به أمر شائع جدًا. ما تريد القيام به هو تقديم طلب AJAX ضمن رد الاتصال هذا إرسال البيانات الأصلية إلى تطبيق Rails الخاص بك وإعادة HTML المعدلة إلى صفحتك. ها هي jQuery صفحة اليدوية AJAX. التمرير لأسفل لرؤية بعض الأمثلة.