Question

I have a function below where the if statement works when it comes to adding content into a single textarea when clicking the “Add” button:

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

The problem is the else statement is not working when it comes to adding content within one of the appended textareas. What I want is that if a user clicks on a Plus button and adds a content by clicking on the “Add” button, the textarea which belongs in the same row as the plus button which was clicked on will add the content. What do I need to change in order to do this?

Below is the code whch shows the textareas and plus buttons which are appended:

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

}

Below is the php code where it displays the “QuestionContent” and “Add” button for each row. When user clicks on the “Add” button it adds the “QuestionContent” into the single textarea on top but not in the multiple textareas which are appended.

  <?php

    $output = "";

            while ($questionrow = mysql_fetch_assoc($questionresult)) {
    $output .= "
    <table>
          <tr>
          <td class='addtd'><button type='button' class='add' onclick='parent.addwindow();'>Add</button></td>
          </tr>";
            }
            $output .= "        </table>";

            echo $output;

            ?> 

You can view application here. Please follow the steps to use the application:

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

If you did the steps in the top textarea (the one above the horizontal line), then it does work, it just doesn’t work for textarea which you have just added

Answer 1

One of your errors:

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

You’re using jQuery 1.7 in your page, the .live method has been deprecated since jQuery 1.7. You should use .on instead.

You’re also triggering your plusbutton function in your generated links:

<a value="" name="plusbuttonrow[]" onclick="return plusbutton();">

Which isn’t passing any element as parameter to your plusbutton function be stored in your global var plusbutton_clicked which you are expecting. There’s no reference to the clicked element then, therefore it doesn’t find any element when you use the plusbutton_clicked var in the addwindow function.

Either keep the .on method or the onclick calls above to prevent the function from being fired twice.

There might be other errors as well (e.g. You’re checking for id attributes which do not exist for the dynamically generated elements), but this is the main one. Also, I wonder if you don’t have any deadline to finish this, it’s the 10th time I see this question in the previous 3 weeks.. At least you made some progress, congratz.