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("[email protected]:"));
      },
      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>');
          }
      },
  });
}

.panel-title is already an h3 tag why are you appending h3 tag inside it? — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Mar 24, 2016 at 10:51

Magicprog.fr · Accepted Answer · 2016-03-24 11:15:53Z

2

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

edited Mar 24, 2016 at 11:15

Magicprog.fr

4,1204 gold badges29 silver badges35 bronze badges

answered Mar 24, 2016 at 11:13

Yuri

3,3043 gold badges30 silver badges48 bronze badges

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

Comments

Magicprog.fr · Accepted Answer · 2016-03-24 11:15:32Z

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.

Jatin Bhole · Accepted Answer · 2016-03-24 11:17:40Z

0

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

edited Mar 24, 2016 at 11:17

answered Mar 24, 2016 at 11:14

Jatin Bhole

1867 bronze badges

Comments

madalinivascu · Accepted Answer · 2016-03-24 11:48:28Z

0

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

edited Mar 24, 2016 at 11:48

answered Mar 24, 2016 at 11:42

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Collectives™ on Stack Overflow

repeat html element with javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related