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: Professional
    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: Professional
    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: Professional
    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