Using jQuery $.ajax() on my site won't work

Question

This is the first time for me to use the jQuery $.ajax() in Drupal. The code is a simple test code but it keeps going to the error: section instead of success:. Could my url path be wrong? The .js file and the test-ajax.php file are in the same folder named "code".

    //This is Javascript
    $.ajax({
        url: 'code/test-ajax.php',
        data: 'a=hello&b=world',
        type: 'POST',
        success: function(data){
            alert(data); //Should return "hello, world"
        },
        error: function(){
            alert('FAIL'); //Keep getting "FAIL". It's like it can't find the php file.
        }
    });

Nothing fancy inside the file test-ajax.php:

<?php
$a = $_POST['a'];
$b = $_POST['b'];

echo "$a, $b";
?>

EDIT: To avoid confusion on the paths (I keep it organized):

• Main theme files: <templatename>/<.info, template.php, style.css, etc.>
• Template files: <templatename>/templates/*.tpl.php
• AJAX files: <templatename>/code/<PHP and .JS files>

Answer 1

Change

url: 'code/test-ajax.php',

to

url: Drupal.settings.basePath + 'sites/all/themes/YOURTHEME/code/test-ajax.php',

Anyway, the more Drupal way is to use hook_menu to register your callback instead of putting a PHP file in your theme folder.

Answer 2

In Drupal, JavaScript files are added via the drupal_add_js() function or in the theme’s .info file. A simple example of using jQuery in drupal is

    <?php
    drupal_add_js('jQuery(document).ready(function () {
   jQuery.ajax({
        url: '/code/test-ajax.php',
        data: {'a':'hello','b':'world'},
        type: 'POST',
        success: function(data){
            alert(data); //Should return "hello, world"
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert(textStatus + errorThrown); //Better diagnostics
        }
    });
    });', 'inline');
    ?>

you have to use 'jQuery' instead of $.

Answer 3

As with all programs, it's impossible to fix an error unless you know what's wrong.

jQuery will pass three parameters (jqXHR, textStatus, errorThrown) to the error function to help you determine what your problem is. You may be getting a 404 which means you need to fix your path (or flush your drupal cache to get the hook_menu() to be recognized). You may be getting a 500 which means you have a syntax error in your module. Or any of the other numerous problems you can encounter when using AJAX.

The documentation for these parameters is at http://api.jquery.com/jQuery.ajax/

Answer 4

I would write the same code like this:

//This is Javascript
    $.ajax({
        url: '/code/test-ajax.php',
        data: {'a':'hello','b':'world'},
        type: 'POST',
        success: function(data){
            alert(data); //Should return "hello, world"
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert(textStatus + errorThrown); //Better diagnostics
        }
    });

Note the following:

• URL is absolute (starts with /). If current page URL is node/x, then code/text-ajax.php will be looked up as node/code/text-ajax.php, which is (probably) wrong
• error handler has parameters, which gives your better diagnostics
• data is an object, not an URL string

Answer 5

I already commented on this under the answer given by Mujtaba but here it is as a proper answer.

You do not have to change all $ to jQuery for this to work. As per the Drupal 7 documentation, you just need to wrap your code like this:

(function($){
  $(document).ready(function(){
    ...
  });
})(jQuery);

Then you can just keep writing your code using $ and it assigns $ to jQuery. It's basically doing the same thing as just writing your code using jQuery instead of the $ but saves you the trouble of find and replace on existing code and saves you characters (and thus file size) when making your code from scratch.

Answer 6

How odd, I got it to work but only by using the complete URL path for the AJAX file.

url: 'http://mydomain.com/sites/all/themes/<themename>/code/test-ajax.php',

This just doesn't feel right. Is there a Drupal way of doing this instead of entering the complete URL path?

Answer 7

Thanks to everyone who's commented (especially @jcisio)! Based on all your answers, I was able to come up with the THEMEPATH global variable which stores the complete path to the theme by using drupal_add_js().

drupal_add_js( array( 'themepath' => base_path() . path_to_theme() ), 'setting' );

Which you can then reference in your .js file as

var THEMEPATH; //a global variable
$(function(){
    THEMEPATH = Drupal.settings.themepath; //assign the variable
})

//THEMEPATH has to be assigned on page load and not before or else it won't work

So in the end, you simply use it in jQuery as: THEMEPATH + '/code/test-ajax.php'. I'm surprised Drupal doesn't have this by default.