Search jQuery

jQuery Forum

Is there a performance difference between inline html and dynamically-built html using getJSON()?

in Using jQuery UI • 9 years ago

I am dynamically changing the contents of divs based on user selections. To start with, though, I have default content for each of my three tabs. When the user makes a new selection, I build the HTML content dynamically, calling $.getJSON(), loading the appropriate json file. As of right now, I have (very large) chunks of html right in my page at design-time for the default views:

<div id="BooksContent"> <section> . . . there are hundreds of sections inside here . . . </section> </div>
<div id="MoviesContent"> <section> . . . there are hundreds of sections inside here . . . </section> </div>
<div id="MusicContent"> <section> . . . there are hundreds of sections inside here . . . </section> </div>

Then, when the user selects a different-than-the-default set of stuff to view, code like one of these takes place:

$.getJSON(getBooks(<whatever they selected>) . . .
$.getJSON(getMovies(<whatever they selected>) . . .
$.getJSON(getMusic(<whatever they selected>) . . .

Would it be better, from a performance point of view, to just make those getJSON() calls in the "ready" function (rather than have those elephantine blocks of html hard-coded)? IOW, should I do this:

$(function() {
   $.getJSON(getBooks('pulitzers') . . .
   $.getJSON(getMovies('oscars') . . .
   $.getJSON(getMusic('grammies') . . .
   . . .

I'm thinking the latter may indeed be better because the movies and music html would be getting generated asynchronously while the user is viewing the initial page (books). By the time they click on one of the other tabs, those other tabs should have been populated "behind the scenes." Am I right?

Replies(12)

jakecigar

Re: Is there a performance difference between inline html and dynamically-built html using getJSON()?

9 years ago

It would be best to do 1 getJSON passing all the topics. I would avoid making the before-needed requesst, as a user often never read every "page".

JΛ̊KE

bclayshan..

Re: Is there a performance difference between inline html and dynamically-built html using getJSON()?

9 years ago

Yes, I know what you mean, but I need the tabs to be populated when the user navigates to them and, AFAIK, there is no "tab clicked" event. If there was, I would get the initial/default HTML for each tab page at that time.

As of now, I'm responding to the user selecting an item from a drop-down within each tab, which works fine, but *before* they make a selection, I've got to show them something. And so it seems I have to populate each tab with some default data.

Unless, as I said, there really *is* an event I can hook up or bind to that fires when a user clicks a tab. That would be perfect.

What I have is three tabs: Books, Movies, Music. Each tab has a selection drop-down with four selections (e.g., for books, it's Pulitzers, National Book Critics Circle, National Book Awards, and NOBA). When a selection is made, I wipe out the previous contents and load the new (I just learned about replaceWith() and may switch to using that).

mike_laird

Re: Is there a performance difference between inline html and dynamically-built html using getJSON()?

9 years ago

In the documentation for Tabs events, check out

beforeActivate( event, ui )

It seems to load upon click, but before the tab opens.

jakecigar

Re: Re: Is there a performance difference between inline html and dynamically-built html using getJSON()?

9 years ago

Exactly!!

JΛ̊KE

bclayshan..

Re: Re: Is there a performance difference between inline html and dynamically-built html using getJSON()?

9 years ago

That sounds like just what the non-doctor ordered. I'll czech it out...

bclayshan..

Re: Is there a performance difference between inline html and dynamically-built html using getJSON()?

9 years ago

Based on http://api.jqueryui.com/tabs/#event-beforeActivate, it looks like I'll want to look for newTab

But is this:

$( ".selector" ).tabs({
beforeActivate: function( event, ui ) {}
});

Bind an event listener to the tabsbeforeactivate event:

$( ".selector" ).on( "tabsbeforeactivate", function( event, ui ) {} );

...an "either/or" thing, or a "both" thing?

jakecigar

Re: Is there a performance difference between inline html and dynamically-built html using getJSON()?

9 years ago

Either/Or! I usually use the first. That way all your tab options are in the same place.

JΛ̊KE

bclayshan..

Re: Is there a performance difference between inline html and dynamically-built html using getJSON()?

9 years ago

All this:

$('#tabs').tabs({
beforeActivate: function (event, ui) {
alert(ui.newTab.toString());
}
});

...alerts me with, when I click each tab, is:

[object Object]

...and this:

$('#tabs').tabs({
beforeActivate: function (event, ui) {
var $activeTab = $('#tabs').tabs('option', 'active');
alert($activeTab);
}
});

...is inconsistent (it shows 0, 1, or 2, but not always the same thing for the same tab).

jakecigar

Re: Is there a performance difference between inline html and dynamically-built html using getJSON()?

9 years ago

That doesn't make sense. It's always been right for me. Can you make a fiddle that shows it misbehave?

Normally I just need to know the new panel or the new tab. http://api.jqueryui.com/tabs/#event-beforeActivate

JΛ̊KE

ui.newTab is the jQuery element , not a number.

bclayshan..

Re: Is there a performance difference between inline html and dynamically-built html using getJSON()?

9 years ago

Here it is: http://jsfiddle.net/clayshannon/ZKnvx/

I could live with the tabs showing me 0,1, or 2, as long as they were consistent. object Object does me no more good than Duran Duran or Sirhan Sirhan, though.

jakecigar

Re: Is there a performance difference between inline html and dynamically-built html using getJSON()?

9 years ago

http://jsfiddle.net/jakecigar/ZKnvx/1/

Before the tab is activated active is the previous tab. You want ui.newTab.index() .

JΛ̊KE

bclayshan..

Re: Re: Is there a performance difference between inline html and dynamically-built html using getJSON()?

9 years ago

Ah! That makes sense; thanks!

Thanks! This is my derivation: http://jsfiddle.net/clayshannon/JXXsE/3/

Why does updating the "rev number" above fail to update the actual link? Although I updated it from 1 to 2 and then to 3, it still points to version 1.

Top Reply

Response title

Attachments

jQuery Forum

Is there a performance difference between inline html and dynamically-built html using getJSON()?

Replies(12)

Re: Is there a performance difference between inline html and dynamically-built html using getJSON()?

Re: Is there a performance difference between inline html and dynamically-built html using getJSON()?

Re: Is there a performance difference between inline html and dynamically-built html using getJSON()?

beforeActivate( event, ui )

Re: Re: Is there a performance difference between inline html and dynamically-built html using getJSON()?

Re: Re: Is there a performance difference between inline html and dynamically-built html using getJSON()?

Re: Is there a performance difference between inline html and dynamically-built html using getJSON()?

Re: Is there a performance difference between inline html and dynamically-built html using getJSON()?

Re: Is there a performance difference between inline html and dynamically-built html using getJSON()?

Re: Is there a performance difference between inline html and dynamically-built html using getJSON()?

Re: Is there a performance difference between inline html and dynamically-built html using getJSON()?

Re: Is there a performance difference between inline html and dynamically-built html using getJSON()?

Re: Re: Is there a performance difference between inline html and dynamically-built html using getJSON()?

Statistics

Tags

Actions

Related Posts