cheesegrits
Support Gopher
I don't have time to totally rebuild the first post right nowm I have to leave town in about an hour. But here's a real life example, using the same towns and cities stuff:
First, the user_ajax.php.
NOTE you need to make one edit here, to change the table name in the $ok_tables() array. This is a security measure, to prevent people from using this as a backdoor to grab any data form any of your J! tables.
Now, an X.js file, where X is your form ID, needs to be in ./components/com_fabrik/js/X.js.
You'll need to change that getValues() call at the bottom (which is the one that initially sets up the Town menu when the form is loaded), so it represents your table/element names ... the arglist is getValues(<country_form_menu_value>,<town_table>,<town_table_primary_key>,<town_name_element_in_town_table>,<country_id_element_in_town_table>,<town_element_on_form>);
Then add a 'onblur' on 'onchange' to your Country element in Fabrik, which makes (almost) the same getValues() call as the onload event above:
The only difference being that it uses this.getValue() as the first argument. This line handles changing the Town menu when you select a different Country.
Oh, and change the "please_select" var at the top to suit your language.
I'll come back and redo all this as a neater example when I can, just wanted to get some working IE compatible code out there.
-- hugh
First, the user_ajax.php.
NOTE you need to make one edit here, to change the table name in the $ok_tables() array. This is a security measure, to prevent people from using this as a backdoor to grab any data form any of your J! tables.
PHP:
<?php
/* MOS Intruder Alerts */
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
class userAjax {
// Add any tables you want to access using getFields() here!
// (remember to add a comma after all but the last one)
var $ok_tables = array(
'jos_fabrik_formdata_3'
);
function getFields(){
global $database;
//get all the variables passed in by the ajax objects url
$table = mosGetParam($_REQUEST, 'table');
$key = mosGetParam($_REQUEST, 'key', 'id');
$label = mosGetParam($_REQUEST, 'label', 'label');
$foreignKey = mosGetParam($_REQUEST, 'foreignkey', 'country_id');
$val = mosGetParam($_REQUEST, 'val', '1');
// make sure table is in our allowed list, if not don't do anything.
if (in_array($table,$this->ok_tables))
{
//run a query on the database to get the matching fields
$sql = "SELECT $key AS value, $label AS label FROM $table WHERE $foreignKey = '$val'";
//echo $sql;
$database->setQuery($sql);
$rows = $database->loadObjectList();
//write the results of the query back to the browser - the javascript code will then assign
//the text to the second drop down
if (!empty($rows))
{
foreach($rows as $row){
//echo "<option value=\"$row->value\">$row->label</option>\n";
echo "$row->value//..*..//$row->label\n";
}
}
else
{
echo "0//..*..//Nada!";
}
}
else
{
echo "$table//..*..//Bad table!";
}
}
}
?>
Code:
var please_select = 'Seleccionar...';
function getValues(cid,table,key,label,foreignkey,dropdown)
{
var url = 'index2.php?option=com_fabrik&no_html=1&task=userPluginAjax&method=getFields';
url += '&table=' + table;
url += '&val='+cid;
url += '&key='+key;
url += '&label='+label;
url += '&foreignkey='+foreignkey;
new Ajax(url, {
method: 'get',
onComplete: function(response) {
var newelement = new Element(
'select',
{
'id': dropdown,
'class': 'inputbox',
'name': dropdown
}
);
$(dropdown).replaceWith(newelement);
var newopts = response.split('\n');
var newopt = new Element('option',{'value': 0}).setHTML(please_select);
newopt.inject($(dropdown));
for (i=0; i<newopts.length; i++) {
if (newopts[i] != '') {
var vals = newopts[i].split('//..*..//');
var newopt = new Element(
'option',
{
'value': vals[0]
}
).setHTML(vals[1]);
newopt.inject($(dropdown));
}
}
}
}).request();
}
window.addEvent('domready', function() {
var country_id = $('jos_fabrik_formdata_4___country').value;
if (country_id) {
getValues(country_id,'jos_fabrik_formdata_3','fabrik_internal_id','label','country_id','jos_fabrik_formdata_4___town');
}
});Then add a 'onblur' on 'onchange' to your Country element in Fabrik, which makes (almost) the same getValues() call as the onload event above:
Code:
getValues(this.getValue(),'jos_fabrik_formdata_3','fabrik_internal_id','label','country_id','jos_fabrik_formdata_4___town');Oh, and change the "please_select" var at the top to suit your language.
I'll come back and redo all this as a neater example when I can, just wanted to get some working IE compatible code out there.
-- hugh
