Communicating with Drupal from Javascript/Jquery (Drupal 7)

Question

I am trying to create a dynamically populated select list field widget. This widget consists of three Jquery multiple selects. When the user makes a selection from the first select list I need to dynamically populate the contents of the second select list. My problem is that I need to access data stored in Drupal about what should be put in the second list based on the first selection and the only way I can think to access this data is through an ajax call to a Drupal endpoint. Waiting for the return from an ajax call is going to be to slow for a useable widget so I need a better way to access this data stored in Drupal. How should one go about doing this?

Answer 1

You can send variables to your JS with drupal_add_js() in the $settings array.

An other way (the dirty one) to do it would be to print your data in a hidden div and read it with your JS. (don't hesitate to ask if you need code to do it)

Have fun !

Answer 2

There is a variety of ways to do that:

The drupal way would probably be to read a bit on chaos tools and fork the example for the dependent select box.

What I personally use is the great module knows as Views_datasource, that allows you to output view content as a json array.

So the workflow goes like this:

You have the first populated select, that you bind its change event. You retrieve the value of the select box and submit it via ajax to a view with a contextual filter rendered through views_datasource. You retrieve the json reply and populate you second select.

Have fun.

Answer 3

Add the following line in your code/module

drupal_add_js(array('myModule' => array('awesome_cms' => 'Drupal-Seven')), 'setting');

Then from your jquery access Drupal.settings.awesome_cms to get the value Drupal-Seven