0

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.

mat
  • 1,619
  • 1
  • 15
  • 25

1 Answers1

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.

sean
  • 3,955
  • 21
  • 28
  • I am going to try and play with it. I up voted your answer, this is something i didn't found yet. I was too much looking into scripts. – mat Jul 10 '12 at 15:49
  • Ya, there are no real frameworks for exactly what you want to do, but there are as in the link above libraries that can help you with exactly the functionality that you need. The Jquery documentation is pretty good and there are a lot of examples so it shouldn't be to difficult to integrate into your project. – sean Jul 10 '12 at 15:52
  • Mmhh, it is working outside the list, but when i put it in the list it doesn't load the questions. I can't even get the fiddle to work to show you an example. But perhaps you know this is a basic thing or something. I updated my post. – mat Jul 10 '12 at 22:10
  • I created another topic because this is a script / AJAX problem now: http://stackoverflow.com/questions/11432521/jquery-drilldown-list-menu-with-ajax-content-not-working – mat Jul 11 '12 at 12:28