By Broadlighter on

Hi,

First let me describe the problem I have and what I believe to be the solution and where I need help.

I have embedded an expandable/collapsible table in the body of a webpage. The table contents are drawn from MySQL tables in a separate database on my webhost. I did this for security reasons. I use PHP to grab the data and output it to the page and that works fine.

I took it to another level where I want visitors to my site to be able to expand and collapse the table. To do this, I set up parent rows and child rows. I modified the php code to create classes and IDs. Then I added some jquery code to create the expand/collapse effect.

It functions as intended. However, the load takes a long time. There are 120 parent rows with 11-13 child rows that go with each parent row. While the page loads, the child rows are visible, then they disappear once the page finishes loading.

To make this happen, I add a script tag that calls a jquery library. I've tried adding different versions of the library and found success with the one provided in the misc folder. However, the page still takes a long load time and displays the child rows while loading.

My first question is is there a way to make the page load faster? Would placing the scripting within the page's head tags make any difference? If so, how can I place the script tags in the head section of the page? I've read some posts on modifying the head section and it seems like there are factors that need to be carefully observed.

Thanks,

John H.

⋅ Categories: Drupal 6.x

Comments

vanrijnr1’s picture

vanrijnr1 commented

Hi, I can only answer part of the question...

Adding Js to the head - enable the core module php filter, and in the body of a node you can write in PHP. Don't use a text editor, as it tends to modify the content to filter out

etc. If I remember correctly, I used drupal_add_js - do a search on drupal.org and there's plenty of info on this. Speeding up loading your site - not sure. Have you ran the devel module? I've also used 'production check' or 'production monitor'. Running these modules will spit out a log with things to fix/ improve. I don't know what to tell you to improve speed other than that though...
Broadlighter’s picture

Broadlighter commented

I have the php module enabled. That's how I am able to grab the data I put on the screen. I'll check out production check and production monitor and see if it helps.

Thanks,

JH

john_b’s picture

john_b commented

You do not say if the jquery library being called is external or not. If it is external, it is almost sure to slow your page down, so why not grab a copy and host it yourself.

Digit Professionals specialising in Drupal, WordPress & CiviCRM support for publishers in non-profit and related sectors

TPerkins’s picture

TPerkins commented

As a previous comment mentioned, you use drupal_add_js to add javascript files and embedded javascript code to the head.
http://api.drupal.org/api/drupal/includes--common.inc/function/drupal_ad...

For the flashing of the child rows before the jQuery gets to run... One solution might be to do something like this:

<style>
.child-row{
display: none;
}
</style>
<noscript>
.child-row{
display: block;
}
</noscript>

That way they are not visible from the get go, unless the user doesn't have javascript enabled.

As far as the actual speed from start to finish. It sounds like you have A LOT of tables rows. Looking into the fastest way for jQuery to process them (how to loop through them or not loop through them at all, while verus each, etc) will probably be significant.

Broadlighter’s picture

Broadlighter commented

Thanks very much. It's very late right now, so I'll have to try this tomorrow. Thank you for the script.

As far as the row processing goes, it's PHP that loops and outputs the table rows, so it's done on the server side. It looks like the jquery has to wait until php finishes looping before jquery hides the child rows. However, are you are implying that maybe we can get the parent rows (only 120 of them) to load and then use jquery to invoke php to load the child rows upon clicking and expanding the table? That sounds interesting, but a little tricky since the scripts would have to insert the child rows in real time between parent rows.

TPerkins’s picture

TPerkins commented

Not quite. What I meant was if jQuery is looping through the child rows, adding classes, adding click handlers, it may make a difference looking into how you've written the jQuery.

Look at the graph on this page, its old but it illustrates what I mean:
http://jsperf.com/join-concat/6

Also, I goofed up on that example. 

<style>
.child-row{
display: none;
}
</style>
<noscript>
<style>
.child-row{
display: block;
}
</style>
</noscript>
Broadlighter’s picture

Broadlighter commented

The way it is set up now, I use PHP to add classes and ids to the parent and child rows. That's because I create the table rows along with populating the data from MySQL in the same script. I use jquery to add the click handlers.

Here is the jquery I use for that:

<script type="text/javascript" src="/misc/jquery.js"></script>

<script>
$(function() {
	$('tr.parent')
		.css("cursor","pointer")
		.attr("title","Click to toggle child rows.")
		.click(function(){
			$(this).siblings('.child-'+this.id).toggle();
		});
	$('tr[@class^=child-]').hide().children('td');
});</script>

So, I'm not sure where to proceed from here. It doesn't make sense to add the parent/child classes through jquery if I'm creating the table rows in PHP.

JH

TPerkins’s picture

TPerkins commented

That all makes sense. :)

It was just a suggestion without really knowing the whole picture. There could be other factors.

I'm not a jQuery speed expert but if the table that contains your rows has an id, it might be a little quicker to adding that to the jQuery selector.

$('#mytable tr.parent')
Broadlighter’s picture

Broadlighter commented

Thanks. I'll try that.

JH