user ajax dropdown

[lukikuli]

Hello.. I was trying to use fabrik user ajax from the wiki http://fabrikar.com/forums/index.php?wiki/user-ajax/
I want to make ajax call to retrive data from db then update to dropdown element (onload).
I've searched in this forum but i can't figure how to solve my problem.

My Code :
1. user_ajax.php

<?php
defined('_JEXEC') or die('Restricted access');

class UserAjax
{
    public function getPropinsi()
    {
        $db_sas = FabrikWorker::getDbo(false, 2);
        $query = "SELECT DISTINCT propinsi FROM sas_master_kodepos ORDER BY propinsi ASC";
        $result = '';
        $db_sas->setQuery($query);
        $result= $db_sas->loadAssocList();
        echo $result;
    }
}

2. js in the dropdown element (javascript plugin onload)

var url = "index.php?option=com_fabrik&format=raw&task=plugin.userAjax&method=getPropinsi";

new Request({
  method: 'get',
  async: true,
  url:url,
  onComplete: function(response) {
      alert(response);
      Fabrik.getBlock('form_18').elements.get('sas_master_siswa_all___kodepos').update(response);
  }
}).send();

1. Which should i use to process query in user_ajax function? loadAssocList() or loadObjectList() ?
2. How to get the return value from user_ajax function ? And how to process the value in js and generate it as dropdown?

Any help would be appreciated
Thanks!!

 

[startpoint]

try with:

public function getPropinsi()
{
    $db_sas = FabrikWorker::getDbo();
    $query = "SELECT DISTINCT propinsi FROM sas_master_kodepos ORDER BY propinsi ASC";
    $result = '';
    $db_sas->setQuery($query);
    $result= $db_sas->loadAssocList();
    echo 'query: '.$db->getQuery();
    echo $result;
}

and view your result in console.
Disable echo 'query: '... to run function normally.

$db->loadObject() – returns first row as an object. e.g. $obj->field.
$db->loadObjectList() – returns resultset as an object. For multiple records.
$db->loadResult() – returns first field of first row as a value. A single value
$db->loadRow() – returns the first row as an indexed array.
$db->loadAssoc() - returns first row as an associated array.
$db->loadColumn() - ??? '(' . implode(',', $ result) . ')' ????
$db->loadAssocList() - returns resultset as an associated array. For multiple records. $db->Execute($sql) - Execute sql that doesn't return anything. Pass sql as parameter.

https://docs.joomla.org/Selecting_data_using_JDatabase
I don't know hot to update dropdown element.
But I think the best way to populate dropdown element with values from your database is to use advanced tab on the element:
http://fabrikar.com/forums/index.php?wiki/dropdown-element/#advanced

 

[lukikuli]

I tried very simple test just now.

<?php
defined('_JEXEC') or die('Restricted access');

