1

In relation to this question: jQuery loop over JSON result from AJAX Success?

I've got the following which makes Firefox use up way too much cpu before returning too many items (new divs) with only some 'undefined' texts in it, although I can see (at a fiddle page I use) that the way I want to retrieve items (e.g. user.functionTitle) is correct. What is going wrong here?

var result = [{"id":7,
"loginID":"jdoe",
"userStatus":"ACTIVE",
"firstName":"John",
"middleName":"",
"prefix":"",
"lastName":"Doe",
"functionTitle":"Junior developer"},
{"id":8,
"loginID":"jadoe",
"userStatus":"ACTIVE",
"firstName":"Jane",
"middleName":"",
"prefix":"",
"lastName":"Doe",
"functionTitle":"Junior developer"}
];

And the following ajax statement which I try to debug with firebug, but after the line with "$.each(result, function(idx, user) {" it simply hangs untill Firefox tells me some javascript is taking too much time ...

    $.ajax({
        type : 'POST',
        url : "../hrm/search",
        contentType : 'application/x-www-form-urlencoded',
        cache: false,
        data: "name=" + $("#site-search").val(),
        dataType : 'text',
        success : function(result) {
            if (result != null) {
                $.each(result, function(idx, user) {
                        $('#found-users').append("<div class='option'>" +
                            "<div class='pass-wrapper'>" +
                        "</div>" +
                            "<div class='sr-content'>" + user.firstName + " " + user.prefix + " " + user.lastName + "</div>" +
                            "<div class='sr-content'>" + user.functionTitle + "</div>" +
                        + "</div>");
                });
                $("#found-users").show;
            } else {
                 $('#found-users').hide;
                 $('#found-users div').empty();
            }

        }
    });

The code in the jsp page simply looks like this:

                            <div><input type="text" placeholder="search" id="site-search"></div>
                            <div id="found-users" class="search-results options">
                            </div>

First of all: If I put the data together with the following statement in a jsfiddle page it does exactly what it should do, it pops up with the function title twice. How can the same code execute way more than twice when I add div's to a page instead of pop up an alert? And second why does user.functionTitle suddenly return undefined?

$.each(result, function(idx, user) {
        alert(user.functionTitle);
});
Community
  • 1
  • 1
user1829860
  • 111
  • 1
  • 10
  • probably not the answer but: `data: "name=" + $("#site-search").val(),` could be `data: {name : $("#site-search").val() }` . i see no bugs in the code you pasted. – Joel Harkes Apr 17 '13 at 14:03
  • is `var result = [{"id":7, ...` what you get from your request? if so: the request should just return `[{"id":7, ... ]` jquery itself will put this into result – Joel Harkes Apr 17 '13 at 14:05
  • What wraps the ajax call? – Kevin B Apr 17 '13 at 14:16
  • Firebug shows that the request just returns `[{"id":7, ... ]`. Funny thing is I've just replaced the code around the each statement to `var i = 0; $.each(result, function(idx, user) {i++;}); alert(i);` and that shows 114453. At least now I understand why Firefox isn't happy with the amount of time javascript takes ... – user1829860 Apr 17 '13 at 14:24
  • As for Kevins question: I'm not sure I understand your question, but the ajax call is inside this statement: `$('#site-search').bind('keyup', function(ev) {` – user1829860 Apr 17 '13 at 14:25
  • @user1829860 Eliminate that from the equation, rename the event to `"myCustomEvent"` then trigger it manually with `.triggerHandler("myCustomEvent")` on the element just to rule out the event handling. – Kevin B Apr 17 '13 at 14:36
  • I just found out that the loop isn't iterating over the items in the user objects, but over the single characters in the result that's coming in. Apparently the 'jquery each statement' in my jsp doesn't understand the structure of result, although putting that same result in a var result on a jsfiddle page and executing the same 'jquery each statement' does work. – user1829860 Apr 17 '13 at 14:36

1 Answers1

0

The solution was very simple: just change the dataType from text to json and everything works fine as otherwise the each loop will process every single character coming in by itself

user1829860
  • 111
  • 1
  • 10