repeat html element with javascript

Question

i would like to repeat my panel element from bootstrap in my for loop and display my variable mysubject in my panel title.

For example. if my data.tickets.length == 4 i should have 4 panel element and every panel got a different title. Can you help me i don t know how to repeat my panel element. I just manage to set the title so far.

Here is my code :

HTML

<div class="col-xs-3 panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title"></h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

JS

function displaytickets(){
    var y = document.getElementById("mySecond").value;

    $.ajax({
      url: "https://cubber.zendesk.com/api/v2/users/"+y+"/tickets/requested.json",
      type: 'GET',
      dataType: 'json',
      contentType:'application/json',
      secure: true,
      beforeSend: function (xhr) {
          xhr.setRequestHeader("Authorization", "Basic " + btoa("claire.pagniez@cubber.com:"));
      },
      success: function (data) {
          console.log(data.tickets.length);
          for (i = 0; i < data.tickets.length; i++) {
              console.log(data.tickets[i]);

              console.log(data.tickets[i].description);
              console.log(data.tickets[i].status);
              console.log(data.tickets[i].subject);
              var mysubject = data.tickets[i].subject;

              $(".panel-title").append('<h3>'+mysubject+'</h3>');
          }
      },
  });
}

Answer 1

You can use .clone(), and you can create your panel directly from jQuery like this:

var $panel = $('<div/>').addClass('col-xs-3 panel panel-default');
$panel.append($('<div><h3 class="panel-title">Title</h3></div>').addClass('panel-heading'));
$panel.append($('<div>Panel content</div>').addClass('panel-body'));
$('body').append($panel);

or you can clone() and existing element like this:

var $panel = $('#my-panel').clone();

and then clone it again to get each new panel. Inside your .ajax() call:

for (i = 0; i < data.tickets.length; i++) {
    var new_panel = $panel.clone(); // note the use of .clone()
    new_panel.find('.panel-title').text(data.tickets[i].subject);
    new_panel.find('.panel-body').text(data.tickets[i].description);
    $('body').append(new_panel);
}

Fiddle here

Answer 2

Hi to repeat your panel div depending on length of data you can first clone the panel object(div tags + inner text + headers etc) you want and append it to the parent of the first panel . In this way you can save appending the html using strings in jquery.

Or if you want to use data in each panel specific to you can go with string appendign.

success: function(data) {
    var tickets = data.tickets;
    for (var i = 0; i < tickets.length; i++) {
        var panelBody = "";
        panelBody += "<div class=\"col-xs-3 panel panel-default\">";
        panelBody += "  <div class=\"panel-heading\">";
        panelBody += "    <h3 class=\"panel-title\">" + tickets[i].subejct + "<\/h3>";
        panelBody += "  <\/div>";
        panelBody += "  <div class=\"panel-body\">";
        panelBody += "    Panel content";
        panelBody += tickets[i].status;
        panelBody += tickets[i].description;
        panelBody += "  <\/div>";
        panelBody += "<\/div>";
        $('.panel-default').parent().append(panelBody);
    }
}

You can also insert the data which you want to show in the panel.

Answer 3

try

success: function(data) {

    console.log(data.tickets.length);
    for (i = 0; i < data.tickets.length; i++) {

        $(".panel-default").parent().append('<div class="panel-heading"><h3 class="panel-title">' +
            data.tickets[i].subject + '</h3></div><div class="panel-body">' +
            data.tickets[i].description + '</div>');
    }
}

Answer 4

Try:

 success: function (data){
               $.each(data.tickets,function(i,v) {
                 $('body').append('<div class="col-xs-3 panel panel-default"><div class="panel-heading"><h3 class="panel-title">'+v.subject+'</h3></div><div class="panel-body">Panel content</div></div');
                });
    }

note: change body to your parent list of tabs