Question posted in
You can find the official documentation here.

How do I repeat x amount of rows with 3 columns in each row using jquery? – Jquery ajax

I want to create a boostrap ‘card’ of 3 identical cards per row and of course x amount of rows. I tried with the following and spent 3 hours and failed.

$.getJSON("./listings.php", function(e) { 
    $.each(e, function(i, e){
        if (e.id != "") {
            //create table here

            var html = '<div class="card-deck mb-3 text-center">'; // this opens the row

            //here are the three columns
            html += '<div class="card mb-4 box-shadow" style="background-image:url(./'+e.img+');background-size:330px; auto;background-repeat:no-repeat; background-position:center;">';
            html += '<div class="card-header" style="background-color: #5bc0de;">';
            html += '<h4 class="my-0 font-weight-normal">'+e.status+'</h4>';
            html += '</div>';
            html += '<div class="card-body">';
            html += '<h1 class="card-title pricing-card-title">&nbsp; </h1>';
            html += '<ul class="list-unstyled mt-3 mb-4">';
            html += '<li>&nbsp; </li>';
            html += '<li>&nbsp; </li>';
            html += '<li>&nbsp; </li>';
            html += '<li>&nbsp; </li>';
            html += '<li>&nbsp; </li>';
            html += '<li>&nbsp; </li>';
            html += '<li>&nbsp; </li>';
            html += '</ul>';
            html += '<button type="button" id="'+e.id+'" class="community btn btn-block btn-outline-primary">Visit Platform</button>';
            html += '</div>';
            html += '</div>';
            //end of 3rd column

            html += '</div>'; //this closes the row
            $('.community_listing').append(html); //this is just an empty div to host the rows
        }
    })
});

🙁

Tags:

2

Answers


  1. 0

    The best option is that you can set the wrapper as flex. So it will display your cards with device width. and will be auto responsive.

    Let me know if you want to strictly show 3 cards per row. I will edit my answer according to it.

    //$.getJSON("./listings.php", function(e) { 
var data = [{id:1, img:"", status:1}, {id:2, img:"", status:2}, {id:3, img:"", status:1}, {id:4, img:"", status:3}, {id:5, img:"", status:1}];
    $.each(data, function(i, e){
        if (e.id != "") {
            //create table here

            var html = '<div class="card-deck mb-3 text-center">'; // this opens the row

            //here are the three columns
            html += '<div class="card mb-4 box-shadow" style="background-image:url(./'+e.img+');background-size:330px; auto;background-repeat:no-repeat; background-position:center;">';
            html += '<div class="card-header" style="background-color: #5bc0de;">';
            html += '<h4 class="my-0 font-weight-normal">'+e.status+'</h4>';
            html += '</div>';
            html += '<div class="card-body">';
            html += '<h1 class="card-title pricing-card-title">&nbsp; </h1>';
            html += '<ul class="list-unstyled mt-3 mb-4">';
            html += '<li>&nbsp; </li>';
            html += '<li>&nbsp; </li>';
            html += '<li>&nbsp; </li>';
            html += '<li>&nbsp; </li>';
            html += '<li>&nbsp; </li>';
            html += '<li>&nbsp; </li>';
            html += '<li>&nbsp; </li>';
            html += '</ul>';
            html += '<button type="button" id="'+e.id+'" class="community btn btn-block btn-outline-primary">Visit Platform</button>';
            html += '</div>';
            html += '</div>';
            //end of 3rd column

            html += '</div>'; //this closes the row
            $('.community_listing').append(html); //this is just an empty div to host the rows
        }
    })
//});
    .community_listing {
    display: flex;
    flex-wrap: wrap;
  }
  
  .card-deck{
     width: 300px;
  }
  
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="community_listing"></div>

    You can also check the working fiddle here.

    Login or Signup to reply.
  2. 0

    I think I understand your question now. You want the cards to have the same height, which is why you use card-decks.

    For the example, I have overwritten the variable "data" for testing and commented out the JSON query. I hope this can help you.

    var targetContainer = $('.community_listing');

//$.getJSON("./listings.php", function(data) {
  var data = [{id:1, img:"", status:1}, {id:2, img:"", status:2}, {id:3, img:"", status:1}, {id:4, img:"", status:3}, {id:5, img:"", status:1}];
  var html = '',
    dataLength = data.length,
    rowClosed = false;

  // do you really have elements with an empty id?
  data = data.filter(function(i, e) {
    return e.id != "";
  });

  $.each(data, function(i, e) {
    rowClosed = false;

    // check with modulo each third element and start a new row
    if (i % 3 == 0) {
      html += '<div class="card-deck text-center">'; //this opens the row
    }

    // here are the three columns
    html += '<div class="card mb-4 box-shadow" style="background-image:url(./' + e.img + '); background-size: 330px auto; background-repeat: no-repeat; background-position: center;">';
    html += '<div class="card-header" style="background-color: #5bc0de;">';
    html += '<h4 class="my-0 font-weight-normal">' + e.status + '</h4>';
    html += '</div>';
    html += '<div class="card-body">';
    html += '<h1 class="card-title pricing-card-title">&nbsp; </h1>';
    html += '<ul class="list-unstyled mt-3 mb-4">';
    html += '<li>&nbsp; </li>';
    html += '<li>&nbsp; </li>';
    html += '<li>&nbsp; </li>';
    html += '<li>&nbsp; </li>';
    html += '<li>&nbsp; </li>';
    html += '<li>&nbsp; </li>';
    html += '<li>&nbsp; </li>';
    html += '</ul>';
    html += '<button type="button" id="' + e.id + '" class="community btn btn-block btn-outline-primary">Visit Platform</button>';
    html += '</div>';
    html += '</div>';

    // check with modulo each third element and close the current row
    if (i != 0 && i % 3 == 2) {
      html += '</div>'; //this closes the row
      rowClosed = true;
    }
  });

  // if the last row has just two element, close the the row here
  if (!rowClosed) {
    html += '</div>'; // this closes the row
  }

  targetContainer.append(html); //this is just an empty div to host the rows
//});
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="community_listing"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search