Ajax in Drupal via jQuery by Example
I am writting becasue I have been working on a module that utilizes Ajax in Drupal via jQuery called "ActiveField".
The module is somewhat unique from other examples that I have seen in that:
1. It works with CCK content types while they are being created (i.e. before they are persisted to the database)
2. It works with existing themes and does not have it's own theme
The module is documented at: http://www.sageofcode.com/?p=59
I litterally own 8 books on drupal (more books on the way) and the Lullabot DVD. I have read just about every article that I could find on Ajax/jQuery/Drupal. Based on feedback from other members of the Drupal community, the module is nearly working.
(c.f. http://drupal.org/node/301959 ). Once the module is working, I would like to submit it as a contributed module and contribute to Ajax/jQuery/Drupal online docs (e.g. http://drupal.org/node/305747 is "[TO BE COMPLETED....]"). I have a diverse back ground which includes documentation and training; I have managed and lead documentation and training teams in the past. I welcome the opportunity to apply these skills to build documenation and training materials on Ajax, jQuery and Drupal.
Below is the updated code.
I have read, re-read, and re-, re-read every line of code and character. I have also debugged every which possible that I know of. I am truely stumped. S.O.S.
Every thing is working unitl the ajax request is made to the call back function via the URL.
More specifically, whe the .js file is loaded, the following error is displayed in the Console tab of FireBug:
ActiveField.module
Firebug needs to POST to the server to get this information for url:
http://sageofcode.com/ActiveField/field-trip
This second POST can interfere with some sites. If you want to send the POST again, open a new tab in Firefox, use URL 'about:config', set boolean value 'extensions.firebug.allowDoublePost' to true
This value is reset every time you restart Firefox This problem will disappear when https://bugzilla.mozilla.org/show_bug.cgi?id=430155 is shipped.I click the "Load Response" button and I get this error:
<html><head><title>404 Not Found</title></head>
<body bgcolor=white>
<h1>404 Not Found</h1>
The requested URL /ActiveField/field-trip does not exist.
</body></html>When I got to the http://ActiveField/field-trip , I get
Palo AltoWhat I find interesting is that when I go to the Menu callback of the "plus1" module example in chapter 17 of "Pro Drupal Devlopment" 1st Ed., I get a blank white page. The "plus1" module works just fine on my site. I have compared every character in the ActiveField_menu() function, and I cannot see an issue. I have confirmed that the code is executed. In fact, the access privilege is created!
Another interesting observation is that the menu table does not have a row for the MENU_CALLBACK for the plus1 module; at least as far as I can see.
The issue appears to be with the actual, path. But, I am out of ideas on how to debug this.
<?php
//$id$
/
* @file
* A dynamic parent-to-child field module via Drupal, Ajax, and jQuery
/
/
Implementation of hook_perm().
* Adding the "Use ActiveField" permission to Drupal's role-based access control page.
* Prevents Anonymous use.
/
function ActiveField_perm(){
return array('Use ActiveField');
}
/
* Implementation of hook_menu()
* Allows for the mapping for jQuery intercepted URL to a Drupal PHP function
* The Drupal PHP function will return the child field's value(s) to jQuery in JSON
*/
function ActiveField_menu($may_cache){
$items = array();
// debug
drupal_set_message("ActiveField_menu($may_cache,...)");
if($may_cache)
{
$items[] = array(
'path' => 'ActiveField/field-trip',
'callback' => 'ActiveField_getTargets',
'type' => MENU_CALLBACK,
'access' => user_access('Use ActiveField'),
);
// debug
drupal_set_message("ActiveField_menu($may_cache,...if..)");
}
return $items;
}
/
*
* Implementation of hook_form_alter()
*
*/
function ActiveField_form_alter($form_id, &$form)
{
if ($form_id == 'field_trip_node_form')
{
//drupal_add_js(drupal_get_path('module', 'ActiveField'),'/ActiveField.js');
drupal_add_js(drupal_get_path('module', 'ActiveField') .'/ActiveField.js');
}
}
/**
*
* Called by jQuery
* Submits the parent field value and returns the child field's value(s) as a JSON
*/
function ActiveField_getTargets()
{
// this particular query is just for testing.
$sql="SELECT title FROM {node} WHERE type='location'";
$result = db_result(db_query($sql));
print drupal_to_js($result);
exit();
}ActiveField.js
/** ActiveField.js
JavaScript file with jQuery
* Used by ActiveField.module
/
//$Id$
if(Drupal.jsEnabled)
{
$(document).ready(function()
{
// Parent field & respective event
// Adding change event to Hot Spot Field
$('#edit-field-location-key').change(function(event)
{
// Call back function for AJAX call
var frmDrupal = function(data)
{
// convert the value from Drupal to JSON
var result = Drupal.parseJson(data);
// Set the child field(s)' value(s)
// setting the text for the "test" text field
$('#edit-field-capital-value').text(result);
}
//AJAX call
// URL: ActiveField/field-trip - maps to a Drupal function
// Parameters: null for now.
// Call back function: "frmDrupal"
//The URL (i.e. the server side resource to be called)
//needs to be unique to the module
$.get('ActiveField/field-trip', null, frmDrupal);
// preventing entire page from reloading
return false;
});
});
}
I have a similar 404 issue
I have a similar 404 issue but in my case it is clear that the Ajax call is missing the drupal base path i.e. it is pointing to module/function where it should point to base_url/module/function, maybe this can help you (base url, apache root and so on).
drupal 6 ajax example
if(Drupal.jsEnabled)
{
$(document).ready(function() {
}
A very basic Drupal & Ajax tutorial
I've recently wrote a short but helpfull (I hope :) ) step by step tutorial to set up a module that handles ajax requests.
I hope it helps other people, as I found it hard to find something similar elsewhere.
Great Tutorial
That really helped me a lot on my Ubercart dynamic catalog page, using Ajax. Please continue to provide tutorials around this, maybe with more complex scenarios.
Maybe with how you talked about the views being returned instead of the simple list.
Thanks,
Robert
Dynamically loading view via AJAX
Hi Robert,
I created another tutorial which you can find here.
It explains how to make an AJAX request, and return a view result.
I hope it is close to what you requested.
Give me a shout if you need more help.
Zion