views:

96

answers:

1

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?

+1  A: 

I think I once had a similar question. Maybe this helps you:

http://stackoverflow.com/questions/1878118/manipulating-the-data-from-ajax-success-functiondata

Marcel
thank you SSSOOOO much. load time went from 2+ seconds to what looks like less than 1 (console.time isn't working for me now for some reason).
pedalpete
correction, from 3.8 seconds to 588 ms!
pedalpete