class UserAjax
{
public function getPropinsi()
    {
        echo "abc";
    }

var url = "index.php?option=com_fabrik&format=raw&task=plugin.userAjax&method=getPropinsi";

new Request({
  method: 'get',
  async: true,
  url:url,
  onComplete: function(response) {
      alert(response);
  }
}).send();

but it shows undefined. any clue?

 

[startpoint]

try

var url = "index.php?option=com_fabrik&format=raw&task=plugin.userAjax&method=getPropinsi";

new Request({
  url:url,
  onComplete: function(response) {
      alert(response);
  }
}).send();

or in this new way:

var data = {
    'option'    : 'com_fabrik',
    'format'    : 'raw',
    'task'      : 'plugin.userAjax',
    'method'    : 'getPropinsi'
};

new Request({
    'url': '',
    'data': data,
    onComplete:function(response){
    alert(response);
    }
}).send();

 

[lukikuli]

try

var url = "index.php?option=com_fabrik&format=raw&task=plugin.userAjax&method=getPropinsi";

new Request({
  url:url,
  onComplete: function(response) {
      alert(response);
  }
}).send();

or in this new way:

var data = {
    'option'    : 'com_fabrik',
    'format'    : 'raw',
    'task'      : 'plugin.userAjax',
    'method'    : 'getPropinsi'
};

new Request({
    'url': '',
    'data': data,
    onComplete:function(response){
    alert(response);
    }
}).send();

i tried both but didn't work.. still alert 'undefined.'

 

[achartier]

Did you try startpoints recommendation of echoing the query? You can also do a print_f of the result from the database call and then exit to see the results on your screen.

The echo of the results is going to return nothing if it is an array which it should be using a loadList type database call. You will want to json_encode the $result before you echo it.

Once you get the json encoded result in your javascript you will need to populate the dropdown. If you want to empty the current dropdown list you can use jQuery('#yourdropdownid').empty();

Then you will need to loop through the returned results and create the new options, something like this:

result.forEach(function(name, value) {
jQuery('#yourdropdownid').append('<option value="'+value+'">'+name+'</option>');
});

Note, I haven't tested this but it should get you started.

 

[lukikuli]

Did you try startpoints recommendation of echoing the query? You can also do a print_f of the result from the database call and then exit to see the results on your screen.

The echo of the results is going to return nothing if it is an array which it should be using a loadList type database call. You will want to json_encode the $result before you echo it.

Once you get the json encoded result in your javascript you will need to populate the dropdown. If you want to empty the current dropdown list you can use jQuery('#yourdropdownid').empty();

Then you will need to loop through the returned results and create the new options, something like this:

result.forEach(function(name, value) {
jQuery('#yourdropdownid').append('<option value="'+value+'">'+name+'</option>');
});

Note, I haven't tested this but it should get you started.

I'll try this.. thanks for your reply
what makes me confused is even the simplest example can't be done. (i tried to alert 'abc' with user ajax)
I don't know if there are other factors causing this

 

[achartier]

You might try placing your browser in developer mode and watch both the console as well as the network traffic. I find this often helps pinpoint the problem.

 

[cheesegrits]

I tried very simple test just now.

<?php
defined('_JEXEC') or die('Restricted access');

class UserAjax
{
public function getPropinsi()
    {
        echo "abc";
    }

Are you really missing the close } from the class, or was that just a copy 'n' paste mistake?

-- hugh

 

[lukikuli]

Are you really missing the close } from the class, or was that just a copy 'n' paste mistake?

-- hugh

in my user_ajax.php i didn't miss the '}'

 

[cheesegrits]

OK, so did you try the suggestion of using dev tools in your browser, look at the Network tab, see what happens when you AJAX call fires, see if a value actually gets returned, or if there's any JS errors.

-- hugh

 

[lukikuli]

OK, so did you try the suggestion of using dev tools in your browser, look at the Network tab, see what happens when you AJAX call fires, see if a value actually gets returned, or if there's any JS errors.

-- hugh

it showed error 500
By the way, I tried in localhost joomla and fabrik user ajax works flawlessly.
Is the error caused by server firewall or something else? I have no idea with my company's server stuffs

 

[cheesegrits]

If there's a 500 error, there should be an error log somewhere.

Also, try raising the error reporting level in the Joomla global options to "maximum", see if it gives you more info. Set the error reporting back how you found it after testing.

-- hugh

 

[DHMG]

This thread has been a great help for my first Ajax-adventure! I got it working, but how would I modify my code to update multiple fields based on the selection of another field?
Here's my code so far:

user_ajax.php

class userAjax {
    function getData(){
        $db =& JFactory::getDBO();
        $retStr = '';
        $identifyElement = JRequest::getVar('identify', '');
        $query = "SELECT `mietpreis` from `fabrikdata_lagerbox` WHERE `id` = '$identifyElement' LIMIT 1";
        $db->setQuery($query);
        $results = $db->loadResult();
        echo $results;
    }
}

1.js

function getInfo(){
    var identify = $('fabrikdata_lagerbox_mieten___box_w_hlen').getValue(); //the watched element
    var update = $('fabrikdata_lagerbox_mieten___monatlicher_mietpreis'); //field to update

    var data = {
        'option'    : 'com_fabrik',
        'format'    : 'raw',
        'task'      : 'plugin.userAjax',
        'method'    : 'getData',
        'identify'    : identify
    };
    new Request({
        'url': '',
        'data': data,
        onComplete:function(r){
            update.value = r;
        }
    }).send();
};