1

I have a function where if the user clicks on a button, it will display a value in the textbox and it will perform a trigger to another function after a '#btn' button is clicked:

function addwindow(numberAnswer, gridValues, btn) { 
    $('#mainNumberAnswerTxt').val(numberAnswer).data('data-ignore',true);
    $('#btn'+gridValues).trigger('click');       
 }

Now what I want to do is that:

  1. if the user clicked on the "Add" button, then display the number from the "Number of Answers" column into the textbox or in other words perform this from the addwindow() function:

    $('#mainNumberAnswerTxt').val(numberAnswer).data('data-ignore',true);

  2. If the user has clicked on a #btn+gridValues button, then display the number in the textbox of the number of buttons which are currently turned on or in other words perform this code:

    if ($('#mainNumberAnswerTxt').data('data-ignore') != true) { $('.answertxt', context).val(context.find('.answerBtnsOn').length > 0 ? context.find('.answerBtnsOn').length : 0); }

The problem is that step 1 works fine, it does display the number from the "Number of Answers" column in the textbox after the user has clicked on the "Add" button.

The problem is step 2, it is not displaying the correct number on how many buttons are currently turned on after the user has clicked on the #btn+gridValues button.It just doesn't change the number in the textbox.

Does anyone know why this is happening and how thi can be fixed?

DEMO:

Here is a demo of the application. Please follow the steps below:

Step 1: On left hand side you will see a green plus button, click on it and it opens up a modal window. Step 2: In modal window there is a search bar, type in "AAA" and submit search, you will see a bunch of rows appear. Step 3: In the last row, you see under "Number of Answer" colum that it contains the number 4, click on the "Add" button within this row, the modal window will close.

You will see that the textbox displays the number 4 in the textbox which is fine as that was the number within the row under the "Number of Answers" column when you added the row.

But below is the problem:

Step 4: If you click on the "Open Grid" link and select button 3, you will see the letter buttons below change to A-C with only letter "B" turned on.

In the textbox it should display number 1 as only 1 button is turned on, but it doesn't display this number and that is the problem I am having.

How can this problem be fixed?

4

2 回答 2

2

The problem comes from the fact taht you're setting the data-attribute to false on the $('#mainNumberAnswerTxt') but you're checking against the inputs (this in the click).

One solution would be to do the following test if ($('#mainNumberAnswerTxt').attr('data-ignore') != true)

EDIT

To ensure that the ignore process execute only once (when the grid is reloaded after the modal), you'll have to change what's inside the block after the test:

if ($('#mainNumberAnswerTxt').data('ignore') != true) {
    $('.answertxt', context).val(context.find('.answerBtnsOn').length > 0 ? context.find('.answerBtnsOn').length : 0);
} else {
    /*reset the ignore flag*/
    $('#mainNumberAnswerTxt').data('ignore',false);
}

EDIT2

The main problem is that your reaffecting the $('#mainNumberAnswerTxt').val(numberAnswer) after setting it. Your trying to ignore it through the ignoreattribute.

What i would adivse, would be to remove every occurence to that attribute and to change the following function 

function addwindow(questionText,textWeight,numberAnswer,gridValues,reply,btn) {
    var answers = $.map(btn.split(''),function(chr){ return "#answer"+chr; }).join(', ');
    if($(plusbutton_clicked).attr('id')=='mainPlusbutton') {
        var myNumbers = {};
        myNumbers["A-C"] = "3";
        myNumbers["A-D"] = "4";
        myNumbers["A-E"] = "5";
        myNumbers["A-F"] = "6";
        myNumbers["A-G"] = "7";
        gridValues = myNumbers[gridValues];
        $('#mainNumberAnswerTxt').show();
        $('#mainNumberAnswerTxt').val(numberAnswer).data('ignore',true);
        $('#mainGridTxt').val(gridValues).parent().append($('.optionTypeTbl'));
        $('#btn'+gridValues).trigger('click');
        $('.answers.answerBtnsOn').removeClass('answerBtnsOn').addClass('answerBtnsOff');
        $(answers).addClass("answerBtnsOn").siblings().addClass('answerBtnsOff');
    }
    $.modal.close();
    return false;
}

to : 

function addwindow(questionText,textWeight,numberAnswer,gridValues,reply,btn) {
    var answers = $.map(btn.split(''),function(chr){ return "#answer"+chr; }).join(', ');
    if($(plusbutton_clicked).attr('id')=='mainPlusbutton') {
        var myNumbers = {};
        myNumbers["A-C"] = "3";
        myNumbers["A-D"] = "4";
        myNumbers["A-E"] = "5";
        myNumbers["A-F"] = "6";
        myNumbers["A-G"] = "7";
        gridValues = myNumbers[gridValues];
        $('#mainNumberAnswerTxt').show();
        $('#mainGridTxt').val(gridValues).parent().append($('.optionTypeTbl'));
        $('#btn'+gridValues).trigger('click');
        /* moved the following line below the click simulation, 
           hence its value will be changed regardless of what happened during the click simulation*/
        $('#mainNumberAnswerTxt').val(numberAnswer);
        $('.answers.answerBtnsOn').removeClass('answerBtnsOn').addClass('answerBtnsOff');
        $(answers).addClass("answerBtnsOn").siblings().addClass('answerBtnsOff');
    }
    $.modal.close();
    return false;
}

In order to modify the value after the visual changes took place.

于 2012-07-15T11:57:26.047 回答
0

Use data instead of attr - attr takes a string, data takes JavaScript objects.

于 2012-07-15T11:11:12.347 回答