Databases
StackOverflow2013
Postsdbo
POJavaScript Seems to Stop After AJAX Call
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavaScript Seems to Stop After AJAX Call
    text
    copied!<p>The question title is rather vague, but here's my situation. I have roughly 700+ lines of jQuery for a web application, each function and "major point of interest" in the code noted by a log to the console when it fires. For example, I have a few functions that use an AJAX call to a servlet to retrieve some information. I log when the AJAX request begins, if it's succeeded (then print what data it gathered), etc. So, by the look of what my console has logged when I open the page, it seems to stop after the first AJAX call. Granted, the call seemed to work just fine, and the data it returned was perfect. As you'll see, it even populated the select box as intended. However, the console logs stop shortly after, making me believe that for some reason, the other functions are not being called...</p> <h2>jQuery</h2> <pre><code>$(document).ready(function() { Initialize(); }); function Initialize() { console.log("Initializing..."); User(); Widgets(); if($.cookie("fogbugzId") != null) { console.log("Stored ID: " + $.cookie("fogbugzId")); $("#userSelect").val($.cookie("fogbugzId")).trigger("change"); $("#userSelect").hide(); } else console.log("No ID Stored!"); } function User() { console.log("Initializing User..."); $.each(FetchUsers(), function(index, user) { $("#userSelect").append($("&lt;option&gt;").val(user.id).text(user.name)); }); $("#userSelect").change(function() { if($("#userSelect").val() != "") { console.log("User Changed to " + $("#userSelect").val() + ": " + $("#userSelect").text()); $.cookie("fogbugzId", $("#userSelect").val(), { expires: 365 }); } Update(); }); console.log("User Initialized!"); } function FetchUsers() { console.log("Loading Users..."); $("#loading").show(); $.get(servlet, { command: "getUsers" }, function(data) { var users = new Array(); $(data).find("user").each(function() { users.push({ id: $(this).find("id").text(), name: $(this).find("name").text() }); }); $.each(users, function(index, user) { console.log("&gt;&gt; " + user.id + ": " + user.name); }); console.log("Users Loaded!"); return(users); }, "xml").complete(function() { $("#loading").hide(); }).error(function() { console.log("Loading Users Failed!"); }); } function Widgets() { console.log("Initializing Widgets..."); // More Code console.log("Widgets Initialized!"); } </code></pre> <h2>Console</h2> <pre><code>Initializing... Initializing User... Loading Users... &gt;&gt; 267: Alex Molthan &gt;&gt; 35: Bill Brinkoetter &gt;&gt; 100: Bob Yoder &gt;&gt; 189: Brian Cutler &gt;&gt; 559: Brian Ormond &gt;&gt; 400: Corey Nakamura Users Loaded! </code></pre> <p>But the logging stops right there. So the AJAX call to fetch the users from the database works fine, but apparently the <code>User()</code> function doesn't manage to finish properly. The only error that the JavaScript console gives me is one within my <code>jquery.min.js</code> file:</p> <pre><code>Uncaught TypeError: Cannot read property 'length' of undefined jquery.min.js:16 f.e.extend.each jquery.min.js:16 User modifytime.js:14 Initialize modifytime.js:3 (anonymous function) modifyTime.jsp:21 f.extend._Deferred.e.resolveWith jquery.min.js:16 f.e.extend.ready jquery.min.js:16 f.c.addEventListener.B jquery.min.js:16 </code></pre> <p>It looks as though it is breaking on the <code>$.each()</code> that iterates through the array of users returned by the <code>FetchUsers()</code> function. I know the function returns usable array, so I'm not sure what it's getting stuck on. Can anyone see something I'm missing right off the bat? I tried assigning the <code>users[]</code> returned by the <code>FetchUsers()</code> function into a variable first, then passing that into the <code>$.each()</code>, but it still didn't work. Any suggestions?</p> <p><strong>Edit</strong>: After replacing the minified version of jQuery with the uncompressed version, it seems as though the array of users that I pass into the <code>$.each()</code> function has now <code>.length</code> property, which is why it's breaking. Just to check, before I call that particular <code>$.each()</code> function, I placed a log of the <code>users[].length</code> returned from the <code>FetchUsers()</code> function to see that it still had no <code>.length</code> property. I then went to the <code>FetchUsers()</code> function itself and placed a log of the <code>users[].length</code> just before I return it. This log, however, works perfectly fine (though my example doesn't show it, it returns 40 users). So is my <code>users[]</code> not being returned as an array or something?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload