accessing multiple dynamic objects jquery

Question

I think you'll be able to figure this out by viewing the jsfiddle https://jsfiddle.net/brendanjackson/zmxrfpas/4/ but just in case. I want the user to input whatever data they choose in the text box. Then choose a table in set one, and click the "submit" button to send it.

<div>
  <Div> <h1>
  Start
  </h1>
    Task:<input type="text" id="input_text">
  </Div>


  <div>
  Send to:
  <select id="send_to"> <option value="set1table1">set1table1</option>     <option value="set1table2">set1table2</option> <option value="set1table3">set1table3</option> <option value="set1table4">set1table4
                  </option> </select>
  </div>
  <input type ="button" id = 'submit_button'value="Submit!"/>

</div>

Here's where I run into trouble, when I send that user input information I also send a new drop down select menu and new button to whatever table the user chose. I'm unsure of how to access this information because I don't know how to give it an "ID" or for that matter any way to access it. I NEED to be able to access that information and send it on its way to the next set of tables.

     $('#submit_button').click(function(){
       input_text = $('#input_text').val();

       options_menu = '<select  id="options_menu"> <option value="set2table1">set2table1</option> <option value="set2table2">set2table2</option> <option value="set2table3">set2table3</option> <option value="set2table4">set2table4</option> </select>';
       index_item = '<input type="submit" name="get" id="get" value="Get selected index" />'


       send_to = $("#send_to option:selected");
       console.log("index: " + send_to.index() );

var send_index = send_to.index()

switch(send_index){

  case 0:
    $('#set1_text1').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
  break;

  case 1:
  $('#set1_text2').append("<ul>" + "<li>" +input_text+  "  " +options_menu+ "" +index_item+ "</li>" + "</ul>");
  break;

  case 2:
  $('#set1_text3').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
  break;

  case 3:
  $('#set1_text4').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
  break;

}

});

Originally (and part of the code is still in the fiddle) I just had the user created menu and button but, that just looked really ugly to me. I also tried using ".live" but I really don't think I quite grasp how it works, nor am I even sure if a solution is possible with it alone.

Surely someone else out there has had trouble similar to this but I'm not really seeing anything quite like it. I've been stuck on this for a while so I'd really appreciate some help. How can I access the information on every object sent to the tables set 1 and send it to one of the tables of set 2?

Answer 1

At various points, your code is creating duplicate IDs in the DOM. You can have duplicate classes, but never duplicate IDs. In this answer, we used a counter itm to ensure no duplicate IDs are created (but class names could have been used instead).

Also, we fixed the missing # from the beginning of IDs in section 2.

If you can use a more recent version of jQuery, you can use .on() instead of .live() and .bind(). Much preferred!

input_text was made into a global variable so that you can access the current value from within any function. (This is done by declaring it outside all functions).

See this answer for basics of how .on() works.

jsFiddle Demo

jQuery:

var itm=0, input_text;
$(document).ready(function() {
    $('body').css({'background':'wheat'});
  var options_menu;
  var get;
  var selectedIndex;

  $('#submit_button').click(function() {
    itm++;
    input_text = $("#input_text").val();

        send_to = $("#send_to option:selected");
    var send_index = send_to.index()

    options_menu = '<select id="options_menu-'+itm+'"> <option value="set2table1">set2table1</option> <option value="set2table2">set2table2</option> <option value="set2table3">set2table3</option> <option value="set2table4">set2table4</option> </select>';
    index_item = '<input type="button" id="get-'+itm+'" data-from="'+send_index+'" value="Get selected index" />'
        send_index++;
    $('#set1_text'+send_index).append("<ul>" + "<li>" + input_text + " " + options_menu + "" + index_item + "</li>" + "</ul>");

  });

  $(document).on("click", '[id^=get-]', function() {
      var si = $('#options_menu-'+itm+' option:selected');
  alert('bob');
      var get_index = si.index();
      var from_index = $(this).data('from');
      from_index++; //from_index is zero-based, but Tables are not

      itm++;
      get = '<input type="submit"  name="get" id="get'+itm+'" value="Get selected index" />';
      itm--;
      var final = "<ul>" + "<li>" + input_text + " (from Table " +from_index+ ")" + "</li>" + "</ul>";
    get_index++;
    $("#set2_text"+get_index).append(final);

  }); //END document.on


}); //END document.ready

