Dynamically created table row element cannot refer using Id with jquery

Question

I cannot read the dynamically added from my edit method. The rows are dynamically added and the rows contains span with Id. I am trying to read the content of the span from another jquery method. Both the methods are given below.

function AddQuestionChoice() {
    var table = $("#questionOptionsTable");
    var index = $('#questionOptionsTable tr').length - 1;
    var choiceSequenceNo = $("#choiceSequenceNo").val();
    var choiceText = $("#choiceText").val();

    if (!$("#choiceSequenceNo").val())
    {
        alert("Enter sequence number");
        return;
    }

    if (!$("#choiceText").val())
    {
        alert("Enter choice");
        return;
    }

    if (!$.isNumeric(choiceSequenceNo))
    {
        alert("Enter valid sequence number.")
        return;
    }

    var row = "<tr bgcolor='#fff'><td id='choiceDiv[" + index + "]'> <span name= 'eventSurveyQuestion.Sequences[" + index + "]' id='eventSurveyQuestion.Sequences[" + index + "]'>" + choiceSequenceNo + "</span> &nbsp;</td><td> <span name='eventSurveyQuestion.Options[" + index + "]' id='eventSurveyQuestion.Options[" + index + "]'>" + choiceText + "</span> &nbsp;</td>" +
                     "<td><a href='javascript:EditQuestionChoice(" + index + ");'><img src='/Content/themes/Default/images/action1.png'></a> <a href='javascript:RemoveQuestionChoice(" + index + ");'><img src='/Content/themes/Default/images/action2.png'></a></td></tr>";

    $('#questionOptionsTable').append(row);

    var length = $('#questionOptionsTable tr').length;
    $("#choiceSequenceNo").val(length);
    $("#choiceText").val('');

}
function EditQuestionChoice(index)
{
    var sequenceNumber = $("#eventSurveyQuestion.Sequences["+index + "]").text();
    alert(sequenceNumber);
    var choiceText = $("#eventSurveyQuestion.Options["+ index +"]").text();
    $("#choiceSequenceNo").val(sequenceNumber);
    $("#choiceText").val(choiceText);
}

The question is the order of the two events: when is it created and when is it called? Can you show more of your code? — verjas, Sep 08 '15 at 10:32
`$('#someId').text()` will return the text. `$('#someId').text('stuff')` will replace the text with stuff. currently your example works http://jsfiddle.net/1euaLup3/ — Joel Almeida, Sep 08 '15 at 10:33
I have a button in my page to add the content from text boxes to the table. That time I am adding to the row. — Rupesh P, Sep 08 '15 at 10:37
But I have an edit button in the row which calls another jquery method to refer the span element. It does not seems. I suspect my span is not registered in the DOM? — Rupesh P, Sep 08 '15 at 10:39
Then, I think the problem is not the span (which IS in the DOM), but the newly created edit button. When you create buttons dynamically, you must make sure that the buttons have the proper function attached. — verjas, Sep 08 '15 at 10:42
Actually that part is also correct. My question is, is the way I am doing is correct? — Rupesh P, Sep 08 '15 at 10:45
I should work, but if you don't show the code, we're just guessing. Take a look here. Are you doing something like this? http://jsfiddle.net/p9stwexd/1/ — verjas, Sep 08 '15 at 10:57
Are you sure the formula for the index value is correct? Did you check what ids are generated in the DOM? — verjas, Sep 08 '15 at 12:07
Yes I am sure. The reason is I tried by hard coding the index as zero which is the index of the first row. — Rupesh P, Sep 08 '15 at 12:46
Id are generated as expected. Any other alternative I can try? — Rupesh P, Sep 08 '15 at 12:53
See my answer. You need to escape ALL problematic characters! That includes "[" and "]". You CAN NOT use "#questSequence[0]" in jQuery. Use "#questSequence\\\[0\\\]" (double \\\) — verjas, Sep 08 '15 at 13:46

score 1 · Answer 1 · answered Sep 08 '15 at 10:34

1

text is a jquery function and not a property, use $("#someId").text() to get the value of the span.

Make sure you have jquery loaded and your code is within a ready function :

$(document).ready(function(){
 
  var row= "<tr><td><span id='someId'>spancontent</span></td></tr>";
  $('#table').append(row);
  
   $('#rowText').click(function(){
   
     alert($("#someId").text());
   });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table" border="1"></table>

<a href="#" id="rowText">View row text</a>

answered Sep 08 '15 at 10:34

KAD

10,972
4
31
73

Yes it is a typo, please ignore. – Rupesh P Sep 08 '15 at 10:43
In other words, Can I refer the element with in the row I added with $('#table').append(row) from another jquery method? – Rupesh P Sep 08 '15 at 10:53
Yes you can, just make sure you do it after the append so that you guarantee the element have been added to the DOM. – KAD Sep 08 '15 at 11:08

score 0 · Accepted Answer · edited May 23 '17 at 11:58

0

I think the problem is that in jQuery the dot (.) is reserved for class names. So your span has a problematic id:

"#eventSurveyQuestion.Sequence[..."

When you use:

var choiceText = $("#eventSurveyQuestion.Options["+ index +"]").text();

jQuery will look for "#eventSurveyQuestion" with a ".Sequence" class, instead of an id of "#eventSurveyQuestion.Sequence".

Try instead (use escape rules):

var choiceText = $("#eventSurveyQuestion\\.Options\\["+ index +"\\]").text();

Note: you need to escape ALL problematic characters: . [ and ]

See proof here: jsfiddle

See explanation here: jQuery dot in ID selector

edited May 23 '17 at 11:58

Community

1
1

answered Sep 08 '15 at 11:32

verjas

1,793
1
15
18

No luck so far, I tried with escape rules. Also changed the id to just seqtext and optText. Still not working so it is that. – Rupesh P Sep 08 '15 at 11:58
Immediately after added the row to the table, I tried to get the value, even there it is not getting. As zero will be the index for the first row, I did like the following. Note: I had changed the id as 'questSequence[' + index + "]" $('#questionOptionsTable').append(row); alert($("#questSequence[0]").text()); – Rupesh P Sep 08 '15 at 13:41
You need to escape ALL problematic characters! That includes "[" and "]". You CAN NOT use "#questSequence[0]" in jQuery. Use "#questSequence\\[0\\]" (double \\) – verjas Sep 08 '15 at 13:48
Finally! I'm glad. Good luck with everything! – verjas Sep 08 '15 at 15:36

Dynamically created table row element cannot refer using Id with jquery

2 Answers2