无法在打开时通过 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/