0

IE seems to lock up with this code, and I can't figure out why. It works fine in FF and Chrome:

<input type="text" class="form-control" placeholder="Username Search" name="uname" id="uname" value="">

Script:

$('#uname').on('input', function() {
        $.get('?go=more_users&searchby=username&searchterm='+encodeURIComponent($('#uname').val()),function (result) 
        {
            $('#main-block').html(result);
            $('#uname').focus();
            tmpStr = $('#uname').val();
            $('#uname').val('');
            $('#uname').val(tmpStr);
        }
    );
});

Once I put the mouse in the input box, it locks right up. I see no errors or messages in the console and the server log shows nothing.

Any ideas?

Michał
  • 2,456
  • 4
  • 26
  • 33
Jafo
  • 1,200
  • 2
  • 11
  • 22
  • 2
    Try on `change` event instead – Michał Mar 10 '14 at 20:14
  • 1
    It would appear that `.on('input'` fires every time `#uname` is assigned to. – Robert Harvey Mar 10 '14 at 20:16
  • You might want to throttle that event. You're firing an AJAX call for each letter entered. – gen_Eric Mar 10 '14 at 20:18
  • 1
    @AnkurAggarwal: No. `.bind()` is deprecated. – gen_Eric Mar 10 '14 at 20:18
  • 1
    ***For debugging***, remove your ajax code and just include `$('#uname').val('');`, does the problem persist? – Kevin B Mar 10 '14 at 20:24
  • I need it to fire on each letter entered though? – Jafo Mar 10 '14 at 20:24
  • @Jafo Correct, `change` isn't what you want. `keydown` is a more appropriate replacement, but i don't think the event you are using is the cause. – Kevin B Mar 10 '14 at 20:26
  • If I do that for debugging, no the problem does not occur. – Jafo Mar 10 '14 at 20:28
  • I believe you are running into a Bug with IE11 related to clearing input fields, but i'm having problems finding any documentation on it. Here is a related question, but it also has no real answer. http://stackoverflow.com/questions/20787807/html-forms-crash-ie-11 – Kevin B Mar 10 '14 at 20:29
  • @Jafo: What about if you do `$('#uname').focus(); $('#uname').val('');`? Something is probably re-firing the event and creating an infinite loop. – gen_Eric Mar 10 '14 at 20:29
  • @KevinB: I wonder if that bug is the problem here. Usually, that bug makes the entire browser crash (Windows shows the "close program" window), not just lock up though. – gen_Eric Mar 10 '14 at 20:30
  • When using keydown it works better but only lets you enter two letters and then you can't enter any more nor change them. No locking though, so that is progress lol. – Jafo Mar 10 '14 at 20:32
  • BTW, keydown breaks the functionality in the other browsers. – Jafo Mar 10 '14 at 20:33
  • With keydown you would need to add a setTimeout, otherwise your value will always be 1 behind. – Kevin B Mar 10 '14 at 20:45
  • It seems to me that input is fired when you just click/tab-to on the input field. That is not what happens in the other browsers. Still debugging.. – Jafo Mar 10 '14 at 20:53

1 Answers1

1

Since moving to keydown seems to clear up the locking problem, adding a setTimeout should fix the cross-browser issues and make the page more efficient (it should significantly reduce the number of ajax requests that get sent.)

$('#uname').on('keydown', function () {
    var $this = $(this);
    clearTimeout($this.data("timer"));
    $this.data("timer",setTimeout(function(){
        $.get('?go=more_users&searchby=username&searchterm=' + encodeURIComponent($this.val()), function (result) {
            $('#main-block').html(result);
            $this.focus();
            // what is the purpose of the next three lines???            
            tmpStr = $this.val();
            $this.val('');
            $this.val(tmpStr);
        });
    },250));
});

This will cause the ajax request to only be sent if the user stops typing for 250ms. The user will hardly notice the delay.

Kevin B
  • 94,570
  • 16
  • 163
  • 180
  • This sort of worked, but I think part of the issue was with how I was updating the page via $.get. There is still an underlying issue with IE 11 for sure, but I was able to work around this by updating my design. I am going to mark yours as the answer because you got me the closest. Thanks for your time! :) – Jafo Mar 11 '14 at 04:52