Populate a checkbox element using js and ajax

[ricslabb03]

I have a checkbox that is populated by an external db that is not loaded on fabrik (ie it is not a connection). However, the checkbox requires the id of another element 'emaillist_id' (a dbjoin) in the form to populate itself.

Would it be possible to populate the checkbox from an onchange element js event in the dbjoin using ajax?

Thanks.

 

[ricslabb03]

friendly bump

 

[cheesegrits]

How are you populating it atm? With the eval'ed option in the element settings?

-- hugh

 

[ricslabb03]

I was populating it through a URL parameter that I was passing into an iframe that contained the form.

The checkbox would then use that url parameter to populate itself when the iframe was loaded.

Here is how the eval populate looked:

//$options[] = JHTML::_('select.option', '0', 'Please select' );

if (isset($_GET['eid']))
{
  $bulkid = $_GET['eid'];
  $db = JFactory::getDbo();
  $db->setQuery("SELECT * FROM emaillist WHERE id=".$bulkid);
  $row = $db->LoadObject();
 
  $groupsql = $row->groupsql; // the sql needed to populate the checkbox
  $newdbid = $row->recipientdb; // the db to run the sql in
 
  // connect to external db
  $db->setQuery("SELECT * FROM dbconnections WHERE id=".$newdbid);
  $row = $db->LoadObject();
 
  $option = array(); //prevent problems
  
  $option['driver']   = 'mysql';            // Database driver name
  $option['host']     = $row->host;    // Database host name
  $option['user']     = $row->user;       // User for database authentication
  $option['password'] = $row->password;   // Password for database authentication
  $option['database'] = $row->database;      // Database name
  $option['prefix']   = '';             // Database prefix (may be empty)
  
  $groupdb = JDatabaseDriver::getInstance( $option );
  $groupdb->setQuery($groupsql);
  $rows = $groupdb->loadObjectList();

  foreach ($rows as $row) {
      $options[] = JHTML::_('select.option', $row->id, $row->name);
  }
 
  return $options;
}

So, that was how I was doing it when I was using an iframe. However, we have decided to not use an iframe and rather load the form normally through a fabrik form menu item.

The 'eid' is now selected in form and not passed to the form. That means that I cannot populate the checkbox through the eval populate which only runs on load. And that is why I need to rather populate the checkbox onChange when the eid is selected.

Thanks.

 

[cheesegrits]

Hmmm, ok.

You're pretty much on your own. You can use the "user ajax" method, see ./components/com_fabrik/user_ajax_example.php, create your own function in a user_ajax.php file and call it from a JS event somewhere.

-- hugh

 

[ricslabb03]

No problem, Hugh.

I found a reply by Rob by accident which got me going: http://fabrikar.com/forums/index.ph...e-a-cascading-dropdown-with-2-elements.18728/

I realized that the checkboxes rely heavily on Mootools (duh) so I just had to write some mootools code to populate it with the ajax response. I also took a look at how the checkboxes are formatted in fabrik and produced this code. It is still a work in progress as all checkboxes are in one column, but it is fine for now.

function refreshGroups(elements) {
  var emaillistid = elements.get('send_email___emaillist_id').get('value');
  var url = "index.php?option=com_fabrik&format=raw&task=plugin.userAjax&method=refreshGroups&eid=" + emaillistid;
  new Request({url:url,
    onComplete:function(r){
      var cb = $('send_email___group_id');
      cb.empty();
      opts = JSON.decode(r);
      var i = 0;
      opts.each(function(opt){
        var row = new Element('div', {class: 'row-fluid'});
        var grid = new Element('div', {class: 'fabrikgrid_checkbox span3'});
        var labelClass = 'fabrikgrid_'+opt.id+' checkbox';
        var label = new Element('label', {class: labelClass}).set('text', opt.name);
        var checkName = 'send_email___group_id['+i+']';
        var ch = new Element('input', {type:'checkbox', value:opt.id, name:checkName, class:'fabrikinput'});
        ch.inject(label);
        label.inject(grid);
        grid.inject(row);
        row.inject(cb);
        i++;
      }.bind(this));
    }
  }).send();
}

It's obviously a bit manual for my liking, but I am happy with it for now.

 

[cheesegrits]

There's nothing Mootools specific about it, it's just creating DOM elements. That post you found just happens to be old enough that it's pre J!'s adoption of jQuery You could use jQuery or native JavaScript to create the DOM structures you need.

-- hugh