jquery clone with HTML template

Question

I have seen a few tutorials on jQuery templates , which as far as I understand is outdataed , so I am trying to use .Clone I got it to work fine when I am only showing one result, but when I want to show an entire list of results it is not working, I am sure because of my bad jQuery. I want to clone the entire .template class fill it from each member of the response array , then add each newly cloned template to #fillresultsdiv , if anyone can help find what I'm doing wrong

here is jQuery:

                 success: function (msg) {
                    var events = [];
                    var obj = $.parseJSON(msg.d);
                    $(obj.res).each(function () {
                        var newRow = $('.template').clone()
                        newRow.$('.day').text($(this).attr('day')),
                            newRow.$('.dayofweek').text($(this).attr('dayofweek')),
                            newRow.$('.month').text($(this).attr('month')),
                            newRow.$('.title').text($(this).attr('title')),
                            newRow.$('.time').text($(this).attr('time')),
                        newRow.$('.venue').text($(this).attr('venue')),
                        newRow.$('.description').text($(this).attr('description'))
                        $('#fillresultsdiv').append(newRow);

Here is a sample response :

   d: "{"res":[{"day":"26","dayofweek":"Tue","month":"Jun","title":"Glen Hansard","venue":"Vic Theatre","time":"7:00 PM","ticketurl":"http://seatgeek.com/glen-hansard-t

and here is my template HTML:

    <div class="Template">
      <div class="accordian_head1">
        <div class="date_container">
          <a class="day"></a><br/><br/>
          <a class="dayofweek"></a><br/>
          <a class="month"></a>
        </div>
        <div class="title_container">
          <a class="title">Title</a>
          <a class="venue"><br/></a><a class="time"></a>
        </div>
        <div class="links">
          <a href=" + dr(36).ToString() + ?aid=854">Buy Tickets</a><br/>
          <a href="javascript:void(0)" onclick="fnAddToCalendar({ 'eventID' : '  dr(0).ToString() + '});">Watch</a><br/>
        <a href="#">Email</a><br/>
        <a href=""Calendar.aspx"">Calendar</a><br/>
    </div>
  </div>
  <div class="accordian_body1new"><a class="description"></a>
  </div>

This is all #fillresultsdiv is

     <div id="fillresultsdiv"></div>

Where is your #fillresultsdiv in the html?

ewein
– ewein

2012-06-26 16:55:59 +00:00
Commented Jun 26, 2012 at 16:55 — ewein
– ewein, Commented Jun 26, 2012 at 16:55

Florian Margaine · Accepted Answer · 2012-06-26 17:51:40Z

1

// Parse the entire string, because `msg` is not an object,
// so you can't use `msg.d`
var obj = $.parseJSON( msg );

$( obj.d.res ).each( function() {
    var newRow = $( '.template' ).clone();

    // Now loop through the object
    for ( var prop in this ) {
        if ( this.hasOwnProperty( prop ) ) {

            // Lucky for you, the keys match the classes :)
            $( '.' + prop, newRow ).text( this[ prop ] );
        }
    }
    $( '#fillresultsdiv' ).append( newRow );
} );

But you should definitely use a DocumentFragment to speed up the DOM manipulation and append everything at once. Because remember: the DOM is effin slow.

var obj = $.parseJSON( msg );

// Create a DocumentFragment
var el = document.createDocumentFragment();
$( obj.d.res ).each( function() {
    var newRow = $( '.template' ).clone();
    for ( var prop in this ) {
        if ( this.hasOwnProperty( prop ) ) {
            $( '.' + prop, newRow ).text( this[ prop ] );
        }
    }

    // Append to the DocumentFragment
    $( el ).append( newRow );
} );

// And append the DocumentFragment to the DIV
$( '#fillresultsdiv' ).append( el );

edited Jun 26, 2012 at 17:51

answered Jun 26, 2012 at 17:01

Florian Margaine

61.2k15 gold badges94 silver badges120 bronze badges

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

7 Comments

Scott Selby Over a year ago

this looks like a way nicer way to do this , I can not get it to work though , it is going through if ( this.hasOwnProperty( prop ) ) { and prop is set to the correct property , but after that nothing is getting added to '#fillresultsdiv' - even if $( '.' + this, newRow ).text( this[ prop ] ); was doing nothing , I should be getting black templates added , here nothing is being added

Florian Margaine Over a year ago

@ScottSelby yep, I corrected to use $( '.' + prop ) instead of $( '.' + this ), my bad. this is not a string, but an object, which is why it failed.

Scott Selby Over a year ago

ok, I kind of got it working , for some reason though it is showing the same results over and over again , I double check JSON and each event is only recieved once , but in this loop - i displays the first result once , the second twice, the third 4 times, the forth 8 times, the fifth 16 times, and it turns into a weird binary math problem

Florian Margaine Over a year ago

Uh? Did you copy this code? Is there anything you changed? Sounds like a weird problem.

Scott Selby Over a year ago

yes I copied and pasted it , this is also happening with the answer above where there is no loop , so I'm thinking it is a problem with $( obj.res ).each( function() {

|

ewein · Accepted Answer · 2012-06-26 17:41:06Z

1

Try this:

          success: function (msg) {
                var events = [];
                var obj = $.parseJSON(msg.d);
                $(obj.res).each(function () {
                    var newRow = $('.template').clone();
                    newRow.find('.day').text($(this).attr('day'));
                    newRow.find('.dayofweek').text($(this).attr('dayofweek'));
                    newRow.find('.month').text($(this).attr('month'));
                    newRow.find('.title').text($(this).attr('title'));
                    newRow.find('.time').text($(this).attr('time'));
                    newRow.find('.venue').text($(this).attr('venue'));
                    newRow.find('.description').text($(this).attr('description'));
                    newRow.appendTo('#fillresultsdiv');
                  }

edited Jun 26, 2012 at 17:41

answered Jun 26, 2012 at 16:50

ewein

2,7456 gold badges40 silver badges57 bronze badges

3 Comments

Scott Selby Over a year ago

didn't work - I'm not too sure that newRow.$('.day').text($(this).attr('day')), is proper jQuery

Florian Margaine Over a year ago

@ewein you're a developer. When you see so much repetition, try to do something about it :) Also, using commas instead of semicolons is not going to help your code.

ewein Over a year ago

I wanted to give an answer similar to his method so he would understand it easier. And yes the commas must go, I didn't notice them till now.

Collectives™ on Stack Overflow

jquery clone with HTML template

2 Answers 2

7 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Related