I have a problem with css after applying ajax. I have an exposed form that I stylized. Before applying ajax it is: id="edit-field-price-value-min" After applying it changed to id="edit-field-price-value-min--8EHokPV5K8s"

Also similar codes with --RandomSymbols are added to others elements.

How can I use ajax whithout adding --8EHokPV5K8s ?

  • 1
    You can't, you should use classes to style the items, not ID's. The ID's on dynamic AJAX'd content can change, this is because Drupal tries to ensure ID's are unique on the page to create valid HTML. – Beebee Mar 4 '20 at 13:02
  • 1
    Use classes to target the element instead – Clive Mar 4 '20 at 13:02
  • The additional values in the id is Drupal's attempt to ensure unique ids. Styling should be done with css classed instead of ids. – Binary Alchemist Mar 4 '20 at 14:22
  • But which class can I use? How to assign a class to a field? I have several fields that need to be styled, but by default they have the same classes. ID is unique. <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-field-price-value-min form-item-field-price-value-min"> <label for="edit-field-price-value-min--7vPHDo3L_ww">Price</label> <input data-drupal-selector="edit-field-price-value-min" type="text" id="edit-field-price-value-min--7vPHDo3L_ww" name="field_price_value[min]" value="0" size="30" maxlength="128" class="form-text"> </div> – ligraf Mar 4 '20 at 14:47
  • I find it difficult to understand how js-form-item-field-price-value-min isn't a unique enough class. Are you saying that there are multiple field wrappers with that same class, even though you only have that field once in the form? If so there's probably a bug in your theme – Clive Mar 4 '20 at 15:55

Use a class to target the element.

If this is in a view, you can add a class on the fields you need to target. You could also add a class to the view and use existing classes inside that view.

  • Thanks! This really works for normal views fields. But I need to add classes to the exposed form fields. I did not find how to add a class there – ligraf Mar 4 '20 at 16:33
  • You could always add a class with jQuery. – Shawn Voskuil Mar 4 '20 at 21:33
  • Thanks! I will do so. I will add classes with jQuery. – ligraf Mar 5 '20 at 5:16
  • Instead of jQuery, you can also edit the templates to add static classes, or even preprocess the template and add dynamic classes without touching the template. Using javascript to add classes seems like the least elegant solution. – Beebee May 8 '20 at 11:54

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.