I re-create the question with more accurate data (Original question Form with ajax and javascript problem).
I have a button in my form that generates a fieldset via ajax. When I try to track this button being clicked with jQuery, it just doesn't see this button.The button id is shown below.
I tried to keep track of using just an input as a selector, it still does not work. Javascript is exactly connected, when I click on the submit button, the output is there.
Here is the php code.
public function buildForm(array $form, FormStateInterface $form_state) {
$config = \Drupal::config('pizza_javascript.settings');
$type_pizza_config = $config->get('Types_pizza');
$district_config = $config->get('District');
$sum_order =0;
foreach ($type_pizza_config as $key=>$name){
$pizza_type[$name['Price']] = $name['Name'];
}
foreach ($district_config as $key=>$name){
$blocks[$name['Price']] = $name['name'];
}
$num_pizza = $form_state->get('num_pizza');
if ($num_pizza === NULL) {
$pizza_field = $form_state->set('num_pizza', 1);
$num_pizza = 1;
}
$form['pizza_fieldset_general'] = [
'#type' => 'fieldset',
'#tree' => TRUE,
'#title' => $this->t('Orders'),
'#prefix' => '<div id="pizza-fieldset-general-wrapper">',
'#suffix' => '</div>',
];
for ($i = 0; $i < $num_pizza; $i++) {
$form['pizza_fieldset_general']['pizza_fieldset'][$i] = [
'#type' => 'fieldset',
'#tree' => TRUE,
'#title' => $this->t('Pizza to order'),
];
$form['pizza_fieldset_general']['pizza_fieldset'][$i]['name'] = [
'#type' => 'select',
'#title' => $this->t('Type pizza'),
'#tree' => TRUE,
'#options' => $pizza_type,
'#default_value' => '940',
'#attributes' => ['id' => 'select-pizza-'.$i],
];
$form['pizza_fieldset_general']['pizza_fieldset'][$i]['count'] = [
'#type' => 'select',
'#title' => $this->t('Count pizza'),
'#tree' => TRUE,
'#options' => range(0, 10),
'#attributes' => ['id' => 'select-count-'.$i],
];
}
$form['pizza_fieldset_general']['actions'] = [
'#type' => 'actions',
];
$form['pizza_fieldset_general']['actions']['add_pizza'] = [
'#type' => 'submit',
'#value' => $this->t('Add one pizza'),
'#submit' => ['::addOnePizza'],
'#ajax' => [
'callback' => '::addmorepizzaCallback',
'wrapper' => 'pizza-fieldset-general-wrapper',
],
];
if ($num_pizza > 1) {
$form['pizza_fieldset_general']['actions']['remove_pizza'] = [
'#type' => 'submit',
'#value' => $this->t('Remove one'),
'#submit' => ['::removeCallback'],
'#ajax' => [
'callback' => '::addmorepizzaCallback',
'wrapper' => 'pizza-fieldset-general-wrapper',
],
];
}
$form['block'] = [
'#title' => 'District order',
'#type' => 'radios',
'#options' => $blocks,
];
$form['phone'] = [
'#type' => 'textfield',
'#title' => $this->t('Phone number'),
'#description' => $this->t('Example phone number +79261234567, 89261234567, 8(926)123-45-67'),
];
$form['address'] = [
'#type' => 'textfield',
'#title' => $this->t('Address order'),
'#description' => $this->t('Address to order'),
];
$form['all_price'] = [
'#type' => 'textfield',
'#title' => $this->t('Price order'),
'#attributes' => array('readonly' => 'readonly'),
];
$form['pizza_price'] = [
'#type' => 'textfield',
'#title' => $this->t('Price pizza'),
'#attributes' => array('readonly' => 'readonly'),
];
$form['actions']['submit'] = [
'#type' => 'submit',
'#value' => $this->t('Submit'),
];
$form['#attached']['library'][] = 'pizza_javascript/pizzaJS';
$form['#attached']['drupalSettings']['data']['blockprice'] = $form_state->getValue('block');
$form['#attached']['drupalSettings']['data']['count_pizza'] = $num_pizza;
return $form;
}
public function addmorepizzaCallback(array &$form, FormStateInterface $form_state) {
return $form['pizza_fieldset_general'];
}
public function addOnePizza(array &$form, FormStateInterface $form_state) {
$pizza_field = $form_state->get('num_pizza');
$add_button = $pizza_field + 1;
$form_state->set('num_pizza', $add_button);
$form_state->setRebuild();
}
public function removeCallback(array &$form, FormStateInterface $form_state) {
$pizza_field = $form_state->get('num_pizza');
if ($pizza_field > 1) {
$remove_button = $pizza_field - 1;
$form_state->set('num_pizza', $remove_button);
}
$form_state->setRebuild();
}
Code javascript.
(function ($, Drupal) {
Drupal.behaviors.myBehaviour = {
attach: function (context, settings) {
$('#edit-pizza-fieldset-general-actions-add-pizza',context).on('click',function (){
console.log('Hello world!!!');
})
$('input').on('click',function (){
console.log('Hello world!!!');
})
}
}
})(jQuery, Drupal);
Since I keep track of input elements, the button generating fields must display, but this does not happen.
Please help me understand what the problem is. Sorry for my english, i used google translated