it-swarm.asia

كيفية جعل أزرار النموذج استدعاء جافا سكريبت فقط؟

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

$form['#attached']['js'] = array(
  drupal_get_path('module', 'test').'/js/test.js',
);

$form['list'] = array(
  '#type' => 'select',
  '#options' => array(),
  '#attributes' => array(
    'name' => 'sellist',
  ),
  '#size' => 4,
);

$form['add_button'] = array(
  '#type' => 'button',
  '#value' => 'Add',
  '#attributes' => array(
    'onclick' => "add_to_list(this.form.sellist, 'Append' + this.form.sellist.length);",
  ),
);

//JavaScript
function add_to_list(list, text) {
  try {
    list.add(new Option(text, list.length), null) //add new option to end of "sample"
  }
  catch(e) {
    list.add(new Option(text, list.length));
  }
}

الرمز النهائي الخاص بي:

<?php
function jstest_menu() {
  $items['admin/config/content/jstest'] = array(
    'title' => 'JavaScript Test',
      'description' => 'Configuration for Administration Test',
      'page callback' => 'drupal_get_form',
      'page arguments' => array('_jstest_form'),
      'access arguments' => array('access administration pages'),
      'type' => MENU_NORMAL_ITEM,
  );

  return $items;
}

function _jstest_form($form, &$form_state) {
  $form['list'] = array(
    '#type' => 'select',
    '#options' => array(),
    '#size' => 4,
  );

  $form['text'] = array(
    '#type' => 'textfield',
  );

  $form['add_button'] = array (
    '#type' => 'button',
    '#value' => t("Add"),
    '#after_build' => array('_jstest_after_build'),
  );
  return $form;
}

function _jstest_after_build($form, &$form_state) {
  drupal_add_js(drupal_get_path('module', 'jstest').'/js/jstest.js');
  return $form;
}

JavaScript
(function ($) {
  Drupal.behaviors.snmpModule = {
    attach: function (context, settings) {
      $('#edit-add-button', context).click(function () {
        var list = document.getElementById('edit-list');
        var text = document.getElementById('edit-text');

        if (text.value != '')
        {
          try {
            list.add(new Option(text.value, list.length), null);
          }
          catch(e) {
            list.add(new Option(text.value, list.length));
          }

          text.value = '';
        }

        return false;
      });
      $('#edit-list', context).click(function () {
        var list = document.getElementById('edit-list');

        if (list.selectedIndex != -1)
          list.remove(list.selectedIndex);

        return false;
      });
    }
  };
}(jQuery));
9
Sathariel

أسهل طريقة لتحقيق ذلك هي إرجاع خطأ في كود جافا سكريبت الخاص بك:

function add_to_list(list, text) {
  try {
    list.add(new Option(text, list.length), null);
    return false;
  } catch(e) {
    list.add(new Option(text, list.length));   
    return false;
  }
}

أو الطريقة الأفضل هي استخدام السلوكيات:

Drupal.behaviors.some_action = function(context) {
  $('#id-button:not(.button-processed)',context)
  .addClass('button-processed').each(function() {

    //whatever you want here
    return false;
  });
}
4
Gnuget

يناسبني تعريف زر النموذج أدناه ، فإن #after_build مفيد للتحميل في جافا سكريبت الذي يمكن أن يرفق معالج النقر.

$form['add_button'] = array (
  '#type' => 'button',
  '#attributes' => array('onclick' => 'return (false);'),
  '#value' => t("Add"),
);

$form['#after_build'] = array('[module_name]_after_build');

ثم جافا سكريبت الخاص بي الذي تم تحميله في ملف منفصل بواسطة وظيفة ما بعد البناء ، يبدو كالتالي:

Drupal.behaviors.[module_name] = function(context) {
  $('#edit-add-button').click(function() {
   ...Do something here
  });
};
7
Malks

يمكنك فقط إضافة return false عبارة بعد استدعاء وظيفتك ، داخل سطر السمة لعنصر شكل الزر:

'#attributes' => array(
   'onclick' => "add_to_list(this.form.sellist, 'Append' + this.form.sellist.length); return false",
),
3
Sandokan

من الناحية المثالية ، اقرأ القراءة الخاصة بقدرات النموذج AJAX (أو AHAH). مقدمة أساسية هنا http://drupal.org/node/752056

خلاف ذلك ، أنا مندهش من تحديث الصفحة لأنها مجرد "زر" وليس إرسال أو أي شيء.

هل تحتاج إلى جافا سكريبت لإرجاع خطأ ، كما هو الحال في رابط ما لمنعها من القفز إلى أعلى الصفحة؟

0
joevallender