1. Important notice about Cloudbleed - if your site uses the Cloudflare CDN, and you intend to follow the Joomla security team's advice to change your site "secret", you MUST READ THIS NOTICE.
  2. Fabrik 3.6 Released Remember to backup and test your backup before proceeding with this update. Please report any problems you might experience with this new version here on the forum. You are safe to upgrade to Joomla! 3.7 and PHP 7.x with this version of Fabrik. View the blog for more details on this release.

Populate a checkbox element using js and ajax

Discussion in 'Community' started by ricslabb03, Jun 13, 2017.

  1. ricslabb03

    ricslabb03 Member

    Level: Community
    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.
     
  2. ricslabb03

    ricslabb03 Member

    Level: Community
    friendly bump
     
  3. cheesegrits

    cheesegrits Support Gopher Staff Member

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

    -- hugh
     
  4. ricslabb03

    ricslabb03 Member

    Level: Community
    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:

    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.
     
  5. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Supporter
    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
     
  6. ricslabb03

    ricslabb03 Member

    Level: Community
    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.

    Code (Javascript):
    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. ;):)
     
  7. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Supporter
    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
     

Share This Page