Cannot display data in a jQuery UI dialog via AJAX on opening

Question

I just want to display following reviews which I got from my database on the Jquery UI dialog box on loading but it displays nothing:

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

Could you please check my code below and help me to find my mistake.

Here is my view:

<?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'); }

                                          });
                        });

klenwell · Accepted Answer · 2014-07-23 14:45:25Z

1

You primary issue is that your AJAX call is returning a data object not a data list. Replace:

var my_obj_review = data;

with:

var my_obj_review = data.results;

Additionally, this:

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

can be replaced with this:

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

In either case, your each loop is going to replace that element with the last item in the list. Are you trying to append reviews to that div?

Finally, you may need to initialize your dialogue:

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

Here's your code refactored slightly:

$(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(); 
  });
});

And here's a fully functioning fiddle: http://jsfiddle.net/klenwell/d7r7s/

edited Jul 23, 2014 at 14:45

answered Jul 23, 2014 at 4:50

klenwell

7,1485 gold badges52 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

EducateYourself Over a year ago

thank you for the answer. I am trying to append reviews in that div. I have just replaced following lines:

var my_obj_review = data;                         $.each(my_obj_review, function (i) {                    var review_text = my_obj_review[i].review_text;$(self).parent().find("#see_all_reviews").text(review_text);

with these lines: $.each(data.results, function (n, result) { $("#see_all_reviews").text(result.review_text); but the dialog window still displays nothing.

klenwell Over a year ago

Are you initializing the dialog? Here's a functioning fiddle (tested in Chrome): jsfiddle.net/klenwell/d7r7s.

EducateYourself Over a year ago

I don't want to append the same reviews. I just want to show the first five revies and then load more when clicking on 'show more' button. Is the <ul<li> the only way to display my reviews? Your js fiddle code differs from my code. Can you show me what is my mistake in the edited question please?

klenwell Over a year ago

@EducateYourself How you filter your data is beyond the scope of this question. You may want to explore pagination. It's much the same principle. A code review would be more appropriate for codereview.stackexchange.com.

Collectives™ on Stack Overflow

Cannot display data in a jQuery UI dialog via AJAX on opening

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related