如何在jquery对话框中显示第二个ajax响应?响应之间的冲突,第一个显示在div工作,第二个只警报

时间:2012-04-20 17:32:40

标签: javascript jquery-ui jquery coldfusion

Firebug和javascript警报显示正确的响应,对话框打开但 jqxhr 未解析。页面上有Jquery,jquery ui,javascript和css脚本,但是我把它们留给了空间。我只是学习这一点,需要语法等方面的帮助。谢谢!

更新了AGAIN以及其他建议。使用ajax完成函数最终获得了第二个ajax响应,以便在jquery对话框中显示。现在只需要帮助将* jqxhr 数据解析为html表单输入。感谢所有有想法的人。 *

 $(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]}}  

3 个答案:

答案 0 :(得分:1)

我看到一个问题就是设置id = \“item \”。 HTML id必须是唯一的。最好设置一个类而不是class =“\ item \”,然后执行:

$(".item").click(function(e) {
    var valueSelected = $(this).html();
    ...rest of your code...
}

另外,作为旁注,通过将字符串片段推送到数组上,然后使用array.join()将它们blit转换为HTML,您将获得更好的性能,将表字符串放在第一个调用中,如下所示:

if(response.ROWCOUNT > 0) {
    var s = [];
    s.push("<table border='1'>");
    for(var i=0; i<response.ROWCOUNT; i++) {
        //push can take multiple comma-separated strings, and it is very fast
        s.push("<tr><td>", response.DATA.ICON[i], "</td></tr>",
               "<tr><td>", response.DATA.LABEL[i], "</td></tr>",
               "<tr><td>", response.DATA.PRICE[i], "</td></tr>",
               "<tr><td id=\"item\">", response.DATA.PROD_SUPER_ID[i], "</td></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(""));

在进行字符串连接时,将字符串推送到数组上然后通过连接将它们转储出来比连接快得多;特别是当你有很多字符串要连接时。

答案 1 :(得分:1)

在对它们进行处理之前,您需要存在设置为“h2”的元素。尝试手动添加它们,或者将ajax调用排队,在它的回调中一个接一个地同步发生。

所以基本上接受你在这里的$ .post调用,并把它放在其他帖子或ajax的回调中,然后在this回调中,保留你所拥有的。

答案 2 :(得分:0)

对话框中未显示响应的原因是选择器$( '#oneitem > h2' )$( '#oneitem > p' )不会生成任何元素,因为标识为oneitem的元素没有子元素。如果您想在对话框中添加h2p元素,则需要更多代码:

$('<h2></h2>').html(response.DATA.FULL_DESCRIPTION[i]).appendTo('#oneitem');
$('<p></p>').html(response.DATA.PROD_SUPER_ID[i]).appendTo('#oneitem');
$('<p></p>').html(response.DATA.PRICE[i]).appendTo('#oneitem');

以下是转义JSON的示例,它在控制台中运行:

{"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 Women\'s 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]}}