Only one div populates using AJAX, jQuery & Circliful jQuery Plugin

Question

I'm using the circliful jQuery plug in and I'm wanting to populate it with JSON data. The first div loads the data whereas the rest don't load anything at all.

I've tried multiple ways but nothing seems to be working for me, they either all filled with 0%, nothing at all or just the first div as mentioned above.

    <div class="grid">
             <!-- ajax content loaded into this div -->
    </div>

                     <!--json file format-->
[
 {
   "id": 1,
   "full_name": "Ignacius Antos",
   "email": "iantos0@jigsy.com",
   "password": "FK4umZJ9eh",
   "profile_picture": "https://i.pravatar.cc/255?img=5",
   "list_of_items_bought": "", 
   "rating": "25",
   "time_spent": "15"
 }, 
 {
   "id": 2,
   "full_name": "Anallise Ousley",
   "email": "aousley1@yellowbook.com",
   "password": "5fLR4WhC",
   "profile_picture": "https://i.pravatar.cc/255?img=56",
   "list_of_items_bought": "",
   "rating": "30",
   "time_spent": "30"
 },

         <!--script that loads data from json file-->

<script>
$(document).ready(function() {
    $.ajax({
        type: "Get",
        dataType: "json",
        url: "users.json",
        success: function(data) {
        var profile_data = '';
            $.each(data, function(key, value){
                profile_data += '<div class="user">';
                profile_data += '<a href="#"><img src='+value.profile_picture+'></img></a>';
                profile_data += '<h3>'+value.full_name+'</h3>';
                profile_data += '</div>';
                profile_data += '<div class="grid-item grid-item--width3 grid-item--height3" id="myStat" data-animation="1" data-animationStep="3" data-percent="' + value.rating + '"></div>'; <!-- this is where the json is called ->>
            });
        $('.grid').append(profile_data);
        }
    });

<< this is the script that loads the jQuery plug in but only shows for one div and not the rest of the others >>

$( document ).ready(function(data) {
        $("#myStat").circliful({
        }); 
    });
});      
</script>

I think the part I'm getting wrong is the #myStat part of the function I'm not sure. Any ideas would be great

A few tips to asking better questions (which means getting better help): When including a plugin, include a link / reference to the plugin so we can find it easily. Also, simplify (see [mcve]). There's plenty of code here that isn't strictly relevant to the question. Lastly, please include a runnable snippet, or jsFiddle, or something. And, minor code point: you've got nested document ready functions. That's not necessary, and just adds code that doesn't do anything. — random_user_name, Jul 26 '19 at 18:46

score 0 · Answer 1 · answered Jul 26 '19 at 18:50

0

I think it's class or id issue

use class="myStat" instead id="myStat" and also replace $('#myStat') to $('.myStat')

answered Jul 26 '19 at 18:50

hak

48
5

random_user_name · Answer 2 · 2019-07-26T19:13:44.863

So, without a runnable snippet, it's hard to prove, but there's a couple things going on here:

You cannot have multiple elements with the same ID. It's bad practice in HTML, and flat doesn't work with javascript that relies on IDs.
As hak's answer points out, using a class instead of ID will solve this issue.
You don't need to wait for "document ready" again to call circliful. I've removed the redundant document ready.

Below is refactored code that should work. NOTE that it is assigning unique ID's to each element, and calling circlify on each loop iteration.

(Also, a runnable snippet for you to view).

// shorthand, no-conflict-mode-safe document ready
jQuery(function($) {
  // AJAX call omitted for brevity....
  $.each(data, function(key, value) {
    var profile_data = '';
    // ... other code here
    // remove the ID (which is duplicated), use a CSS Class myStat
    profile_data += '<div class="grid-item grid-item--width3 grid-item--height3 myStat" data-animation="1" data-animationStep="3" data-percent="' + value.rating + '"></div>';;
    // append each one within the each loop    
    $('.grid').append(profile_data);
  });
  // using a class
  $(".myStat").circliful({});
});

Hi, thank you so much for your response. The only problem is that even after the editing, it only displays the final object from the json file? Not each individually — Patrick Sqaure, Jul 27 '19 at 11:34
I'd have to see your code. The runnable snippet I posted clearly displays all items, so something else must be at play in your code. — random_user_name, Jul 27 '19 at 15:56

Only one div populates using AJAX, jQuery & Circliful jQuery Plugin

2 Answers2