打開時無法通過AJAX在jQuery UI對話框中顯示數據

Question

我只想在加載時從Jquery UI對話框中顯示從數據庫中獲得的以下評論，但不顯示任何內容：

{"results":[{"review_text":"good"},{"review_text":"not bad"},{"review_text":"great"}]}

您能否檢查下面的代碼並幫助我找到錯誤。

這是我的看法：

<?php
        $data = array(
            'name' => $item_id,
            'class' => 'all_reviews',    
            'content' => 'Reviews'    
            );
           echo form_button($data);

           ?>

         <div id="see_all_reviews">
    <div id="load_reviews"></div>
    </div>

Here is my JS file:



 $(".all_reviews").click(function() { 
            var self = this;
            var id = $(self).attr("name");          


            $.post('filter/get_reviews', { id: id }, function (data) {

                var my_obj_review = data;        
                $.each(my_obj_review, function (i) {

                   var reviews_text = my_obj_review[i].review_text;                                
                   $("#load_reviews").text(reviews_text); 



                 });        

    }, "json").error(function() { $( "#load_reviews" ).text(data.message);



}); 


            $( "#see_all_reviews" ).dialog({
                                          autoOpen: false,
                                          title: "Reviews",
                                          modal:true,
                                          draggable:false,
                                          width: 600,
                                          height: 600,
                                          close:function(){ $(this).dialog('destroy'); }

                                          });
                        });

Answer 1

您的主要問題是您的AJAX調用返回的是數據對象而不是數據列表。 更換：

var my_obj_review = data; 

有：

var my_obj_review = data.results; 

此外，這：

$(self).parent().find("#see_all_reviews").text(review_text);

可以替換為：

$("#see_all_reviews").text(review_text);

無論哪種情況，您的each循環都將用列表中的最后一項替換該元素。 您是否要在該div上添加評論？

最后，您可能需要初始化您的對話：

$("#see_all_reviews").dialog({
  autoOpen: false, 
  show: "blind", 
  hide: "blind"
});

這是您的代碼經過稍微重構的代碼：

$(document).ready(function() {
  $(".all_reviews").click(function() { 
    var item_id = $(this).attr("name");

    $.post('contr/get_reviews', { item_id: item_id }, function (data) {

      $.each(data.results, function (n, result) {
        $("#see_all_reviews").text(result.review_text);
      });

      // Above loop equivalent to:
      $("#see_all_reviews").text(data.results[data.length-1].review_text);

    }, "json")
      .error(function(data) {
        $("#see_all_reviews").text(data.message);
      }); 

    $("#see_all_reviews").dialog(); 
  });
}); 

這是一個功能齊全的小提琴： http : //jsfiddle.net/klenwell/d7r7s/