A couple of days ago, we were looking to theme a set of Drupal 7 View filters that were also using AJAX to load the new View content. By default, the filters were rendering as a set of radio buttons so by default we were getting HTML that looked like this:
| <div class="form-radios" id="edit-field-uga-news-category-tid"><div class="bef-select-as-radios form-radios" id="edit-field-uga-news-category-tid"><div class="form-item form-type-radio form-item-field-uga-news-category-tid"> | |
| <input type="radio" class="form-radio" checked="checked" value="All" name="field_uga_news_category_tid" id="edit-field-uga-news-category-tid-all"> <label for="edit-field-uga-news-category-tid-all" class="option">- Any - </label> | |
| </div> | |
| <div class="form-item form-type-radio form-item-field-uga-news-category-tid"> | |
| <input type="radio" class="form-radio" value="2610" name="field_uga_news_category_tid" id="edit-field-uga-news-category-tid-2610"> <label for="edit-field-uga-news-category-tid-2610" class="option">Arts </label> | |
| </div> | |
| <div class="form-item form-type-radio form-item-field-uga-news-category-tid"> | |
| <input type="radio" class="form-radio" value="2611" name="field_uga_news_category_tid" id="edit-field-uga-news-category-tid-2611"> <label for="edit-field-uga-news-category-tid-2611" class="option">Athletics </label> | |
| </div> | |
| <div class="form-item form-type-radio form-item-field-uga-news-category-tid"> | |
| <input type="radio" class="form-radio" value="2609" name="field_uga_news_category_tid" id="edit-field-uga-news-category-tid-2609"> <label for="edit-field-uga-news-category-tid-2609" class="option">Event </label> | |
| </div> | |
| <div class="form-item form-type-radio form-item-field-uga-news-category-tid"> | |
| <input type="radio" class="form-radio" value="2608" name="field_uga_news_category_tid" id="edit-field-uga-news-category-tid-2608"> <label for="edit-field-uga-news-category-tid-2608" class="option">News </label> | |
| </div> | |
| </div></div> |
by The problem was that given the design mockups we had, styling the filters to match with only CSS was going to be impossible. Writing a jQuery plugin to dynamically replace the filters with custom HTML was pretty straightforward but the tricky part was getting a notification that an AJAX request had completed so that we could reload the filters.
We managed to do this using the Drupal.behaviors Javascript object using code that looks similar to what is below:
| Drupal.behaviors.jQueryFancyExposedFilters = { | |
| attach: function(context, settings) { | |
| $('.fancy-exposed-filters').each(function(){ | |
| // Stop this from firing twice | |
| if( $(this).find("form").data("fancyFilterBehaviorLoaded") ){ | |
| return true; | |
| } | |
| var viewElement = $(this); | |
| $(this).find("form").ajaxComplete(function(event, xhr, settings) { | |
| viewElement.fanyExposedFilters(); | |
| }); | |
| $(this).find("form").data("fancyFilterBehaviorLoaded", true); | |
| }); | |
| } | |
| }; | |
| })(jQuery); |
Anyway, nothing to crazy but there doesn’t seem to be a ton of documentation about the Drupal.behaviors object.