How to show answer buttons after add button has been clicked on?

Question

I have an application here where an user is able to select their options and answers. The best way to explain you the question is if you use the application itself so you can see what is happening. Please follow steps below in application.

• Step 1: When you open application, you will see the "Open Grid" link, click on it and select an option type, after you select an option it will display the answer buttons at the bottom. For example if the option you choose is "5", it will display 5 answer buttons "A - E", if option chose is 8, it will display 8 answer buttons "AH".

Now this is fine. But the problem I have is if the user wants to add a previous option. please look at steps below:

• Step 2: Refresh the page
• Step 3: You will see a green plus button on left hand side, click on it, this will open up a modal window.
• Step 4: In the search box type in "AAA" and then click on "Submit" button, it will display rows from the database.
• Step 5: Please select a row by clicking on the "Add" button, the modal window will close and if you look at the answer and option control on the right hand side, you can see that the Option Type textbox and Number of Answers textbox appears, but the "Answer" buttons do not appear.

So my question is how can I get the "Answer" buttons to appear after the user has clicked on the "Add" button?

Below is function where it controls what happens after the "Add" button has been clicked on:

function addwindow(numberAnswer,gridValues) { 

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

    if($(plusbutton_clicked).attr('id')=='mainPlusbutton') { 


        $('#mainNumberAnswerTxt').val(numberAnswer);
        $('#mainGridTxt').val(gridValues);
        } else { 
            $(plusbutton_clicked).closest('tr').find('input.numberAnswerTxtRow').val(numberAnswer);
            $(plusbutton_clicked).closest('tr').find('input.gridTxtRow').val(gridValues);
            }

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

Below is the code where the answer buttons are stored (What do I need to call on to be able to show the answer buttons):

<table id="optionAndAnswer" class="optionAndAnswer">

...

<?php
    $a = range("A","Z");
?>

<table id="answerSection">
    <tr>

<?php
    $i = 1;
    foreach($a as $key => $val){
        if($i%7 == 1) echo"<tr><td>";
        echo"<input type=\"button\" onclick=\"btnclick(this);\" value=\"$val\" id=\"answer".$val."\" name=\"answer".$val."Name\" class=\"answerBtns answers answerBtnsOff\">";      
        if($i%7 == 0) echo"</td></tr>";
        $i++;
    }
?>
    </tr>
    <tr>
<td>
<input class="answerBtns answers" name="answerTrueName"  id="answerTrue"    type="button"   value="True"    onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerFalseName" id="answerFalse"   type="button"   value="False"   onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerYesName"   id="answerYes"     type="button"   value="Yes"     onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerNoName"    id="answerNo"      type="button"   value="No"      onclick="btnclick(this);"/>
</td>
</tr>
</table>
...
</table>

UPDATE:

Below is the code where it imports the answer buttons after an option is selected from the grid:

       $('.gridBtns').on('click', function()

    {

    appendAnswers(this);

});

function appendAnswers(t){
var clickedNumber = t.value;

        $(t).closest('.option').siblings('.numberAnswer').find('.answertxt').show();
        $(t).closest('.option').siblings('.numberAnswer').find('.string').hide();



         $(t).closest('.option').siblings('.answer').find('.answers').each(function(index) {
            if (!isNaN(clickedNumber) && index < clickedNumber) {
                $(t).show();
                $(t).closest('.option').siblings('.numberAnswer').find('.string').hide();


         // show but don't change the value
         $(t).closest('.option').siblings('.numberAnswer').find('.answertxt').show();


            } else {

                $(t).hide();
                $(t).removeClass('answerBtnsOn');
                $(t).addClass('answerBtnsOff');

            }

            var $this = $(t);
             var context = $this.parents('.optionAndAnswer');
             console.log($this);


        });

        prevButton = clickedNumber;


            $(t).closest('.option').siblings('.noofanswers').find('.string').hide();     
            $(t).closest('.option').siblings('.noofanswers').find('.answertxt').show();


        getButtons();

    };
});



    function getButtons()
    {
        var i;
        if (initClick == 0) {
            for (i = 65; i <= 90; i++) { // iterate over character codes for A to Z
                $("#answer" + String.fromCharCode(i)).removeClass("answerBtnsOn").addClass("answerBtnsOff");

            }

            initClick = 1;
        }
        // code above makes sure all buttons start off with class answerBtnsOff, (so all button are white).
    }

Answer 1

I'm not really too sure if I understand your question completely, but I tried out your application a few times and I think I understand: Load a result from the database -> populate fields with the result ?

