it-swarm.com.de

Wie kann man dafür sorgen, dass Formularschaltflächen nur Javascript aufrufen?

Ich experimentiere mit JavaScript und Drupal Formulare. Derzeit versuche ich, eine Schaltfläche im Verwaltungsformular eines Moduls zu erstellen, das JavaScript verwendet, um Optionen an eine Auswahlliste anzuhängen. Das Problem I. Wenn ich auf die Schaltfläche klicke, wird mein JavaScript aufgerufen, aber das gesamte Formular wird aktualisiert. Ich habe mir die Formular-API-Referenz angesehen und gedacht, dass es eine Art Attribut gibt, das ich für die Schaltfläche festlegen kann, um es zu stoppen, aber gefunden Nichts. Kann ich auf irgendeine Weise verhindern, dass die Schaltfläche die Seite aktualisiert, oder ist dies eine Sackgasse?

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

Mein letzter Code:

<?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

Der einfachste Weg, dies zu erreichen, ist die Rückgabe von false in Ihrem Javascript-Code:

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

oder ein besserer Weg ist die Verwendung von Verhaltensweisen:

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

die unten stehende Definition der Formularschaltfläche funktioniert für mich. Das #after_build ist nützlich zum Laden in Javascript, das den Klick-Handler anhängen kann.

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

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

Dann sieht mein Javascript, das von der After-Build-Funktion in eine separate Datei geladen wird, ungefähr so ​​aus:

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

Sie können einfach das return false Anweisung nach Ihrem Funktionsaufruf in der Attributzeile des Schaltflächenformularelements:

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

Lesen Sie im Idealfall Drupals eigene AJAX (oder AHAH) -Form-Fähigkeiten durch. Wirklich grundlegendes Intro hier http://drupal.org/node/752056

Ansonsten bin ich überrascht, dass die Seite aktualisiert wird, da es sich nur um eine Schaltfläche handelt, nicht um eine Übermittlung oder etwas anderes.

Benötigt es das Javascript, um false zurückzugeben, wie es bei einem Link der Fall ist, um zu verhindern, dass es wieder an den Anfang der Seite zurückspringt?

0
joevallender