Score:0

Form with ajax and javascript problem

br flag

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

Kevin avatar
in flag
How do you know the JS is attached?
Павел Герасюта avatar
br flag
Js is exactly attached, checked. Console.log fires when I call it using the input selector. $('input').on('click',function (){ console.log('Hello world!!!'); })
Павел Герасюта avatar
br flag
But it only works on the form submit buttons. $form['actions']['submit'] = [ '#type' => 'submit', '#value' => $this->t('Submit'), ];
sonfd avatar
in flag
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.
Павел Герасюта avatar
br flag
Updated the question with more accurate information
No Sssweat avatar
ua flag
My guess is that your ajax re-generatates the button; thus, perhaps the ID changes to something like `#edit-pizza-fieldset-general-actions-add-pizza-1`. So try targeting it using the wrapper instead `$('.pizza-fieldset-general-wrapper .form-submit').on('click',function (){`
mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.