manipulate variable made up of html before adding it to the dom (new in jQuery 1.4???)

Posted by pedalpete on Stack Overflow See other posts from Stack Overflow or by pedalpete
Published on 2010-04-28T23:10:34Z Indexed on 2010/04/28 23:17 UTC
Read the original article Hit count: 233

Filed under:
|

I thought I had seen this in the first announcement of jQuery 1.4, but can't seem to find anything now.

I have a calendar table which is built dynamically from a json ajax response.

The table is built in a variable called putHtml.

Currently, once the table is added to the DOM, I run a showEvents function which takes each event and adds it to the appropriate cell in the table. Unfortunately, when I have 100 events, that means I am updating the DOM 100 seperate times. Which is getting rather slow.

I use the showEvents function to add events dynamically, so it would be really nice if I could just use the same function, and specify to look in the DOM for the cell to add the event to, or look in the variable (assuming I've got it right, and you can actually do this with jQuery).

The code I use currenlty is this

jQuery('div#calendars').append('putHtml.join(''));
     for(var e in thisCal.events){
         showEvent(thisCal.events[e]);
    }

What I had attempted to do instead was

     for(var e in thisCal.events){
         showEvent(thisCal.events[e],putHtml);
    }
jQuery('div#calendars').append('putHtml.join(''));

the showEvents function looks like this

function showEvents(event){
     var eventDate=event.date;
     var eventTime=event.time;
     var eventGroup=event.group;
     var eventName=event.name;
     var eventType=event.type;
     var whereEvent=jQuery('div.a'+eventDate, 'table.'+eventGroup);
     var putEvent='<div class="event" id="a+'eventDate+'_'+eventTime+'">'+eventName+'</div>'
    jQuery(whereEvent, 'div#calendar').append(putEvent);
    if(eventType>2){
     jQuery(whereEvent, 'div#listings').append(putEvent);
    }
}

when attempting to manipulate the variable putHtml before adding to the dom, I was passing putHtml into the showEvent function, so instead of '(whereEvent, 'div#calendar'), I had (whereEvent, putHtml), but that didn't work.

of course, the other method to accomplish this would be that when I make each cell, I iterate over the events json, and apply the appropriate html to the cell at the time, but that means repetitively running over the entire json in order to get the event to put in the cell.

Is there another/better way to do something like this?

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about dom-manipulation