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
jQuery
|dom-manipulation
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