5

I've been learning how to use AJAX with Drupal 7. I already know how to use the '#ajax' attribute with a form and also how to use the 'use-ajax' class with a link.

I have a nice jQuery slider on my page that emits a jQuery event (called 'slide') every time the slider moves to a new picture. The event also contains which slide number we will be viewing. I can bind to the event using jQuery like this:

$('.slider').bind('slide', function(e, data) { alert(data.slide); });

That will pop up an alert showing the current slide. Instead I want to make an AJAX call using Drupal 7's AJAX and pass this current slide number to Drupal.

I've been searching for an answer and I think it might have something to do with the Drupal.ajax DOM object but I'm not sure.

19

I am assuming you'd like to display some data when you're moving the slider around.

The way I do it is without using the '#ajax' attribute.

Implement the AJAX call, send the slider value as POST variable to '/foo/ajax':

    jQuery('#slider').slider({
            // Define your slider (min, max etc)
            ...
            // Add event handler
            change: function(event, ui) {
                jQuery.ajax({
                    type: 'POST',
                    url: '/foo/ajax',
                    dataType: 'json',
                    success: ajaxCompleted,
                    // Might want to use 'ui' instead of jQuery('#slider').
                    data: 'slider_value=' + jQuery('#slider').slider('values', 0);
                });
            }
    });

Make a menu item that's called when the slider moves around:

function foo_menu() {
  ...
  $items['foo/ajax'] = array(
    'title' => t('foo AJAX'),
    'type' => MENU_CALLBACK,
    'page callback' => 'foo_ajax',
    'access arguments' => array('access content'),
  );
  ...
  return $items;
}

Implement the foo_ajax page callback:

function foo_ajax () {
  // Retrieve the slider value
  $slider_value = (int)$_POST['slider_value'];

  // Get some id's from the foo table
  $result = db_query('SELECT id FROM {foo} WHERE value = :value', array(':value' => $slider_value));
  $data = array();
  foreach ($result as $row) {
    // Do something with data
    // Parse to json

    $data[] = $row->id;
  }

  // Return json
  drupal_json_output($data)
}

Implement ajaxCompleted (within your javascript):

function ajaxCompleted () {
    // Parse Json
    // Add some stuff to your DOM.
}
  • So far so good, but how do I parse the JSON in ajaxCompleted()? I was used to using ajax_deliver() in the foo_ajax() function to manipulate a div but that isn't working now. – darkadept Mar 10 '11 at 17:13
  • 2
    Oh I got it. The function is: `function ajaxCompleted(data) { alert(data); }. Is there a way to use drupals commands and ajax_deliver() instead and let drupal generate the DOM manipulation stuff? – darkadept Mar 10 '11 at 17:20
  • darkadept did you have any luck processing the ajax response from ajax_deliver? I'm doing something similar and I need Drupal's ajax goodness to process/handle the DOM manipulation in order for javascript functionality on other modules to work properly. I'm trying to load a node via ajax and it works when I hack my code into the "Ajax Link (Renderable Array)" example, but the json response is being processed by Drupal...I need to know how to do this! Thanks. – SomethingOn Jan 4 '12 at 14:28
1

If I'm understanding correctly you need to setup a Drupal path with a page callback to whatever PHP function is going to handle the slider data. Then just make an AJAX call on slide event. Something like this:

$('.slider').bind('slide', function(e, data) {
 var href = path/to/your/drupal/handler;

 $.ajax({
  type: "POST",
  url: href,
  data: {slide: data.slide},
 });

});

This way you can 'POST' the slider data to PHP and have the callback function take in the data as an argument and do whatever needs to be done from there. Read up on the jquery $.AJAX function for more options of what you can do with return data, etc etc

edit: Wow someone posted a much more thorough example of the same concept at the same time. Definitely check out his solution for more details!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.