Question

I have a slight problem with my application.

It is very difficult to explain but if you follow the steps below in my fiddle then you will understand it a lot better.

1: open the grid and select option “5”. The textbox would show the value “5”.

2: Click on the “Add Question” button, a new row would appear showing option value selected in a text box.

3: Now click on the “Open grid” link within the row and select option “8”. The textbox within the row changes to show value “8”.

But go back to the option feature on the top and click on “Open Grid”, the textbox still states “5” which is correct but it states option “8” is selected when it still should be option “5”.

So how can I get it so that if the user changes an option from within a table row, it does not change the option selected at the top?

My code is in the fiddle, please use it to test your ideas. click here

Answer 1

The problem is that you are re-using that same element to select the numbers. Whenever a number is clicked, it becomes the “active” one. Instead of doing it this way, select the appropriate button based on the relevant textbox at the time the grid is shown.

http://jsfiddle.net/f8cKm/25/

$('.showGrid').live('click', function(jqEvt) {

        $(".gridBtns").removeClass("gridBtnsOn");

        var value = $(this).siblings('input[name=gridValues]').val();

        $("#btn" + value).addClass("gridBtnsOn");