Post value from an input added by jQuery's .html()

Question

I need to POST values inserted on an Input that has been added to screen by jQuery's .html method. I need to first store those values on variables, and my problem is that variables are sent empty, as any alert made of these gives undefined result. Here's an exaple of one of those:

var turnIdEdit = $('.acceptIcon').attr('id');

This is being taken from an entire div inserted by .html method, and I do not know how to express this value storation in order to make jQuery search on DOM's existing parent (before html insertion) for this '.acceptIcon' class.

I have tried to ask jQuery to search on '.tablecontent' (that exists before the html insertion, and is one of '.acceptIcon's parents) without result:

var turnIdEdit = $('.tableContent', '.acceptIcon').attr('id');

How can I store values from inputs generated by jQuery's .html method on variables?

ADITIONAL INFO--

This is the execution of the function that njects the HTML inpts:

$('.tableIconLink').on('click', '.editIcon', editRow);
var optionList = "<?php echo $all_turns; ?>";

This is the function that injects this HTML piece:

function editRow(e){
    var recordId = $(this).attr('id');
    var textId = $(this).attr('title');
    $(this).parents().eq(3).html("<div class='contentColumn60'><span class='tableContentText'><input type='text' class='tableEditInput' id='"+recordId+"' name='tu_name_edit' value='"+textId+"'></span></div><div class='contentColumn20'><span class='tableContentText'><select id='tu_type' class='tableEditOption' name='tu_type_edit'>"+optionList+"</select></span></div><div class='contentColumn10'><span class='tableHeaderText'>Editando</span></div><div class='contentColumn10'><div class='acceptEdit'><a href='#'><div class='acceptIcon' id='"+recordId+"'></div></a></div></div>");
    e.preventDefault;
}

And this is the entire DOM initial tree (before HTM injection):

<div class="tableContent">
<div id="225" class="tableRow ">
                        <div class="contentColumn60">
                            <span class="tableContentText">Intensivo semanal (09:00 - 19:30)</span>
                        </div>
                        <div class="contentColumn20">
                            <span class="tableContentText">Turnos intensivos</span>
                        </div>
                        <div class="contentColumn10">
                            <div class="tableIconLink"><a href="#"><div title="Intensivo semanal (09:00 - 19:30)" id="225" class="editIcon"></div></a></div>
                        </div>
                        <div class="contentColumn10">
                            <div class="tableIconLink"><a href="/Gestion/config/forms/turn_conf/turn_discontinue.php?id=225"><div class="discontinueIcon"></div></a></div>
                        </div>
                      </div>
</div>

After making the HTML input injection:

    <div class="tableContent">
    <div id="225" class="tableRow ">
    <div class="contentColumn60">
    <span class="tableContentText">
    <input id="225" class="tableEditInput" type="text" value="Intensivo semanal (09:00 - 19:30)" name="tu_name_edit">
    </span>
    </div>
    <div class="contentColumn20">
    <span class="tableContentText">
    <select id="tu_type" class="tableEditOption" name="tu_type_edit">
    <option value="">Mañana</option>
    <option value="">Tarde</option>
    <option value="">Noche</option>
    <option value="">Turnos intensivos</option>
    <option value="">Fines de semana</option>
    </select>
    </span>
    </div>
    <div class="contentColumn10">
    <span class="tableHeaderText">Editando</span>
    </div>
    <div class="contentColumn10">
    <div class="acceptEdit">
    <a href="#">
    <div id="225" class="acceptIcon"></div>
    </a>
    </div>
    </div>
    </div>
</div>

Answer 1

Please note that you have three elements containing the same id:

line 02 - <div id="225" class="tableRow ">
line 05 - <input id="225" class="tableEditInput" type="text" value="Intensivo etc.">
line 25 - <div id="225" class="acceptIcon">

There must be only one element containing the ID "255". The ID attribute must always be unique in the DOM.

What I usually do, is add a prefix to the desired id value. For example: id="tr-225", id="tEI-225", id="aI-225" (or, any ONE of them may remain as just id="225", but only one).

If required, I can isolate just the numerical bit by splitting off the first part:

 var justTheID = $('.tableRow).attr('id').split('-')[1];
 alert(justTheID);

jsFiddle Expanded Demo

Note that the split() method splits the string into an array, separating elements at the character you supply. We supply the - character, so the string is split into two parts at that character, with element zero being the left half, and element one being the number part. (There is only one - char in the string, so only two elements are created in this particular array.)

Resources:

programmers.stackexchange.com/questions/127178

W3C Working Draft - HTML5 - search for keyword "unique"

Answer 2

The HTML code is helpful, thanks for adding that.

Try this to get the desired DIV's ID:

var turnIdEdit = $('.tableContent').find('.acceptEdit').find('.acceptIcon').attr('id');

If this doesn't help, you may have to show us more of your DOM tree so that we can ensure we are grabbing a specific element. Usually, we want to begin a DOM traversal with an element identified by ID to ensure there can be only one (and not several elements returned, as can happen with classes). Will P first made this valid point (+1 for him).

I usually run a series of tests to ensure that I am where I think I should be. This works best by adding ID attributes (even temporarily, for testing), such as:

HTML:

<div class="tableContent" id="yupthisone">
    <div class="contentColumn60">
    <span class="tableContentText">
    <input id="225" class="tableEditInput" type="text" value="Intensivo semanal (09:00 - 19:30)" name="tu_name_edit">
    </span>
    </div>

    <div class="acceptEdit" id="therightplace">
    <a href="#">
    <div id="225" class="acceptIcon" id="finallyfoundit"></div>
    </a>
    </div>
</div>

jQuery/javascript:

var d1 = $('.tableContent').attr('id');
alert(d1);

var d2 = $('.tableContent').find('.acceptEdit').attr('id');
alert(d2);

var d3 = $('.tableContent').find('.acceptEdit').find('.acceptIcon').attr('id');
alert(d3);

Answer 3

This might not be your problem, but it is a common error when using the .html() method, so worth mentioning.

The .html() method changes the DOM, so event bindings are not in place for the new elements injected by .html(). Therefore, one must use the .on() method to attach new event bindings to those methods.

You haven't mentioned what triggers the code to grab the .acceptIcon's ID attribute, so perhaps this is what's going on.

For example:

$('#anInjectedDiv').click(function() {
    alert('I am in the DIV');
});

Must be written this way:

$(document).on('click', '#anInjectedDiv', function() {
    alert('I am in the DIV');
});

jsFiddle Demo added per question in comments

Answer 4

After seeing your edit I removed the first part to this answer, since it does look like you are looking for the id attribute and not the inner html of the node.

For the selector issue, I think you want to change $('.tableContent', '.acceptIcon') to $('.tableContent .acceptIcon'). This is using css selector syntax for jQuery to select all nodes that have the acceptIcon class, which exist inside an element with the tableContent class.

var turnIdEdit = $('.tableContent .acceptIcon').attr('id');

Keep in mind that if there are multiple elements inside the .tableContent element with the acceptIcon class, this will not give the expected result and you will need to narrow the selector to isolate the element you are looking for.