Bagaimana cara membuat tombol form hanya memanggil javascript?

9

Saya bereksperimen dengan formulir JavaScript dan Drupal. Saat ini saya sedang mencoba membuat tombol dalam bentuk administrasi modul yang akan menggunakan JavaScript untuk menambahkan opsi ke daftar pilih. Masalah yang saya hadapi adalah ketika saya mengklik tombol, JavaScript saya dipanggil tetapi seluruh bentuk di-refresh. Saya telah melihat referensi API Formulir berpikir ada semacam atribut yang dapat saya atur pada tombol untuk menghentikannya tetapi tidak menemukan apa pun. Apakah ada cara saya dapat menghentikan tombol untuk menyegarkan halaman atau apakah ini jalan buntu?

$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));
  }
}

Kode terakhir saya:

<?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));
Sathariel
sumber

Jawaban:

4

Cara paling mudah untuk mencapai ini adalah mengembalikan false dalam kode javascript Anda:

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;
  }
}

atau cara yang lebih baik menggunakan perilaku:

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

    //whatever you want here
    return false;
  });
}
Gnuget
sumber
1
Terima kasih telah menunjukkan perilaku, saya membacanya sekarang sebagai fakta. Dan untuk beberapa alasan mengembalikan kesalahan tidak bekerja untuk saya; halaman masih menyegarkan = /. Untuk pertanyaan tindak lanjut, bagaimana Anda harus menangani pengguna yang memblokir / menonaktifkan javascript?
Sathariel
Jika Anda meletakkan tombol di luar ke tag <form> </form> ini tidak akan dikirimkan tetapi ini tidak disarankan, cara yang lebih konvensional untuk melakukannya adalah dengan javascript. Jika formulir Anda masih menyegarkan, periksa apakah ada javascript lain yang menampilkan kesalahan atau sesuatu seperti itu.
Gnuget
Di mana harus meletakkan kode Drupal.Behaviors? dalam file javascript?
7

definisi tombol form di bawah ini berfungsi untuk saya, #after_build berguna untuk memuat dalam javascript yang dapat melampirkan pengendali klik.

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

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

Kemudian javascript saya yang dimuat dalam file terpisah dengan fungsi after build, terlihat seperti:

Drupal.behaviors.[module_name] = function(context) {
  $('#edit-add-button').click(function() {
   ...Do something here
  });
};
Malks
sumber
After_build tidak berfungsi untuk saya. Itu melempar saya kesalahan fatal: Panggil ke fungsi [module_name] _after_build () yang tidak terdefinisi. Jika saya mendefinisikan metode [module_name] _after_build () dengan tubuh kosong, formulir tidak merender. Bisakah Anda menjelaskan lebih banyak bagaimana cara menggunakannya?
sumanchalki
Maaf, saya tidak melihat pertanyaan ini ... Saya menganggap Anda mengganti [module_name] dengan nama sebenarnya dari modul Anda?
Malks
$ form ['# after_build'] adalah untuk menambahkan fungsi sisi server (PHP) - ini bukan untuk menentukan javascript build post. api.drupal.org/api/drupal/…
Christian
3

Anda bisa menambahkan return falsepernyataan setelah pemanggilan fungsi Anda, di dalam garis atribut elemen bentuk tombol:

'#attributes' => array(
   'onclick' => "add_to_list(this.form.sellist, 'Append' + this.form.sellist.length); return false",
),
Sandokan
sumber
Saya pikir pilihan yang lebih baik adalah menambahkan pendengar acara eksternal daripada meletakkan semuanya di acara onclick inline.
Christian
0

Idealnya, baca kemampuan bentuk AJAX (atau AHAH) Drupal sendiri. Intro yang benar-benar dasar di sini http://drupal.org/node/752056

Kalau tidak, saya terkejut itu menyegarkan halaman karena hanya 'tombol' bukan kiriman atau apa pun.

Apakah perlu javascript untuk mengembalikan false, seperti pada tautan tidak untuk menghentikannya melompat kembali ke bagian atas halaman?

joevallender
sumber
Sebenarnya saya berusaha menghindari penggunaan AJAX karena apa yang saya coba lakukan terutama pada sisi klien. Tidak sampai formulir dikirimkan bahwa server membutuhkan data. Sejauh mengembalikan sesuatu dalam JavaScript, saya sudah mencoba mengembalikan true, false, dan null tanpa perbedaan.
Sathariel