在打开时无法通过AJAX在jQuery UI对话框中显示数据

时间:2014-07-22 17:50:52

标签: javascript jquery ajax json jquery-ui

我只是想在加载时显示我在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'); }

                                          });
                        });

1 个答案:

答案 0 :(得分: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/