1

I have a test application here which you can use:

Please follow steps below in order to use the app: Application

1. Open the application and you will see that "Total number of Marks Remaining" is 20. Click on the "Add Question" button, this will append a row underneath.

2. Now within the appended row you will see a text input. Type in the number 10 in the text input and click away. You will see that the "Total number of Marks Remaining" has changed from 20 to 10 which is correct (20-10=10)

3. Now within that same row there is a green plus button, click on this button and a modal window will appear with a search bar inside.

4. In the search bar type in 2+2 an then enter the search. A row will appear where under the "Number of Marks" column it shows the number 5, Click on the "Add" button to add the row.

5. This is where the problem is, you will see that in the appended row it says in the text input "5" but if you go back to the top it still says "Total number of Marks Remaining: 10". This should change to 15 as 20 - 5 = 15. But it does not change.

My question is that after the user has added a number into an appended row, how can I get the total marks number to change? Is it because I am using the "OnChange" attribute?

Below is a jsfiddle where it shows the whole code: (Jsfiddle is not a working example, it is just there so you can see the whole code):

http://jsfiddle.net/WZKrP/2/

user1701484
  • 233
  • 1
  • 2
  • 12

2 Answers2

1

On the "add" button in the modal window, you're calling parent.addwindow(key_0,'5','1','A-D','Single','A'); but the function addWindow() in your javascript only has 1 parameter: addwindow(textWeight)... Youy are sending 5 parameters.

The function is being called correctly, you're just not doing anything with the data.

this is what you're sending to the function

enter image description here

Edit after comments

use $(plusbutton_clicked).closest('tr').find('input.txtWeightRow').val(textWeight).‌​trigger('change'); to trigger the change

VVV
  • 7,563
  • 3
  • 34
  • 55
  • I was trying to cut down on the code hence why I only included the textWeight function but I realised I made a mistake with the application. Give me 5 mins to fix the application and then you will be able to test it again. Sorry bout this – user1701484 Oct 11 '12 at 16:15
  • Well all you need to do after is take the val() and and the "5" to it. Make sur to use parseInt("5") so that the five becomes a number and not a string. PS: replace the 5 by your variable. – VVV Oct 11 '12 at 16:18
  • Please test the application now, you now should be able to follow the steps without any problems (well until you reach step 5 when it doesn't change the number lol) – user1701484 Oct 11 '12 at 16:20
  • Could you change line 166: `$(plusbutton_clicked).closest('tr').find('input.txtWeightRow').val(textWeight);` to `$(plusbutton_clicked).closest('tr').find('input.txtWeightRow').attr('value', textWeight);`. You're changing the val() but not the value. I'm thinking that the `change` only applies when you change the value and not the val. It's not the same thing. – VVV Oct 11 '12 at 16:32
  • or better yet change it to `$(plusbutton_clicked).closest('tr').find('input.txtWeightRow').val(textWeight).trigger('change');` – VVV Oct 11 '12 at 16:42
  • Genius that has worked, can I ask one little question. When I use onchange method, it means the user enters in a number in textbox and then when they click away then the number changes. There is another attribute "onkeypress" where if you type in a number, it does the change straight way while typing in the number. My question is which would you say is better `onchange` or the `onkeypress` for this scenario? – user1701484 Oct 11 '12 at 16:57
  • I think you're talking about the blur() method which is triggered when the input looses the focus(). In your example, the total mark value changes when I hit enter, which is also fine. It all depends on what you want to achieve. Use onchange to show the updated field as the user types or blur()/ENTER if you want to calculate everything at once. – VVV Oct 11 '12 at 17:01
  • Oh I see you updated the comment. I'd go with onchange because the input can be filled in other ways than typing in it, For exampe right-click -> paste. But that's just an opinion. – VVV Oct 11 '12 at 17:03
  • I realize there may be a slight problem with your answer. Let me just check something and I will get back to you – user1701484 Oct 11 '12 at 17:04
  • Ok yes there is a problem which is strange. Ok if you follow the same steps in my question, you find out that with your change it works. But then click on the "Add Question" button again to append another row. You can see that the total marks remaining goes back to saying "20", then if I enter in the number 10 in the second row's textbox, then the total marks remaining is "10", it should be "5" but it is ignoring the first row, I am guessing because of the trigger done in the first row but Im not sure – user1701484 Oct 11 '12 at 17:08
  • The error is another problem. It's in the calculateTotal() function. You're saying `totalweight = totalmarks - Number($(elm).val(), 10);`. You're not storing the variable anywhere so it's always resetting. It's the same as saying `0 = 20 - 5` then `0 = 20 - 10` so of course `totalweight` will always be equal to the last row. – VVV Oct 11 '12 at 17:21
0

I think this code $('#mainTxtWeight').val(textWeight); is causing the problem.

According to W3C documentation, if you programmatically change the value of an input control, you have to manually fire the change event.

Try using a blur event or just manually fire the change event

Refer to my answer to another SO question for more information.

Community
  • 1
  • 1
prashanth
  • 2,059
  • 12
  • 13