Anyway, I see you're using Jquery, so I think you should be able to use .html() or .append() to add each button in a for loop: (I assume you've stored your answer buttons in an array). I'm lazy so I usually name targets with an ID #ButtonHolder is your for the buttons.

var buttonhtml = ""; //I personally like to build the html then insert it. 
var lastchar = gridValues.charCodeAt(gridvalues.length-1);
for (i=65;i<=lastchar;i++) // 65 is the code for "A"
buttonhtml += "<input type=\"button\" onclick=\"btnclick(this);\" value=\""+String.fromCharCode(i)+"\" id=\"answer"+String.fromCharCode(i)+"\" name=\"answer"+String.fromCharCode(i)+"Name\" class=\"answerBtns answers answerBtnsOn\">";
$("#ButtonHolder").html(buttonhtml);

Have you thought about instead of using onclick, using JQuery to handle the clicks with a class?

Edit:

function addwindow(questionText,textWeight,numberAnswer,gridValues) { 



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

    if($(plusbutton_clicked).attr('id')=='mainPlusbutton') { 

        if( gridValues != "True or False" && gridValues != "Yes or No" )
{
   var myNumbers = {};
   myNumbers["A-C"] = "3";
   myNumbers["A-D"] = "4";
   myNumbers["A-E"] = "5";
//...
   myNumbers["A-Z"] = "26";
   gridValues = myNumbers[gridValues];
   $('#mainNumberAnswerTxt').show();

}
else{
   $('#mainNumberAnswerTxt').hide();
}

        $('#mainTextarea').val(questionText); 
        $('#mainTxtWeight').val(textWeight);
        $('#mainNumberAnswerTxt').val(numberAnswer);
        $('#mainGridTxt').val(gridValues);
        } else { 
            $(plusbutton_clicked).closest('tr').find('input.numberAnswerTxtRow').val(numberAnswer);


$(plusbutton_clicked).closest('tr').find('input.gridTxtRow').val(gridValues);

    var lastchar = gridValues.charCodeAt(gridValues.length-1); // getting the last charcode i.e. "A-D" -> "D" -> 68
   $(".ansBtns").removeClass("answerBtnsOn").addClass("answerBtnsOff"); // reset all the buttons to off *I think this works* 
    // 65 is the code for "A" Iterating each choice and activating it:
    for (i=65;i<=lastchar;i++)
    $("#answer"+String.charCodeAt(i)).addClass("answerBtnsOn");    
        $.modal.close(); 
        return false;
    } 

Answer 2

Well, whats firing when you click on an option in the grid? if the name of the object that has the properties of what your looking for is named based off of the option type: ie "option type 4" is "op4" then, instead of having the "Previous Questions" query populate the field, have it store the values it returns as vars, then just call the same function that populates the answers when you click the option in the popup:

optionPicked("op" + opType);

or however you called it.

Answer 3

EDIT: "this" needed to be passes as an object, try edited code

Pull out the function from the onClick like this and then call it like "getChoice(4);" when the history page fires the add button.

Rewrite like this:

function getChoice(obj){

    var clickedNumber = this.value;

    $(obj).closest('.option').siblings('.numberAnswer').find('.answertxt').show();
    $(obj).closest('.option').siblings('.numberAnswer').find('.string').hide();



     $(obj).closest('.option').siblings('.answer').find('.answers').each(function(index) {
        if (!isNaN(clickedNumber) && index < clickedNumber) {
            $(obj).show();
            $(obj).closest('.option').siblings('.numberAnswer').find('.string').hide();


     // show but don't change the value
     $(obj).closest('.option').siblings('.numberAnswer').find('.answertxt').show();


        } else {

            $(obj).hide();
            $(obj).removeClass('answerBtnsOn');
            $(obj).addClass('answerBtnsOff');

        }

        var $this = $(obj);
         var context = $this.parents('.optionAndAnswer');
         console.log($this);


    });


    getButtons();

}



$('.gridBtns').on('click', function(){

getChoice(this);
});

Answer 4

Just call the same function as you use for the click on a .gridBtns. Make the function as his own function, and call it with the property (this) so it knows what data to use. I guess that's the solver. Just run that function again (maybe you have to modify it a bit in order to work for both buttons)

In order to do this. Make to eventlisteners, one for .gridBtns and one for the .addBtn.

When .gridBtns or .addBtns is called, just run the function in the eventlistener as:

$('.gridBtns').on('click', function(){
  appendAnswers(this);
});

and modify your function you used before to something like:

function appendAnswers(t){
  //t = this you defined in the onclick event
  //rest of your code here
}