Question

Firebug and javascript alerts show the correct response and the dialog opens but jqxhr is not parsing. Jquery, jquery ui, javascript and css scripts are on the page but I left them out for space. I’m just learning this and need help with syntax and more. Thanks!

Updated AGAIN with additional suggestions. Using a ajax complete function finally got the 2nd ajax response to display in jquery dialog. Now only need help in parsing *jqxhr data into html form inputs. Thank you to all people who have contibuted ideas.*

 $(document).ready(function() {

 $("#StoreForm").dialog({autoOpen:false, width:500, height:500, modal:true});
 $('#content').css('min-height', '610px');
 $('#sidebar').css('min-height', '600px');

 $('a.storeCategories').unbind('click');
 $('a.storeCategories').click(function(e){
  e.preventDefault();
  var stuff = ($(this).attr('href'));
  $.when($.post(stuff, function(response, status, xhr) {
  if(response.ROWCOUNT > 0) {  
  var s = [];  
  s.push("<table border='0'>");  
  for(var i=0; i<response.ROWCOUNT; i++) {  
//push can take multiple comma-separated strings, and it is very fast  
s.push("<tr><td><p>", response.DATA.ICON[i], "</p></td></tr>",  
       "<tr><td>", response.DATA.LABEL[i], "</td></tr>",  
       "<tr><td class=\"sel\">", response.DATA.PRICE[i], "</td>",
 "<td class=\"item\" display:  hidden>", response.DATA.PROD_SUPER_ID[i], "</td></tr>",  
       "<tr></tr>");  

}  
s.push("</table>");      
}      
else {  
s.push("Sorry, nothing matched your selection.");  
}  
//Now assemble the HTML by joining all the array elements together.  

$("#content").html(s.join(""));      

        //alert(s);


    $(".sel").unbind('click');
    $(".sel, #StoreForm").click(function(e){
    e.preventDefault();
    $("#StoreForm").dialog('open');

    var valueSelected = $(this).closest('tr').children('td.item').text();

    //alert(valueSelected);//this alerts correctly

       var jqxhr = $.post('query/categories.cfc?method=getProductInfo&returnformat=json&
queryFormat=column',
    {productID: valueSelected},

    function(data, textStatus, jqXhr) { 




//$("#StoreForm").html("<b>Ray</b>")

//alert works below
jqxhr.always(function() { 

$('#StoreForm').html(data);

 });               
            })

        });    
    },"json"));



});

})    
DATA below: 
   {"ROWCOUNT":1,
"COLUMNS":[
"IMAGE_TYPE_REF_ID",
"ICON",
"PROD_SUPER_ID",
"COLOR_ATTRIB","SIZE_ATTRIB",
"SUPER_DESC","FULL_DESCRIPTION","PRICE","TAXABLE"],
"DATA {"IMAGE_TYPE_REF_ID": "large"],
"ICON"["http:/Apps/Product_Mgmt/large/necklace150.jpg"],
"PROD_SUPER_ID         
":["C-JAY00001"],"COLOR_ATTRIB":[true],"SIZE_ATTRIB":[true],"SUPER_DESC":["3 Stone
 Womens Quartz 23- inch Necklace"],"FULL_DESCRIPTION":
["This dainty three-drop quartz pendant
hangs  on a silver 23 inch chain. Presented in a small black satchel."],
"PRICE": [10.0000],"TAXABLE":  [true]}}  

Answer 1

You need the elements that you’re setting “h2” to exist before you do work on them. Try hand adding them, or queuing the ajax calls to happen synchronously one after the other is done in it’s callback.

So basically take the $.post call you have here, and put it inside the callback of the other post or ajax, and then in this callback, keep what you have.