يوي إرسال الأزرار وإرسال الإرسال

Question

أنا أستخدم Yui 2.7.0 ودعامات لمشروعي ولدي نموذج مع زرين إرسال. واحد هو لإنقاذ والآخر للحذف. يخضع النموذج إلى الإرسال. لقد أضفت مستمعي Onclick بنجاح ، لكن المشكلة هي أن النموذج يخضع قبل تنفيذ المستمعين. أحتاج إلى تعيين معلمة الإرسال قبل أن يخضع النموذج. كيف أقوم بهذا العمل؟ فيما يلي ما لدي حتى الآن:

<form name="adminUserForm" method="post" action="manage_user.do">
  <input type="hidden" id="dispatch" name="dispatch" value="unspecified"/>
  <!-- other form fields here -->
  <input type="submit" value="Save User" id="saveUser">
  <input type="submit" value="Delete User" id="deleteUser">
</form>
<script type="text/javascript"> 
  function confirmDelete(msg)
  {
    if (confirm(msg))
    {
      return setDispatchMethod("delete");
    }
    else
      return false;
  }
  function setDispatchMethod(methodName)
  {
    dispatchField = document.getElementById("dispatch");
    dispatchField.value = methodName
    return true;
  }
  var onClickSaveUser = function (e)
  {
    return setDispatchMethod('save');
  };
  var onClickDeleteUser = function (e)
  {
    return confirmDelete('Are you sure you want to delete the user?');
  };
  new YAHOO.widget.Button("deleteUser",   {onclick: {fn: onClickDeleteUser }});
  new YAHOO.widget.Button("saveUser",     {onclick: {fn: onClickSaveUser   }});
</script>

Answer 1

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

فيما يلي بعض الأفكار (جميعها تعمل):

طريقة 1

تعامل مع حدث Mousedown بدلاً من حدث Click (حرائق Mousedown قبل النقر).

var deleteUserButton = new YAHOO.widget.Button("deleteUser");
deleteUserButton.on("mousedown", onClickDeleteUser);

var deleteUserButton = new YAHOO.widget.Button("saveUser");
deleteUserButton.on("mousedown", onClickSaveUser);

//Using this, you can easily stop the form from submitting
//by using YAHOO's event utility (by adding this code, you
//will prevent the click event from firing as well).

YAHOO.util.Event.preventDefault(e); 

الطريقة 2

استخدم النوع = الرابط بدلاً من النوع = إرسال (افتراضي). يقومون فقط بتقديم النموذج إذا كان النوع = إرسال (لم أختبر هذا بما يكفي لمعرفة ما إذا كان النموذج لا يزال يخضع من تلقاء نفسه - قد تضطر إلى الاتصال يدويًا. submit ())

new YAHOO.widget.Button("deleteUser", { type: 'link', onclick: { fn: onClickDeleteUser} });
new YAHOO.widget.Button("saveUser", { type: 'link', onclick: { fn: onClickSaveUser} });

الطريقة 3

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

بغض النظر عن أي من هذه الطرق التي تستخدمها ، يجب أن تستخدم هذا لمنع النموذج من إرسال:

YAHOO.util.Event.preventDefault(e); 

Answer 2

هنا حل سهل

<form>
    <input type="submit" name='dispatch' value="Save User" id="saveUser">
    <input type="submit" name='dispatch' value="Delete User" id="deleteUser">
</form>

يمكنك إزالة الإدخال المخفي

وسيتم تعيين متغير طلب الإرسال الخاص بك على "حفظ المستخدم" إذا تم النقر على الزر الأول

أو "حذف المستخدم" هو النقر على 2nd

Answer 3

هذا السؤال عمره عدة سنوات ، لكن لا يزال لدي مشروع يستخدم Yui 2.9.0 ، وقد واجهت نفس المشكلة ، لذلك سأشارك حلي في حالة العثور على شخص آخر في نفس المربى.

عدة أشياء تستحق الإشارة إلى هذا السؤال. أولاً ، المشكلة التي يصفها Gabriel ، حيث يقوم معالج Yui 2.9.0 بتقديم النقر إلى النموذج قبل أن يتم استدعاء معالج النقر ليس مشكلة على IE ، على الأقل من خلال IE9. على Firefox من خلال FF12 على الأقل ، تحدث المشكلة. أظن أنها ستكون أيضًا مشكلة في Chrome و Safari ومعظم المتصفحات الأخرى إن لم يكن جميعها ، كما أرى ما يبدو أنه حالة خاصة لـ IE في معالج زر Yui.

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

...

<form id='form'>
    <input type="button" value="&gt;" id="start_survey">

...

function start_survey (p_oEvent, p_aArgs) {
    var input = document.createElement ('input');
    input.type = 'hidden';
    input.name = this.get ('name');
    input.value = '&gt;'

    var form = YAHOO.Dom.get ('form');
    form.appendChild (input);
    form.submit();
}

new YAHOO.widget.Button ("start_survey", {onclick: {fn: start_survey}});

...

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