Jquery .append syntax

Question

I have a coldfusion website which will have over 10000 products. If I use a normal cfquery to load products with a specific sub_cat_id with over 1000 records, the page takes forever to load and slows things down, so I am using JSON format to return the results. The problem I have is appending the returned results to the specific div on the page. I know there is a syntax error somewhere but I would like to know how and when to use the '' or + when using append function. This is my code below for the append function:

// Read the products
$.ajax({
url: "js/gtprod.cfm?filter=brand&brand_id=115",
dataType: "json",
success: function(data) {
  var row, sData, _len, _i;
  // Run the data thru queryToObject
  data = queryToObject(data);
  // Convert the object to a string to display it
  sData = JSON.stringify(data);

  // Print all products
  $('#product').append('<h3>PRODUCTS:</h3>');
  // Loop over the query
  for (_i = 0, _len = data.length; _i < _len; _i++) {
    row = data[_i];
    $('#main').append('<div id="product" class="mix' + row.make_title + row.model_title +'" data-name="'+ row.product_title +'"><div id="productleft"></div><div id="productright"> '<h3 align="left">' + '<a href="products-detail.cfm?product_id=' + row.product_id + '">' + row.product_title + '</a>' + '</h3>'<div align="left" id="productrightmidsection" >VEHICLE: + '<span>' + row.make_title + '-' + row.model_title + '</span>' + '|' + 'Manufacturer:' + '<span>' + row.brand_name + '</span>' <div id="productview">'<a href="products-detail.cfm?product_id=' + row.product_id + '" class="productview">' + View &raquo; + '</a>'</div></div></div></div>' );
  }
}
});

Answer 1

Use this, You have concatenation issues

    $('#main').append('<div id="product" class="mix' + row.make_title + row.model_title +'" data-name="'+ row.product_title +'"><div id="productleft"></div><div id="productright"> <h3 align="left"><a href="products-detail.cfm?product_id=' + row.product_id + '">' + row.product_title + '</a></h3><div align="left" id="productrightmidsection" >VEHICLE: <span>' + row.make_title + '-' + row.model_title + '</span> | Manufacturer: <span>' + row.brand_name + '</span> <div id="productview"><a href="products-detail.cfm?product_id=' + row.product_id + '" class="productview"> View &raquo; </a></div></div></div></div>' );