0

I am trying implement a search box functionality and whenever user presses enter I am calling $.getJSON to query my web service. The problem is I can see that my keypress is handler is called but it never executes $.getJSON().

EDIT: I debugged further using Fiddler. I can see that request is going out and I get a HTTP 200 response. Now I am surprised why the remaining part of code is not executed.

What could be the problem?

$(document).ready(function() {

            $("#searchUser").keypress(function (event) {
                var keycode = (event.keyCode ? event.keyCode : event.which);
                if(keycode == '13'){
                    var queryString = this.value;
                    $.getJSON("/api/users", function(result) {
                        if (result != null) {
                            result = sortJSON(result, 'name');
                            var html = '<tbody>';
                            var i = 0;
                            for ( i = 0; i < result.length; i++) {
                                var j = 0;
                                var groups = '';

                                html += '<tr>';
                                html += '<td>' + result[i].id + '</td>';
                                html += '<td>' + result[i].emailAddress + '</td>';
                                html += '<td>' + result[i].name + '</td>';

                                result[i].groups = sortJSON(result[i].groups, 'name');
                                for ( j = 0; j < result[i].groups.length; j++) {
                                    groups += result[i].groups[j].name + ", ";
                                }

                                html += '<td>' + groups + '</td>';
                                html += '<td>' + result[i].department.name + '</td>';
                                html += '<td>SK</td>';
                                html += '</tr>';
                            }
                            html += '</tbody>';
                            $('#dataTable').append(html);
                        }
                    });
                }
                event.stopPropagation();
            });

});

Santhosh
  • 891
  • 3
  • 12
  • 31
  • How do you know for sure it's being called? – Cfreak Aug 08 '13 at 19:55
  • And how do you know for sure that `$.getJSON()` isn't executing? – Stephen Thomas Aug 08 '13 at 19:55
  • 3
    For the millionth time, just use `event.which`. jQuery normalizes the retrieval of the key code into `e.which` so you don't have to do `(event.keyCode ? event.keyCode : event.which);` – Ian Aug 08 '13 at 19:55
  • @StephenThomas I kept a breakpoint and saw that $.getJSON() call is never executed. – Santhosh Aug 08 '13 at 19:56
  • is the input inside a form? what's the point of `var queryString = this.value;` if you never use it? – wirey00 Aug 08 '13 at 19:59
  • @ᾠῗᵲᄐᶌ input is not inside a form. `var queryString = this.value;` I forgot remove this variable – Santhosh Aug 08 '13 at 20:00
  • are you sure no errors are occuring? you have no .error() handler, it might be executing but there is probably an error coming from the server – wirey00 Aug 08 '13 at 20:03
  • @ᾠῗᵲᄐᶌ I debugged further using Fiddler. I can see that request is going out and I get a HTTP 200 response. Now I am surprised why the remaining part of code is not executed. – Santhosh Aug 08 '13 at 20:06
  • *"Now I am surprised why the remaining part of code is not executed."* most likely because the request is not returning valid json, resulting in the error handler being triggered instead. – Kevin B Aug 08 '13 at 20:10
  • Does fiddler show what is inside the response? If not, do you have Chrome? Check the network tab and see if the response is returning anything ie. your JSON.. does your console show any errors? – wirey00 Aug 08 '13 at 20:11
  • @ᾠῗᵲᄐᶌ FIddler and Chrome network tab shows valid JSON response. – Santhosh Aug 08 '13 at 20:14
  • have you tried doing a console.log(result) in the success function? maybe try it before the if check. Also try to see if it gets inside the if check. Most importantly.. does your console show any errors? – wirey00 Aug 08 '13 at 20:18
  • @ᾠῗᵲᄐᶌ I think I figured out the problem. When .getJSON() is called chrome network tab shows the response is pending. Since $.getJSON() call is asynchronous, I had to use $.ajax() call and set async: false. Looks like my problem is resolved. – Santhosh Aug 08 '13 at 20:20
  • @ᾠῗᵲᄐᶌ Possible duplicate http://stackoverflow.com/questions/3419026/jquery-getjson-function-timing-issue – Santhosh Aug 08 '13 at 20:20
  • Only thing is that making the ajax call synchronous will lock up your browser until the call finishes.. It's not a good idea to do that. Your code should work fine as asynchronous because everything is inside your success function - which waits for the 200 response to return before executing. There must be something else that's causing the error – wirey00 Aug 08 '13 at 20:31

0 Answers0