HTML:

<div>
  <div>
    <h1>Start</h1>
      Task: <input type="text" id="input_text" />
  </div>

  <div>
    Send to:
    <select id="send_to">
      <option value="set1table1">set1table1</option>
      <option value="set1table2">set1table2</option>
      <option value="set1table3">set1table3</option>
      <option value="set1table4">set1table4</option>
    </select>
  </div>
  <input type="button" id='submit_button' value="Submit!" />
</div>

<div>
  <h1>Set1</h1>
  <div id="set1table1">
    <h3>set1table1</h3>
    <ul id="set1_text1"></ul>
  </div>

  <div id="set1table2">
    <h3>set1table2</h3>
    <ul id="set1_text2"></ul>
  </div>

  <div id="set1table3">
    <h3>set1table3</h3>
    <ul id="set1_text3"></ul>
  </div>

  <div id="set1table4">
    <h3>set1table4</h3>
    <ul id="set1_text4"></ul>
  </div>
</div>

<div>
  <h1>Set2</h1>
  <div id="set2table1">
    <h3>set2table1</h3>
    <ul id="set2_text1"></ul>
  </div>

  <div id="set2table2">
    <h3>set2table2</h3>
    <ul id="set2_text2"></ul>
  </div>

  <div id="set2table3">
    <h3>set2table3</h3>
    <ul id="set2_text3"></ul>
  </div>

  <div id="set2table4">
    <h3>set2table4</h3>
    <ul id="set2_text4"></ul>
  </div>
</div>

Answer 2

$(document).ready(function() {
var input_text = $("input_text").val();
var options_menu ;
var get;
var selectedIndex ;

$('#submit_button').click(function(){
input_text = $('#input_text').val();

options_menu = '<select  class="options_menu"> <option value="set2table1">set2table1</option> <option value="set2table2">set2table2</option> <option value="set2table3">set2table3</option> <option value="set2table4">set2table4</option> </select>';
index_item = '<input type="submit" name="get" class="get" value="Get selected index" />'


send_to = $("#send_to option:selected");
console.log("index: " + send_to.index() );

var send_index = send_to.index()

switch(send_index){

case 0:
$('#set1_text1').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
break;

case 1:
$('#set1_text2').append("<ul>" + "<li>" +input_text+  "  " +options_menu+ "" +index_item+ "</li>" + "</ul>");
break;

case 2:
$('#set1_text3').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
break;

case 3:
$('#set1_text4').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
break;

}

});
$('.get').live("click", function() {
get = '<input type="submit"  name="get" class="get" value="Get selected index" />';

selectedIndex = $(this).closest('li').find('select.options_menu option:selected');

console.log("index: " + selectedIndex.index() );

var get_index = $(this).closest('li').find('select.options_menu option:selected').index();

alert(get_index)

switch(get_index) {

case 0:
$( "#set2_text1" ).append("<ul>" + "<li>" +input_text + "</li>" + "</ul>");
break;

case 1:
$( "#set2_text2" ).append("<ul>" + "<li>" +input_text+ "</li>" + "</ul>");
break;

case 2:
$( "#set2_text3" ).append("<ul>" + "<li>" +input_text+ "</li>" + "</ul>");
break;

case 3:
$( "#set2_text4" ).append("<ul>" + "<li>" +input_text + "</li>" + "</ul>");
break;

default:
alert("Error");

}}); });

Answer 3

Replace

get = '<input type="submit"  name="get" id="get" value="Get selected index" />';
selectedIndex = $("#get option:selected");

