0

I'm having a difficult time figuring out how to do this. I have a KnockoutJS viewmodel attached to a table of inputs. When the first input in each row blurs, I pop up a modal asking the user a question. If they answer 'no', the focus needs to go back to the original input. If 'yes', the focus should jump to the next input in the row. I'm not sure how to pass along the input ID from knockoutJS into the modal and back out again. Or if there is a better way to do it.

HTML for the input with blur function:

<td data-bind="css: { highlighted: $root.highlightedRowIndex() == $index() }">
  <input type="text" data-bind="value: itemNo, insertPress: $index, deletePress: $index, hasFocus: invalidItemNum, selected: invalidItemNum, event: { blur: function(){ $parent.checkItemNo($data, $index); } }, attr: { name: 'sellerItems[' + $index() + '].itemNo', id: 'sellerItems_' + $index() + '__itemNo', tabindex: 5 + $index() }" class="form-control" />
</td>

And the associated KO:

self.checkItemNo = function(data, index) {
                console.log(data);
                var itemNo = $.trim(data.itemNo());
                if(verify == "False") {                    
                    ......
                } else {
                    if(!foundItem && itemNo != "") {
                        $('#invalidItemMsg').html("Item number <strong>" + itemNo + "</strong> is not a valid item number.  Would you like to report it?")
                        $('#invalidItemNum').val(itemNo);
                        $('#invalidItemModal').modal('show');
                    }
                }
            };

And then my JS modal button click event(the 'yes' button in the modal):

$('#reportItem').click(function() {
            $('#invalidItemModal').modal('hide');
            // ??? - go to next knockout input from previous input that was blurred
        });
dmikester1
  • 1,374
  • 11
  • 55
  • 113
  • It's not a direct answer to your question, but there's [a library called knockstrap](https://faulknercs.github.io/Knockstrap/) that's designed to bridge the gap between the two, it may provide the functionality you need. – James Thorpe May 24 '17 at 20:21
  • Thanks. Seems like a lot of overhead for such a simple issue, but if I can't find anything else, I might use it. – dmikester1 May 24 '17 at 20:25
  • You really need a [binding handler for your modal](https://stackoverflow.com/questions/22706765/twitter-bootstrap-3-modal-with-knockout). Manipulating the DOM is Knockout's job, and you're going to be stepping on its toes. – Roy J May 26 '17 at 16:00
  • Maybe using bootbox might solve your problem, you can call this from a javascript function and get the result of the dialog. – Nimesco May 29 '17 at 13:24

0 Answers0