Вы здесь

Возможно ли на кнопку Submit навесить событие jQuery?

0

Написал форму калькулятора на form API выдающую результаты Ajax'ом. Пытаюсь сделать чтобы при клике на Submit, помимо рассчетов, пряталась форма и на ее месте появлялся результат рассчетов.
Задачу свел к добавлению классов к элементам которые нужно скрыть/показать.
Но не работает.
Вот код:

~~~php
Drupal.behaviors.exampleModule = {
        attach: function (context, settings) {
            $('#edit-calculate', context).click(function() {
                $('#block-calculator-calculator .col-1').addClass('hidden');
            });
    }
};




Вот основные функции модуля: ~~~php function calculator_form($form, &$form_state) { ... $result = calculator_form_formula($form, $form_state); $form['calculate'] = array( '#type' => 'button', '#value' => 'Рассчитать', '#ajax' => array( 'callback' => 'calculator_form_ajax_callback', 'wrapper' => 'result', ), ); $form['result'] = array( '#markup' => '<div id="result">Result: ' . $result[0] . ' ('. $result[1] . ')' . '</div>', ); return $form; } function calculator_form_ajax_callback($form, &$form_state) { return $form['result']; }
Версия Drupal: 
7.x
Категория: 
AJAXForm APIJavascript
Вопрос задан 12.08.2016 - 11:14

Кажется дошло в чем проблема. При Сабмите блок обновляется и получается что описанный выше код если и срабатывает, то в "прошлой жизни" блока. Поэтому результата нет.
Видимо нужно внутри моего модуля добавлять/удалять классы при нажатии кнопки, только не соображу как и где именно.

Комментарий оставлен 12.08.2016 - 11:56

Ответы

1

А в таком стиле пробовал ?

$(document).on('click','selector',function(){ ... })

Ну или попробовать через плагин Live Query
Первый вариант успешен при обновлении содержимого любого из блоков на странице, но в случае с модулем - не могу сказать.

Ответ дан 12.08.2016 - 11:31
Аватар пользователя Apuox
Apuox
15

Так тоже не работает.
И по-моему не должно работать, ведь содержимое блока обновляется.
Такой вариант который у меня работал в блоке обновляемом ajax'ом. Но здесь другая ситуация. Сейчас дополню вопрос.

Комментарий оставлен 12.08.2016 - 11:47
1
function myform() {
  ...
  $form['#prefix'] = '<div id="myform">';
  $form['#suffix'] = '</div>';
  $form['submit']['#ajax'] = array(
    'callback' => 'myform_submit_ajax',
    'wrapper' => 'myform',
  );
  ...
}

function myform_submit_ajax() {
  return 'Result';
}
Ответ дан 12.08.2016 - 12:20
Аватар пользователя xandeadx
xandeadx
1440

Вот так получилось:

$form['#prefix'] = '<div id="myform">';
$form['#suffix'] = '</div>';
...
$form['submit'] = array(
    '#type' => 'button',
    '#value' => 'Рассчитать',
    '#ajax' => array(
        'callback' => 'calculator_form_ajax_callback',
        'wrapper' => 'myform',
    ),
);
function calculator_form_ajax_callback($form, &$form_state) {
  return $form['result'];
}

В таком варианте при сабмите форма убирается совсем и вместо нее появляется #result. Но в результатах мне нужно добавить кнопку "Вернуться к форме". С jQuery, если бы он срабатывал, можно было бы просто скрыть/показать блоки. А в таком варианте как быть?

Комментарий оставлен 12.08.2016 - 12:42
0
Drupal.behaviors.exampleModule = {
  attach: function (context, settings) {
    $('#FORM-ID', context).submit(function(e) {
      e.preventDefault();        
      $('#block-calculator-calculator .col-1').addClass('hidden');
    });
  }
};
Ответ дан 12.08.2016 - 12:06
Аватар пользователя drupby
drupby
450

Не работает. И если я указываю вместо #FORM-ID - ID своей формы, то скрипт даже не прицепляется к кнопке.

Комментарий оставлен 12.08.2016 - 12:20

Что именно не работает? Если выполнять то что в handler (добавление класса), то сработает однозначно.

UPD. Изначально прочитал только заголовок вопроса и код, но если форма с ajax, то почему не делать так как писал xandeadx, только в ajax callback возвращать всю форму с добавленным аттрибутом (к примеру классом), на основе которого и скрывать элементы.

$form['#attributes']['class'][] = 'hidden';
Комментарий оставлен 12.08.2016 - 12:45

Вот так у себя вписал:

    Drupal.behaviors.exampleModule = {
      attach: function (context, settings) {
        $('form#calculator-form', context).submit(function(e) {
          e.preventDefault();        
          alert('TEST');
        });
      }
    };

Алерт не вылазит.
form#calculator-form - тут точно ID формы надо?

Комментарий оставлен 12.08.2016 - 13:02

алерт будет срабатывать по сабмиту формы , если конечно селектор правильный для формы.

Комментарий оставлен 12.08.2016 - 13:07

Селектор правильный. Но алерта нет.
А куда это вставить? $form['#attributes']['class'][] = 'hidden';
В эту функцию?

function calculator_form_ajax_callback($form, &$form_state) {
  return $form['result'];
}
Комментарий оставлен 12.08.2016 - 13:17
function calculator_form_ajax_callback($form, &$form_state) {
  $form['#attributes']['class'][] = 'hidden';
  return $form;
}
Комментарий оставлен 12.08.2016 - 13:25

Так не работает.
Проверил, если вписать $form['#attributes']['class'][] = 'hidden'; сразу в форму, то класс добавляется как ожидается.
Но когда указанным выше способом, класс форме не добавляется. Я так понимаю, при сабмите, форма не обновляется вся, а только $form['result'].
Сейчас дополню вопрос своими функциями.

Комментарий оставлен 12.08.2016 - 13:52

Потому что нужно внимательней читать то, что советуют

$form['#prefix'] = '<div id="myform">';
$form['#suffix'] = '</div>';
$form['submit']['#ajax'] = array(
  'callback' => 'calculator_form_ajax_callback',
  'wrapper' => 'myform', // вместо 'wrapper' => 'result'
);
Комментарий оставлен 12.08.2016 - 14:24

Спасибо за ответы. Постараюсь разобраться в советах.
Враппер почему-то появляется далеко от формы. Оборачивает не просто форму, а блок в котором находится форма. В прямом друпаловском смысле.

Комментарий оставлен 12.08.2016 - 14:44

Не нравится suffix и prefix - уберите и вместо этого впишите во враппер #ID формы.

$form['submit']['#ajax'] = array(
  'callback' => 'calculator_form_ajax_callback',
  'wrapper' => 'calculator-form', 
);
Комментарий оставлен 12.08.2016 - 15:00

Страницы