I am somewhat new to drupal and working on creating a module that implements a jqueryui slider that sends a numeric value via ajax call to a php function in my custom colorslider.module file. Eventually, we will transform the numeric value passed to the function into a string that relates to a certain color, as a means of returning data from the database about objects that relate to that color. But for now, we are just trying to successfully get json returned back to the javascript file. The closest example I can reference can be found on this thread.
Using jQuery to communicate to Drupal 7 via AJAX
I have been trying to follow the example on the above link as a starting point and it appears that everything is almost working, but I continue to get a json parser error and I feel I am missing something about how to use json to parse the data. Boo!!
I am hoping that this post can help myself and other drupal/ajax/jquery/json newbies figure out how to tie a jquery.ajax call with a json return object.
Here is the html that creates the slider, based on the js file jquery.ui.slider.min and the css file jquery.ui.slider.css, both of which can be found in the drupal misc/ui/ directory.
<div id="slider"></div>
<div id="s2">10</div>
Next we can look at the contents of colorslider.js, where we initiate the slider mouse function to make the ajax call:
$(function(){
function ajaxCompleted(data) { alert(data); }
$('#slider').slider({
range: true, values: [10], max:10, min: 0, orientation:'vertical',
change: function(event, ui) {
$("#s2").html(ui.value);
jQuery.ajax({
type: 'POST',
url: 'colorslider_colorrequest',
dataType: 'json',
data: 'js=' + jQuery('#slider').slider('values', 0),
success: ajaxCompleted,
error: function (xhr, status) {
alert(xhr.statusText);
}
});
}
});
});
and finally, the php function that makes the database call and is supposed to return a json object....
function colorslider_colorrequest() {
$uinumber = $_POST['js'];
echo 'ui number: '.$uinumber .' ';
$swatchcolor = 'Blue';
$query = db_query ("Select n.nid AS nid, n.title AS title, c.field_swatch_color_value AS color
FROM {node} n
INNER JOIN {field_data_field_swatch_color} c ON c.entity_id = n.nid
WHERE (c.field_swatch_color_value = '".$swatchcolor."')
GROUP BY title");
foreach ($query as $row) {
//Do something with data
// Parse to json
// Is there something that needs to be done here????
$data[] = $row->title;
}
// Return json
drupal_json_output($data);
}
It appears to almost be working, and when I view the page with firebug console, I see that it is returning the test data on some level, but it doesn't know how to output it back to html, and it pops up the alert that there is a json parser error.
Thank you in advance for any pointers!
edit:
Ok, This is probably silly because I am new to ajax and some of these techniques, but have now got the expected output into the alert box. I guess I didn't realize that the final output of the php function ( colorslider_request() ) needed to be piped through the drupal_json_output($data); function. I had another variable ( ) printing within the function ( echo 'ui number: '.$uinumber .' '; ) and so everything wasn't getting properly turned into json. Thus the parsing error.
I will post a more detailed answer as I figure out how to generate the html from the json response and how to output that via jquery! Thanks again for the help! if you have any suggestions of possible ways/examples of ways to transform the ajax callback into html, tht would be particularly interesting!
