I am attempting to dynamically populate a cck nodes form fields with data I am retrieving from Amazon. What I have so far is a cck node form, plus an additional textfield and button added with hook_form_alter. This textfield and button have been extended with the AHAH forms framework to perform a callback when the button is clicked. When I click the button it performs a callback to a function which retrieves the Amazon data and outputs it to the screen. It's easy enough to dynamically display the data in a div on the same page, but I want to manipulate the DOM and populate the CCK form with the information I have retrieved.
I have tried adding doing a drupal_add_js to modify the attributes of the form elements, but I believe since the page is already loaded the javascript won't be executed?
The reason I want to populate the form this way is because this form will also used for manual data input for our library resources. So if the book/dvd/cd has information on amazon we can retrieve that and populate the form, and if not the user can input the information manually.
Here is my hook_form_alter function showing the ahah_bindings for the callback
<?php
function amazonlookup_form_alter($form_id, &$form) {
if ($form_id == 'resource_node_form') {
$amazon_result = '<div class="amazon_result" id="amazon_result"></div>';
$form['asin'] = array (
'#type' => 'textfield',
'#title' => t('Enter ISBN or Amazon ASIN number'),
'#weight' => -10,
);
$form['amazon_lookup'] = array (
'#type' => 'button',
'#value' => 'Lookup',
'#suffix' => $amazon_result,
'#weight' => -10,
'#ahah_bindings' => array ( //used with the Ahah Forms Framework
array(
'wrapper' => 'amazon_result',
'event' => 'click',
'path' => 'amazontest/lookup',
),
),
);
return $form;
}
}
?>And currently here is my lookup function called by amazontest/lookup. As you can see all it does right now is display information to the screen if it finds or doesn't find an item.
<?php
function amazon_check() {
$asin = $_POST['asin'];
$item = _amazon_product_data_from_Amazon($asin);
if ($item) {
echo $item[0]->title;
echo '<br />';
echo '<img src="'. $item[0]->mediumimageurl .'" />';
}
else {
echo "No matches found, asin = ". $asin;
}
}
?>If anyone have any suggestions or recommendations as to how I could do this I would be greatly appreciative.
Comments
Solved!
So firstly I realize I made a typo in the title of this post instead of 'from' it should be 'form'. So I managed to get the functionality I wanted. However not using the AHAH Forms Framework. Instead just using jQuery and old fashion AJAX.
First I followed the excellent Drupal + AJAX guide at Workinghabit.org. Then made a few small modifications. The result in the guide is sending HTML back through the $.ajax call. I however only wanted variables coming back which from my understanding means I needed to send back JSON.
So in your php function that outputs the HTML results from the example. You would do your processing or whatever you're doing to get the data and then replace the HTML output with something like this.
<?phpecho drupal_to_js(
array(
'variable' => $somevalue
'variable2' => $somevalue2
)
);
?>
This will send back JSON formatted variables. Next we need to modify the $.ajax call in the javascript.
$.ajax({type: "GET",
url: '/my/callback/path',
data: "myvariable="+obj.value,
dataType: "json",
success: function(msg){
$("#my-form-id").attr("value", msg.variable);
$("#my-form-id2").attr("value", msg.variable2);
},
});
There are a few thing I modified here. First is the call
dataType: "json",This is to let the $.ajax function know we're getting back JSON data. Because of this the 'msg' variable is now a proper JSON object so we can reference the variables easily.
$("#my-form-id").attr("value", msg.variable);$("#my-form-id2").attr("value", msg.variable2);
This is where I am changing the values of the form elements. Where "#my-form-id" is the DOM id of the form. Use Firebug or something similar to figure out what your DOM ID of the element is. We then change the attribute "value" to msg.variable which is the name of the variable we specified in the output php method above.
I still have to figure out how I can modify the workinghabit example to use a button to initiate the ajax call instead of doing an onblur with just the textfield. Also I need to figure out how to properly handle an error condition in the $.ajax method. What do I send back from the php to indicate an error?
Hope this helps anyone else looking to do something similar.
---------------------------------------------------------------------
"I am a very model of a modern major general"
http://www.arvinsingla.com
http://www.wiiliketopodcast.com
---------------------------------------------------------------------
"I am a very model of a modern major general"
http://www.freeformsolutions.ca
http://www.arvinsingla.com
Correct link to Workinghabit.org
Maybe the link to Workinghabit.org is changed. The correct link is http://www.workhabit.com/labs/drupal-ajax-part-1.