1

Firebugとjavascriptのアラートは正しい応答を示し、ダイアログは開きますが、jqxhrは解析していません。jquery、jquery ui、javascript、およびcssスクリプトがページにありますが、スペースのためにそれらを省略しました。私はこれを学んでいるだけで、構文などのヘルプが必要です。ありがとう！

追加の提案でAGAINを更新しました。ajax complete関数を使用すると、最終的に2番目の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]}}
4

3 に答える 3

1

1つの問題があり、それはid = \"item\"の設定です。HTMLIDは一意である必要があります。class = "\ item \"の代わりにクラスを設定してから、次の手順を実行することをお勧めします。

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

また、補足として、文字列フラグメントを配列にプッシュし、array.join（）を使用してそれらを次のように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(""));

文字列の連結を行う場合、文字列を配列にプッシュしてから、それらを結合してダンプする方が、連結よりもはるかに高速です。特に、連結する文字列がたくさんある場合。

于 2012-04-20T19:47:05.867 に答える
1

作業を行う前に、「h2」を設定している要素が存在している必要があります。それらを手動で追加するか、ajax呼び出しをキューに入れて、コールバックで次々に同期的に発生するようにしてください。

したがって、基本的に、ここで使用している$ .post呼び出しを取得し、それを他の投稿またはajaxのコールバック内に配置してから、thisコールバックで使用しているものを保持します。

于 2012-04-23T22:19:38.933 に答える
0

応答がダイアログに表示されない理由は、idを持つ要素には子がないため、セレクター$( '#oneitem > h2' )と結果に要素がないためです。ダイアログに要素を追加する場合は、次のようなコードが必要になります。$( '#oneitem > p' )oneitemh2p

$('<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]}}
于 2012-04-20T22:37:42.157 に答える