Question

I have a piece of code below which works fine when it comes to adding text from a modal window into a textarea:

<script type="text/javascript">

var plusbutton_clicked;

function insertQuestion(form) {

    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
    var $plusrow = $("<td class='plusrow'></td>");
    var $question = $("<td class='question'></td>");


    $('.questionTextArea').each( function() {

    var $this = $(this);
    var $questionText = $("<textarea class='textAreaQuestion'></textarea>").attr('name',$this.attr('name')+"[]")
                   .attr('value',$this.val());

    $question.append($questionText);

    });

        $('.plusimage').each( function() {

    var $this = $(this);
    var $plusimagerow = $("<a onclick='return plusbutton(this);'><img src='Images/plussign.jpg' width='30' height='30' alt='Look Up Previous Question' class='imageplus'/></a>").attr('name',$this.attr('name')+"[]")
                   .attr('value',$this.val());

    $plusrow.append($plusimagerow);

    });

    $tr.append($plusrow);
    $tr.append($question);
    $tbody.append($tr); 

    form.questionText.value = "";

    $('.questionTextArea').val('');


}


function closewindow() {     

    $.modal.close(); 
    return false;
} 

$('.plusimage').live('click', function() {
    plusbutton($(this));
});


function plusbutton(plus_id) {
    // Set global info
    plusbutton_clicked = plus_id;
    // Display an external page using an iframe
    var src = "previousquestions.php";
    $.modal('<iframe src="' + src + '" style="border:0;width:100%;height:100%;">');
    return false;
}


function addwindow(questionText) { 

    if(window.console) console.log();

    if($(plusbutton_clicked).attr('id')=='mainPlusbutton') { 
        $('#mainTextarea').val(questionText); 
        } else { 
            $(plusbutton_clicked).parent('td').next('td.question').find('textarea.textAreaQuestion').val(questionText);
            }

    $.modal.close(); 
    return false;
} 


</script>

But the problem is that if I include this code below which I need into the function insertQuestion(form) {, then it stops the text adding into the textarea, why is it doing this?

var $qid = $("<td class='qid'>" + qnum + "</td>" );

...

$tr.append($qid);

$qid is the question number for each row, so everytime a row is added, it adds a question number by plus 1 each time.

Blow is the html code of where it appends the textarea from the top into a table row:

<table id="question">
<tr>
    <th colspan="2">
        Question Number <span class="questionNum">1</span>
        <input type="hidden" class="num_questions" name="numQuestion" value="1">
    </th>
</tr>
<tr>
    <td rowspan="3">Question:</td> 
    <td rowspan="3">
        <textarea class="questionTextArea" id="mainTextarea" rows="5" cols="40" name="questionText"></textarea>
    </td>
</tr>
</table>

UPDATE:

I have included links to both applications. One that works but does not include $qid, and one that includes $qid and doesn’t work but which I do need working. Please follow steps in both applications so you can test it yourself and see what is happening:

Application 1: No $qid but working.

Aplication 2: Contains $qid but not working:

Follow steps below for both applications:

1. Click on “Add Question” button, then will add a textarea within a new row.
2. Click on the “Green Plus” button within the table row you just added, a modal window will appear.
3. In modal window it displays a search bar, in search bar type in “AAA” and click on “Search” button
4. Results will appear of your search, click on “Add” button to add a row. You will find out modal window is closed but the content from the “Question” field is not added in the textarea within the row you clicked on the green plus button

Answer 1

Try explicity setting the td value with

var $qid = $("<td class='qid'></td>" ).text(qnum);  
$tr.append($qid);

And then replace the text setting code from

$(plusbutton_clicked).parent('td').next('td.question').find('textarea.textAreaQuestion').val(questionText); 

to

$(plusbutton_clicked).closest('tr').find('textarea.textAreaQuestion').val(questionText);