Geeks With Blogs

News Please visit me at my new blog!!

profile for Aligned at Stack Overflow, Q&A for professional and enthusiast programmers
"free in Christ Jesus from the law of sin and death." Romans 8:2 (ESV) Check out the Falling Plates video on YouTube.
more about the Gospel
And then listen to Francis Chan speaking at LifeLight in SD.



Programming and Learning from SD

Our tester found a bug with my search box. The search box filters a grid using observables. IE 9 and 10, and Crome adds in a x clear option, this wasn’t changing the observable, so the filter wasn’t getting cleared out.


(image from SO question)

<input id="searchTextBox" class="searchTextBox" type="text" maxlength="25"
       title="Search" placeholder="Search"
       data-bind="value: GridVm.FilterText,
       valueUpdate: 'afterkeydown',
       disable: GridVm.Data().length == 0" />

I posted my question and ended up answering my own question on StackOverflow and thought I would share it here as well.

My solution involves using the http://knockoutjs.com/documentation/event-binding.html and the input event.

<input type="search" id="input1" 
  data-bind="value: textForBox, 
    valueUpdate: 'afterkeydown',
    event: { input: cleared }" />

var vm = {
    textForBox: ko.observable(),
    cleared: function (data, event) {
        if (event.currentTarget.value === '') {
           this.textForBox('');
        }
    }
};
ko.applyBindings(vm);
 
See my jsFiddle showing the solution.

 

Note: IE9 doesn’t show the x button, but if you are running IE10 with the Developer’s tools open and change the Browser Mode to IE9 and the Document Mode to IE9 standards, the x is shown and my approach doesn’t work (the input event does not fire) in that instance.

Hope it helps!

EDIT: A new answer from Hafthor to use the input binding instead of the afterKeyDown. The event isn't needed after that.

Posted on Tuesday, May 7, 2013 11:02 AM Knockout Js | Back to top


Comments on this post: Handling IE 9 & 10's and Chrome’s clear button with Knockout binding

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © Aligned | Powered by: GeeksWithBlogs.net