databasejoin Element in Repeating Group

[talkinggoat]

I am creating a library for our nonprofit, so that people can check out literature and we can know who has what. I have everything created, except the log that keeps track of who has checked out an item, the date, condition and notes. The group has a databasejoin dropdown that accesses usernames. This works on the initial group. The group will repeat all the elements, but on subsequent repeats, the databasejoin element does not dropdown.

Here is the rough layout of the lists:

The checkout list is a left join to the library list. We get the usernames by the databasejoin element, which lives in the Checkout list. When I click the + to duplicate the group and save the form, it creates a new entry in the Checkout list, but the Username is missing.

Anyone know what I might be doing wrong?

 

[talkinggoat]

Update: It looks like there is something gong on with the JS/Jquery. This works when I set it up on the Protostar template, but not our Monster template... but there are no JS errors. The chzn (chosen loader) onclick elements aren't getting assigned. The data is there, but the JS is not working. The Chosen file that's being loaded is in /media/jui/js/chosen.js.min, somewhere around line 598 and it looks like that file controls all the functions. Is this the normal location or is it in conflict with a Fabrik version somewhere else?

 

[talkinggoat]

Update: Update: I did a little more digging and found that /media/jui/js/chosen.js.min is not loaded in Protostar.

/media/com_fabrik/js/dist/element.js
and
/media/com_fabrik/js/dist/chosen-loader.js
are the only two JS/Jquery files that are loaded, which contain "chzn" The rest of the files are CSS.

It looks like chosen.js.min is adding DOM elements under the dropdown. In our case, this is helpful because Chosen adds a search box to avoid having to scroll through the huge list of usernames, which I've omitted:

<div class="fabrikElement">
        <select id="library_owner___checked_out_by_3" name="library_owner___checked_out_by[3][]" class="fabrikinput form-control inputbox input  input-large" size="1" style="">
            <option value="">Please select</option>
            <option value="">&nbsp;</option>
[...]
<div class="chzn-container chzn-container-single" style="width: 210px;" title="" id="library_owner___checked_out_by_0_chzn">
    <a class="chzn-single">
        <span>Jon Snow</span>
        <div>
            <b></b>
        </div>
    </a>
        <div class="chzn-drop">
            <div class="chzn-search">
                <input type="text" autocomplete="off">
             </div>
             <ul class="chzn-results">
                 [Normally, the list of users would be generated here, but it's not getting made, for some reason.]
                 [It would copy the options list, from above.]
                 <li class="active-result" data-option-array-index="0" style="">Please select</li>
                 <li class="active-result" data-option-array-index="1" style="">&nbsp;</li>
                 [...]
             </ul>
         </div>
     </div>

The reason the drop-down isn't working is because the list isn't being copied from the DOM element, generating the list item, when I click the + icon for the group. I know this may not strictly be a Fabrik issue, but it would be helpful for anyone using the Chosen script. Can anyone with JS/Jquery experience put some eyes on the script? It looks like it's the function - Chosen.prototype.set_up_html = function()...

https://tritonrelief.org/media/jui/js/chosen.jquery.min.js

Latest version of Chosen:
https://harvesthq.github.io/chosen/

 

[cheesegrits]

Works for me when adding repeat groups. The 'chosen' is re-applied in the main element class cloned() method:

https://github.com/Fabrik/fabrik/blob/master/media/com_fabrik/js/element.js#L447

... which is called for every element in a group, when a new repeat is added. We check to see if the element is a clone of an initialized chosen menu (has 'chzn-done' class), and if so we destroy the original chosen stuff (which will now have incorrect ids, etc), re-apply chosen() to the select, and bind the element's change event to it.

-- hugh

 

[cheesegrits]

Maybe your template JS is removing the chzn-done class?

-- hugh