Dynamic filter - Coding JQuery effectively

Question

Each time a user creates a new category field a new id for the field is created

category_advert

#userj_requiredskills_attributes_0_category_advert_id
#userj_requiredskills_attributes_1_category_advert_id
#userj_requiredskills_attributes_2_category_advert_id

category_advertskill

#userj_requiredskills_attributes_0_category_advertskill_id
#userj_requiredskills_attributes_1_category_advertskill_id
#userj_requiredskills_attributes_2_category_advertskill_id

could one kindly advise me how to code my JQuery effectively, so no matter what the id is the code works - many thanks

html.erb

<%= f.collection_select :category_advert_id, CategoryAdvert.order(:name), :id, :name, {},  {class: 'category_advert'}  %>
  <%= f.grouped_collection_select :category_advertskill_id, CategoryAdvert.order(:name), :category_advertskills, :name, :id, :name, {prompt: "Select a category"}, {class: "category_advertskill"} %>

Jquery

$(document).ready(function () {
  var category_advertskills;
  category_advertskills = $('#userj_requiredskills_attributes_0_category_advertskill_id').html();
  return $('#userj_requiredskills_attributes_0_category_advert_id').change(function() {
    var category_advert, escaped_category_advert, options;
    category_advert = $('#userj_requiredskills_attributes_0_category_advert_id :selected').text();
    escaped_category_advert = category_advert.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');
    options = $(category_advertskills).filter("optgroup[label='" + escaped_category_advert + "']").html();
    if (options) {
      $('#userj_requiredskills_attributes_0_category_advertskill_id').html(options);
      return $('#userj_requiredskills_attributes_0_category_advertskill_id').parent().show();
    } else {
      $('#userj_requiredskills_attributes_0_category_advertskill_id').empty();
      return $('#userj_requiredskills_attributes_0_category_advertskill_id').parent().hide();
    }
  });
});


$(document).ready(function () {
  var category_advertskills;
  category_advertskills = $('#userj_requiredskills_attributes_1_category_advertskill_id').html();
  return $('#userj_requiredskills_attributes_01category_advert_id').change(function() {
    var category_advert, escaped_category_advert, options;
    category_advert = $('#userj_requiredskills_attributes_1_category_advert_id :selected').text();
    escaped_category_advert = category_advert.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');
    options = $(category_advertskills).filter("optgroup[label='" + escaped_category_advert + "']").html();
    if (options) {
      $('#userj_requiredskills_attributes_1_category_advertskill_id').html(options);
      return $('#userj_requiredskills_attributes_1_category_advertskill_id').parent().show();
    } else {
      $('#userj_requiredskills_attributes_1_category_advertskill_id').empty();
      return $('#userj_requiredskills_attributes_1_category_advertskill_id').parent().hide();
    }
  });
});

Start by using variables to hold those duplicate mile-long selectors instead of doing he same selector over and over. $(this) inside the change event will also be the same element you keep referencing. You can then just use a starts-with selector for the matches. — iCollect.it Ltd
– iCollect.it Ltd, Commented Feb 9, 2016 at 12:42

iCollect.it Ltd · Accepted Answer · 2016-02-09 12:47:22Z

Start by using variables to hold those duplicate mile-long selectors instead of doing the same selector over and over. $(this) inside the change event will also be the same element you keep referencing. You can then just use a starts-with selector for the matches.

e.g. something like:

$(document).ready(function () {
  var category_advertskills = $('[id^="userj_requiredskills_attributes_"]');
  category_advertskills.change(function() {
    var $this = $(this);
    var category_advert = $this.find(':selected').text();
    var escaped_category_advert = category_advert.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');
    var options = category_advertskills.filter("optgroup[label='" + escaped_category_advert + "']").html();
    if (options) {
      $this.html(options);
      $this.parent().show();
    } else {
      $this.empty();
      $this.parent().hide();
    }
  });
});

You also seem to have some unwanted returns that will not be used in a DOM ready handler.

PhonicUK · Accepted Answer · 2016-02-09 12:44:46Z

0

Use a class for all of the categories and use data attributes for the type and ID

 <div class="requiredskill" data-user="userj" data-type="advertskill">blah</div>

And then from jquery, lookup elements with that class and check the data attribute.

$(".requiredskill")[0].data("user"); //userj

You can match specific data values in a selector like so:

$(".requiredskill[data-user=userj][data-type=advertskill]")

answered Feb 9, 2016 at 12:44

PhonicUK

13.9k4 gold badges47 silver badges65 bronze badges

Collectives™ on Stack Overflow

Dynamic filter - Coding JQuery effectively

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related