jquery html() not setting div contents

Question

I am making my first app using Parse.com for database storage, and I am using the Parse JavaScript SDK to make use of this database.

I am trying to populate a list of items from one of my database tables, and this table contains a field which is a pointer to an object of another class/table. I need to retrieve a field from this object in order to display the information properly.

However, Parse seems to require me to request each of these objects separately from my main query on the table. Anyway, so I make the request and have a success callback which uses jquery's .html() to set the contents of a div which is id'd by the id of the retreived object.

The problem is, after the work is done, the div is rendered empty. Although, oddly, I tried using calls to alert to get the contents of each div within the success callback, and the contents was not only correct after I had called .html() but also before I called it. Though, that's probably down to JavaScripts asynchronous function calls.

Here is the function in question:

function updateBudgets() {
  var Budget = Parse.Object.extend("Budget");
  var query = new Parse.Query(Budget);
  query.equalTo("User", Parse.User.current());
  //query.include(["Budget.Category"]); //I tried this to include the category object with the query response, but it didn't seem to work

  query.find({
    success: function(result) {
      var opt = "<h2>Budgets</h2>";
      var category, id;
      for(var i = 0; i < result.length; i++) {
        category = result[i].get("Category");
        category.fetch({
          success: function(cat) {
            alert($('#' + cat.id).html());
            $('#' + cat.id).text(cat.get("Name"));
            alert($('#' + cat.id).html());
          }
        });
        opt += makeBudget(category.id, parseFloat(result[i].get("Amount")/100), result[i].get("Balance"), result[i].id);
      }
      $('#budgets').html(opt);
    }
  });
}

I tried what the documentation seemed to suggest was the equivalent of an SQL JOIN operation using the .include() function on my query, but it didn't seem to work at all.

So, what I would like to know is either how I can debug my JavaScript such that I can get around this strange behaviour with .html() or how I can properly do this JOIN style operation with Parse. What Documentation I have found doesn't really go into a whole lot of detail.

I would be very grateful for any help.

Answer 1

Please consider the following "test guide" more as comment than an answer, because it just contains some console.log statements instead of an actual answer for your problem.

Anyway below are some issues I'd try to checkout:

1. do you receive an answer from the server following query.find
2. check is data fetched (inner query) from the server
3. check if category data is received successfully following fetch query
4. check if element with category id is found
5. error handling added for fetch and query

Also I noticed that you are using .text() method for setting the value. I think it'll work fine as long as the element in question is not a form input element. If that's the case, you probably have to you use .val() method.

The console.log test print outs that I added can be found at this Fiddle for updateBudgets() function. (Fiddle updated) I hope this helps :-)