Take the 2-minute tour ×
Drupal Answers is a question and answer site for Drupal developers and administrators. It's 100% free, no registration required.

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!

share|improve this question
add comment

2 Answers

up vote 0 down vote accepted

I've run your code pretty much as is and have got the alert to successfully show the JSON data. You say you see the that it is returning the test data in firebug but what are you actually seeing? Can you inspect the data in the script tab of firebug? You should just see the array of titles. You will have to do something with it, i.e. iterate using .each to get some change to your html.

share|improve this answer
    
Also where is your callback for the AJAX? –  Malks Dec 20 '11 at 0:15
    
Thanks for taking a look! –  Starfs Dec 20 '11 at 15:30
    
Accept-Language en-us,en;q=0.5 Accept-Encoding gzip, deflate Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7 Connection keep-alive Content-Type application/x-www-form-urlencoded; charset=UTF-8 X-Requested-With XMLHttpRequest Referer localhost:8888/belgard/slider-test Content-Length 4 Cookie has_js=1 –  Starfs Dec 20 '11 at 15:37
    
Tue, 20 Dec 2011 15:33:22 GMT Server Apache/2.2.17 (Unix) mod_ssl/2.2.17 OpenSSL/0.9.8r DAV/2 PHP/5.3.6 X-Powered-By PHP/5.3.6 Cache-Control no-cache, must-revalidate, post-check=0, pre-check=0 Etag "1324395202" Content-Language en Content-Length 62 Keep-Alive timeout=5, max=98 Connection Keep-Alive Content-Type application/json Request Headers Host localhost:8888 User-Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:8.0.1) Gecko/20100101 Firefox/8.0.1 Accept application/json, text/javascript, /; q=0.01 –  Starfs Dec 20 '11 at 15:38
    
Ok, I'm new to the Stack Overflow and not used to how when i hit a return, it posts the comment right away.. but, anyway! Above are the Response Headers from Firebug. In the Post tab of firebug, it says js=4 --- in the response, ui number: 9 ["Test Swatch 1","Test Swatch 2","Test Swatch 4"] -however, I guess i am not sure what to do with that information, and not sure why I am getting a parser error. –  Starfs Dec 20 '11 at 15:51
show 5 more comments

I hope, this post will help you. In that post, author has explained how to handle the json response from ajax callback.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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