How to change answer buttons after clicking on "Add" button? - php

Question

I have an application [here][1] where an user is able to select their options and answers. 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 "A-H".
Now this is fine. As you can see the correct amount of answer buttons appear depending on the option chosen from the grid. But the problem I have is if the user wants to add a previous option. please look at steps below:
Step 2: You will see a green plus button on left hand side, click on
it, this will open up a modal window.
Step 3: In the search box type in "AAA" and then click on "Submit"
button, it will display rows from the database.
Step 4: If you look at the first row you can see that under "Option Type" column, it is A-D. Select this row by clicking on the "Add" button.
What will happen is that 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 contains the number 4 (This is because Option Type was "A-D" so there are 4 options "A,B,C,D"), so it should display answer buttons A-D but it doesn't, it doesn't change the answer buttons at all, they remain the same.
So my question is how can I get the correct Answer buttons to appear after the user has clicked on the "Add" button?
Below is the code where it imports the answer buttons after an option is selected from the grid:
$('.gridBtns').on('click', function()
{
var clickedNumber = this.value;
$(this).closest('.option').siblings('.answer').find('.answers').each(function(index) {
if (!isNaN(clickedNumber) && index < clickedNumber) {
$(this).show();
} else {
$(this).hide();
$(this).removeClass('answerBtnsOn');
$(this).addClass('answerBtnsOff');
}
var $this = $(this);
var context = $this.parents('.optionAndAnswer');
console.log($this);
});
if (clickedNumber === 'True or False') {
$(this).closest('.option').siblings('.answer').find('input[name=answerTrueName]').show();
$(this).closest('.option').siblings('.answer').find('input[name=answerFalseName]').show();
} else if (clickedNumber === 'Yes or No') {
$(this).closest('.option').siblings('.answer').find('input[name=answerYesName]').show();
$(this).closest('.option').siblings('.answer').find('input[name=answerNoName]').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).
}
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;
}

Answer 1

After analyzing your above code as well as HTML source code of link you gave, looks like you are just one step behind. You are only assigning the grid value(4 in above case) to in mainGridTxt input box. You need to trigger the click event on the grid buttons.
Put the below code after $model.close
$('#btn'+gridValues).trigger('click');
Above code will trigger the click event on grid button with id 'btn4'.