There are a few quirks with the add/delete button group for adding or removing repeat groups in a form.
I have a form that has almost 90 elements in joined repeat group. Not all elements are displayed at the same time - usually about 20 or so, depending on the 'facility type' selected (see attachment). The form_xx.js file does the processing to determine what elements are to be shown for the selected facility type (among other things), and that code can take as long as 5 seconds to complete.
What has always irked me is that a spinner does not show immediately when the Add button is clicked. To compound the issue and frustration - if you aren't careful to be sure you don't move the mouse while clicking the Add (+) button, the button will be dragged out of place while the mouse button is down - and then, when you release the button nothing happens at all.
When an attempt to click the add+ button does 'take', I takes over 5 seconds to render the new repeat group. I suppose that is because the repeat groups are not cloned and all 90 elements in the group need to be reset to default values when a repeat group is created. But because that drag/drop issue can happen without even really noticing it (the average end-user really has no idea what just happened) - it's hard to know if you actually clicked the add button or not. (Or did you just drag and release the icon/button with no 'click' function triggered???) Sometimes it will take a user 2 or 3 tries.
Javascript and Ajax are not my forte' (I just learned how to use the 'User Ajax' feature last week) - else I'd try to figure out a permanent solution on my own. The big thing would be to display the spinner as the very first thing when the add button is clicked - so that at least you know the ajax is working.
Today I found a simple temporary fix for the drag/drop issue until someone who knows what they're doing with that code can fix the buttons so they are not draggable. (I figure that while I'm whining about all this, I could at least pass on a quick hack fix for the drag/drop issue. )
Another minor issue is that the dimming (opacity) is not being reset. If you look at my attachment (repeatGroups.PNG) you'll see that the 'Breakout' group (named h4 Nursing - Breakout 2) that contains the add+ button that I clicked to trigger the add event gets its opacity reset correctly. The rest remained dim.
BTW - If anyone's confused by that template - it's just a slightly tweaked 'bootstrap_tabs' template, where I eliminated the 'checkerboard' table look that comes with fixed widths and allow the elements to display right after each other as fluid inline-blocks. I also added another div between the fabrikSubGroup and the fabrikSubGroupElements div to act as a header that could be used to hold the 'Breakout' name of that repeat group and act as a link to toggle display of the fabrikSubGroupElements (form).
I have a form that has almost 90 elements in joined repeat group. Not all elements are displayed at the same time - usually about 20 or so, depending on the 'facility type' selected (see attachment). The form_xx.js file does the processing to determine what elements are to be shown for the selected facility type (among other things), and that code can take as long as 5 seconds to complete.
What has always irked me is that a spinner does not show immediately when the Add button is clicked. To compound the issue and frustration - if you aren't careful to be sure you don't move the mouse while clicking the Add (+) button, the button will be dragged out of place while the mouse button is down - and then, when you release the button nothing happens at all.
When an attempt to click the add+ button does 'take', I takes over 5 seconds to render the new repeat group. I suppose that is because the repeat groups are not cloned and all 90 elements in the group need to be reset to default values when a repeat group is created. But because that drag/drop issue can happen without even really noticing it (the average end-user really has no idea what just happened) - it's hard to know if you actually clicked the add button or not. (Or did you just drag and release the icon/button with no 'click' function triggered???) Sometimes it will take a user 2 or 3 tries.
Javascript and Ajax are not my forte' (I just learned how to use the 'User Ajax' feature last week) - else I'd try to figure out a permanent solution on my own. The big thing would be to display the spinner as the very first thing when the add button is clicked - so that at least you know the ajax is working.
Today I found a simple temporary fix for the drag/drop issue until someone who knows what they're doing with that code can fix the buttons so they are not draggable. (I figure that while I'm whining about all this, I could at least pass on a quick hack fix for the drag/drop issue. )
Code:
/// Prevent drag of hyperlink object/image (i.e. add/delete button) when clicked ///
jQuery(document).on("dragstart", function(event) {
if (event.target.tagName.toLowerCase() === "a") {
event.preventDefault();
}
});Another minor issue is that the dimming (opacity) is not being reset. If you look at my attachment (repeatGroups.PNG) you'll see that the 'Breakout' group (named h4 Nursing - Breakout 2) that contains the add+ button that I clicked to trigger the add event gets its opacity reset correctly. The rest remained dim.
BTW - If anyone's confused by that template - it's just a slightly tweaked 'bootstrap_tabs' template, where I eliminated the 'checkerboard' table look that comes with fixed widths and allow the elements to display right after each other as fluid inline-blocks. I also added another div between the fabrikSubGroup and the fabrikSubGroupElements div to act as a header that could be used to hold the 'Breakout' name of that repeat group and act as a link to toggle display of the fabrikSubGroupElements (form).