1

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.enter image description here 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.enter image description here 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.enter image description here Please help me understand what the problem is. Sorry for my english, i used google translated

6
  • How do you know the JS is attached?
    – Kevin
    Jun 30 at 19:58
  • Js is exactly attached, checked. Console.log fires when I call it using the input selector. $('input').on('click',function (){ console.log('Hello world!!!'); }) Jun 30 at 20:05
  • But it only works on the form submit buttons. $form['actions']['submit'] = [ '#type' => 'submit', '#value' => $this->t('Submit'), ]; Jun 30 at 20:13
  • 1
    The simplest answer to this is that your selector is wrong. Can you please add the form's actual rendered markup to the question? I.e. what you would see when you use your browser's inspector or view page source.
    – sonfd
    Jun 30 at 21:18
  • Updated the question with more accurate information Jul 1 at 8:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.