Finding an element added by clone

Question

Hi,

The following is my HTML

<div id="ingredientrow1">
    <div id="add"><a href="#" id="addIngredient1">Add</a></div>
    <div id="remove"><a href="#" id="removeIngredient1">Remove</a></div>
    <div id="si">
      <input type="text" id="singleIngredient1" name="single_ingredient" />
      <input type="hidden" id="recipe_ingredient_id1" name="recipe[new_ri_attributes][][ingredient_id]" />
    </div>
    <div id="iq"><input type="text" id="recipe_ingredient_quantity" name="recipe[new_ri_attributes][][quantity]" class="txt_qty" /></div>
    <div id="iss"><select id="recipe_ingredient_serving_size_id1" name="recipe[new_ri_attributes][][serving_size_id]" ></select></div>
  </div>

I clone the div "ingredientrow1" and I increment all the id's by one, so now my HTML has two two div's with id's: "ingredientrow1" and "ingredientrow2". Th user can clone this div any number of time by clicking the anchor with id "addIngredient1".

Note: The id of the select control in question "recipe_ingredient_serving_size_id1" is also changed with ...id2.

I also use the autocomplete plugin on the control "singleIngredient1" which will set the id of the ingredient selected in the hidden input and also populate the serving sizes in the select box.

The problem: Since the user can generate n number of ingredientrow div's I do not know which select box to populate when a ingredient is selected.

Known facts: I do know which ingredientrow the user is working on. I get that like this

var recipeingredientid = $(this).next().attr("id");

which gives me "ingredientrown" where n is 1, 2, ....

My question: How do I get to the recipe_ingredient_serving_size_idn select box in a specific ingredientrow? Since the select id will have changed.

Example to my question: If my recipeingredientid is "ingredientrow2" then the id of the select control will end with 2. How do I get a reference to that select control?

This is my JQuery which runs when the user selects a ingredient from the autocomplete input

$("input[id*='singleIngredient']").result(function(event, data, formatted) {

    if (data) {

      var recipeingredientid = $(this).next().attr("id");
      $("#" + recipeingredientid).val(data[1]);

      $.getJSON("/serving_sizes?ingredientid=1", function(j) {

        var options = "<option value=''>Please select a serving size</option>";
 for (var i=0; i < j.length; i++)
   options += '<option value="' + j[i].serving_size.id + '">' + j[i].serving_size.name + '</option>';

//I am trying not to hard code this id here.
 $("#recipe_ingredient_serving_size_id1").html(options);
      });
    }

  });

I know I am always passing 1 as the ingredientid but this is just a test...

Thanks for your time.

Answer 1

You don't really need to know the exact id of the select box to find it.

If you know, for instance, that the div that you are working inside of is ingredientrow1 then you can just do a query for the select box inside of that div.

That would look like this:

var container_id  = 'ingredientrow1';
var $select_box = $(container_id).find('select[id^=recipe_ingredient_serving_size_id]');

At this point you have your select box and can manipulate it as you see fit. If you need to get the id of the element, you could do a parseInt on a substring of the container_id. That would look like this:

var container_id  = 'ingredientrow1';
var id_prefix     = 'ingredientrow';
var prefix_length = id_prefix.length;
var id_num        = parseInt( container_id.substring(prefix_length) ,10);

doSomething(data[id_num]); // this is hypothetical...

Your question is a little bit difficult to understand but hopefully this is relevant information. Best of luck.

Answer 2

$(this)
  .parents("[id^='singleIngredient']")
  .find("[id^='recipe_ingredient_serving_size_id']")

Answer 3

Given that recipe_ingredient_serving_size is a select box, and the only select box in your container, the following should work.

$(this).parent().find('select').html(options)

That should sort you out. If you end up with more than 1 select, you could give it a class and use the it to select it.