Reflip checkbox if error

Question

I have a checkbox that has some style on it so it looks like it's flipping. When the user presses the button it flips visually on the client side but I send a request off to the server to save that change to a database. If some error happens I'd like to reflip it on the client side. I'll know if something happens because the error callback of the http.post() will be raised. The question I have is how would I flip that checkbox back to it's original state?

Here is the visual I'm using for the checkbox. I'm using the flipable one: https://codepen.io/anon/pen/yXNopJ?editors=1100

Here is an example of the checkbox (one for each month)

<input class="tgl tgl-flip" id="cbJan_{{ s.MFGName }}" type="checkbox" ng-model="s.Jan" ng-change="vm.monthValueChanged(s.MFGName, 'Jan', s.Jan)" />
<label class="tgl-btn" data-tg-off="OFF" data-tg-on="ON" for="cbJan_{{ s.MFGName }}" ></label>

In my javascript code I tried to use jquery to build the id and check it but that didn't do anything. It didn't error and it didn't revert the checkbox.

function (error, status) {
       alertify.delay(0).maxLogItems(3).closeLogOnClick(true).error('Error: ' + error.data.Message + ' <a href="#" class="close-icon"></a>');
       var data = JSON.parse(error.config.data);

        var name = 'cb' + data.Month + '_' + data.MFG;
        console.log(name);
        $(name).prop('checked', !data.Value);
        // todo: negate data.Value to get the original value and set the checkbox to that state programmatically
    }

How are you capturing errors? If you capture/force an error, you can then tell your checkbox via Javascript to be unchecked like so: https://stackoverflow.com/a/8206573/1046690 — AGE, Jul 14 '17 at 18:56
That function I posted is the error function inside the http.post() I make (using angular). I'm trying to do what you are suggesting but it's not working. — user441521, Jul 14 '17 at 18:58
Is this function being triggered on your `.then` as an error callback function? — AGE, Jul 14 '17 at 19:02
Are you selecting the correct element with `$(name)`? What does `console.log(name)` output? — showdev, Jul 14 '17 at 19:02
@showdev Yeah it's the name that would be created. As you can see I create the ID from the angular view model s.MFGName. For example the output is cbJan_Cambells which is correct. I'm not sure if building that name from angular view model data causes jquery to not find the element. If so then I don't know how to get the element to the error function. — user441521, Jul 14 '17 at 19:06
console.log($(name)); results in not finding it, but as I've stated I'm not sure if that's because of building the ID with angular view model data (s.MFGName) and how jquery would treat that. — user441521, Jul 14 '17 at 19:08
@user441521 have you tried binding the checkbox via angular to modify its values rather than using jQuery? Example: https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D — AGE, Jul 14 '17 at 19:08
this is what I have around the checkboxes. It's looping over all the data. I'm just not sure how to get that to my error callback so I know the specific record/month data point was selected. Maybe pass something to monthValueChanged() but not sure what. — user441521, Jul 14 '17 at 19:12
Maybe its an angular scoping issue? If the name is correct but the element is not found maybe the element is not in the same scope as the function accessing it? Also to change the checked attribute using jquery, I think it would need to be some thing like : $(name).attr('checked', !data.Value); — Robert Fines, Jul 14 '17 at 19:12
It seems like the selector should start with a `#` to select an element by ID. Not sure if that's the problem though. — showdev, Jul 14 '17 at 19:16
OK I think I got it. (so s is that element in the array). ng-change="vm.monthValueChanged(s.MFGName, 'Jan', s.Jan, s) (pass in s and inside this function is where I do the post so in it's error callback I can set s[month] = !data.Value and it looks like it reverts it back. — user441521, Jul 14 '17 at 19:16
Oh ok, that's even better! If you can, please post an answer explaining your solution. — showdev, Jul 14 '17 at 19:17
@showdev Actually you were right too. Just tested with the # and that worked as well, but I think I'll stick with the model way. Good eye, totally missed that. — user441521, Jul 14 '17 at 19:18

score 1 · Answer 1 · answered Jul 14 '17 at 19:22

Thanks for bouncing ideas off with me guys. I was able to get this to work by passing in the model as the last param:

ng-change="vm.monthValueChanged(s.MFGName, 'Jan', s.Jan, s)"

That gets me the right MFG record, but then I needed to know what month column. Luckily I was already passing in the month 'Jan'. So I could get the right piece of data in the array and flip it which resulted in the visual flipping of the checkbox.

model[month] = !data.Value;

Reflip checkbox if error

1 Answers1