Making an enormous list with duplicate data faster with AJAX

Question

I am using a jQuery UI Selectmenu by the Filamentgroup to select questions from a database. The script is basically a fancy drill-menu using a list and a drop-down function. After a couple of tweaks (the script is beta) it works pretty good, however, I am using A LOT of duplicate data, which makes the script slow and sluggish. The main reason for this, is that I am using a drill-down menu, while I should be using a chained selection menu.

But I wouldn't post here if i wouldn't prefer the drillmenu. It keeps the process very intuitive and simple for future visitors and only needs one select-box instead of multiple.

In the script, the user "drills down" trough 4 categories, all containing several options. In the end a list of questions appear. But the questions are ALWAYS the same. So far example, a user goes trough this list:

Gender (2 options) > Age (3 options) > Education (3 options) > Category (6 options) > List of questions

But it doesn't matter if the user selects male or female, low, medium, high, etc. The questions remain the same. And since it's a list I have a gigantic list of over 10.000 lines.

Ideal would be, if the content of especially the last list, will be loaded whenever it get's selected and not when the page loads. I read something like this could be done with Json. I read the whole day into this, but with my limited knowledge of javascript and jquery I am not getting anywhere.

Could someone give a suggestion of what i could do? I know no one is going to make this script for me, but perhaps the existing script only needs a couple of tweaks, easy to implement for experts. Or perhaps there is an option to just "add" something to the list, Or perhaps you guys know a similar script with the function already built in.

The list is built in a PHP function. I know PHP pretty well, so if there is something I can use there, that's also an option. For example, only load/execute the function when it get's selected in the list.

Update:

• JSfiddle
• Script examples (without Ajax)

• Script I am using:

  jQuery.ajax({ url: "questions.php", cache: false }).done(function( html ) { jQuery(".result").append(html); });

Questions.php loads the questions from a MySQL database and echo's them as an unordered list. The questions show up anywhere on the page, unless i'd use them in the list itself where they should be.

Answer 1

http://api.jquery.com/jQuery.ajax/

This would be what you would want to use to implement the grabbing of the list on a as needed basis. What I would do would be on certain events to grab the next needed info, in your case the questions, and then do as you wish with the returned data.

User selects the next menu -> Ajax call to web script on your website -> Gets returned JSON string -> render or manipulate JSON string onto your page.