With

selectedIndex = $(this).siblings("select").index();

and don't use .live, use $(".container").on("click", "input[name=get]", function(){}) instead.

$(document).ready(function() {
	  var input_text = $("input_text").val();
    var options_menu ;
    var get;
    var selectedIndex ;
    
     $('#submit_button').click(function(){
       input_text = $('#input_text').val();
       
       options_menu = '<select  id="options_menu"> <option value="set2table1">set2table1</option> <option value="set2table2">set2table2</option> <option value="set2table3">set2table3</option> <option value="set2table4">set2table4</option> </select>';
       index_item = '<input type="submit" name="get" id="get" value="Get selected index" />'
     
      
       send_to = $("#send_to option:selected");
       console.log("index: " + send_to.index() );
    
var send_index = send_to.index()
  
switch(send_index){

  case 0:
    $('#set1_text1').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
  break;
  
  case 1:
  $('#set1_text2').append("<ul>" + "<li>" +input_text+  "  " +options_menu+ "" +index_item+ "</li>" + "</ul>");
  break;
  
  case 2:
  $('#set1_text3').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
  break;
  
  case 3:
  $('#set1_text4').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
  break;

}

});



  $('.container').on("click", "input[name=get]", function() {
 get = $(this).siblings("select");
 selectedIndex = get.find("option:selected");

  console.log("index: " + selectedIndex.index() );
 
 var get_index = selectedIndex.index()
 alert(get_index);


switch(get_index) {

case 0:
  $( "set2_text1" ).append("<ul>" + "<li>" +input_text + "</li>" + "</ul>");
  break;

  case 1:
  $( "set2_text2" ).append("<ul>" + "<li>" +input_text+ "</li>" + "</ul>");
  break;

  case 2:
  $( "set2_text3" ).append("<ul>" + "<li>" +input_text+ "</li>" + "</ul>");
  break;

  case 3:
  $( "set2_text4" ).append("<ul>" + "<li>" +input_text + "</li>" + "</ul>");
  break;

  default:
  alert("Error");


}

  });
    

});

  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <Div> <h1>
  Start
  </h1>
    Task:<input type="text" id="input_text">
  </Div>


  <div>
  Send to:
  <select id="send_to"> <option value="set1table1">set1table1</option>     <option value="set1table2">set1table2</option> <option value="set1table3">set1table3</option> <option value="set1table4">set1table4
                  </option> </select>
  </div>
  <input type ="button" id = 'submit_button'value="Submit!"/>

</div>


<div class="container">
<div>
  <h1>
  Set1
  </h1>
  
  <div id="set1table1">
          <h3>set1table1</h3>
          <ul id="set1_text1"></ul> 
  </div>

  <div id="set1table2">
          <h3>set1table2</h3>
          <ul id="set1_text2"></ul> 
  </div>

  <div id="set1table3">
          <h3>set1table3</h3>
          <ul id="set1_text3"></ul> 
  </div>

  <div id="set1table4">
          <h3>set1table4</h3>
          <ul id="set1_text4"></ul> 
  </div>
</div>

<div> <h1>Set2</h1>
 <div id="set2table1">
          <h3>set2table1</h3>
          <ul id="set2_text1"></ul> 
  </div>

  <div id="set2table2">
          <h3>set2table2</h3>
          <ul id="set2_text2"></ul> 
  </div>

  <div id="set2table3">
          <h3>set2table3</h3>
          <ul id="set2_text3"></ul> 
  </div>

  <div id="set2table4">
          <h3>set2table4</h3>
          <ul id="set2_text4"></ul> 
  </div>
</div>
</div>

Answer 4

Try this to iterate through all of the <ul> elements appended to your divs:

$('#set1_text1 > ul').each(function(index, element) {
   console.log(index + ": ", element);
   //Access whatever data attributes of the element you need
   console.log($(this).find('#options_menu option:selected'));
});