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?

Is there a reason you are using an old version of jQuery? Can you update jQuery to at least version 8.2? — cssyphus
– cssyphus, Commented Jan 15, 2016 at 3:17
I had given up and went to bed. You people are my favorite people in the world, thank you so much! — Brendan Jackson
– Brendan Jackson, Commented Jan 15, 2016 at 17:12
All of these are helpful but I've yet to get any of them to work the way I want them to. Maybe I'm using the incorrect jQuery? — Brendan Jackson
– Brendan Jackson, Commented Jan 20, 2016 at 2:05

Community · Accepted Answer · 2017-05-23 11:50:26Z

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>

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Jan 15, 2016 at 4:02

cssyphus

40.4k20 gold badges104 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Brendan Jackson Over a year ago

this works only once it seems but doesn't let you append a 2nd submitted text

Brendan Jackson Over a year ago

I like the addition of " (from Table " +from_index+ ")" however, when I use the "get selected index" button it only works the 1st time. If I add more tasks to the 1st set of tables they can't seem to send their data to the 2nd set from what I'm seeing on your fiddle. I commented on the others code as well.

cssyphus Over a year ago

Try now: jsfiddle.net/zmxrfpas/9 It was necessary to switch from binding to the $('#get-1') selector, to watching for click event on any selector that starts with the ID get-, thus: $('[id^=get-]')

Brendan Jackson Over a year ago

Fell asleep. Not sure what the "Bob" alert was all about but you made it work you rock! Any other resources you think I should look at to understand all of that?

cssyphus Over a year ago

I probably just left in a test. One of those "if it gets to here, alert('bob')" tests. :) As for other resources, you should know the CSS selectors -- that is how I got it to work, by using the "starts with" selector. Look at my previous comment: instead of looking for an element with id="get-1", it looks for ANY element whose ID starts with get-. This is one of the most useful selectors to know. Keep this list of jQuery/CSS selectors handy (print and leave in the "reading room"). Note that jQuery uses CSS selectors!

|

Jobelle · Accepted Answer · 2016-01-15 04:28:47Z

$(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");

}}); });

This works exactly how I want it to on jsfiddle but whenever I plug it into my regular code it sends back ".live is not a function" when I change it to ".on" I get no error but I get no results either.

Sean Glover · Accepted Answer · 2016-01-15 03:29:35Z

0

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'));
});

answered Jan 15, 2016 at 3:29

Sean Glover

5206 silver badges22 bronze badges

1 Comment

Brendan Jackson Over a year ago

I'm not really sure where to put this

mylee · Accepted Answer · 2016-01-15 03:44:43Z

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>

this will give an alert of the index being set to set2 but does not append the information to set 2

Collectives™ on Stack Overflow

accessing multiple dynamic objects jquery

4 Answers 4

6 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related