We have now opened a commercial services section here on the forum for registered users. If you have a Fabrik project that you wish to have someone work on for you, post it under Help Wanted. If you are an application developer and wish to earn some money helping others, post your details under Fabrik Application Developers.
Both of these are unmoderated. It will be up to both parties to work out the details and come to an agreement.
For running J!5.1 you must https://fabrikar.com/forums/index.php?wiki/update-from-github/ or include the new file manually https://fabrikar.com/forums/index.php?threads/joomla-5-1-and-fabrik-cannot-find-files-error.54473/post-285151 See also Announcements
requirejs(['fab/fabrik'], function() {
Fabrik.addEvent('fabrik.list.loaded', function(list) {
var data = list.Options.data;
// data is an array of Groups, each group is an object of rows, each row has a data object, each data object has a __pk_val item which will have the row id
data.each(function (group) {
group.each(function (row) {
// do whatever you need with row.data.__pk_val
console.log(row.data.__pk_val);
});
});
});
});
requirejs(['fab/fabrik'], function () {
Fabrik.addEvent('fabrik.list.order', function(list, orderBy, orderDir){
alert('aha! list' + list.id + ' was ordered ' + orderBy + ' ' + orderDir); }); // Ran for each list on page
if (list.id == 165) {
alert('Only run this for list 165');
}
});
requirejs(['fab/fabrik'], function () {
// An edit window has been closed
Fabrik.addEvent('fabrik.list.row.edit.close', function (listRef, rowid, k) {
// Update the Lists data
Fabrik.getBlock(listRef).updateRows();
});
});
/*
* Creates Fixed table headers and footer in a Fabrik list using the default Bootstrap template.
* How to use:
* 1 Open or create the list_#.js file for the list that contains the table you want to have fixed headers
* 2 Include a call to setHeaders() at the end of the requirejs(['fab/fabrik'] function (as shown below)
* 3 Copy the jQuery(window).scroll(function(event) and function setHeaders() code into that js file
* ( For a default Joomla protostar template using the default Fabrik Bootstrap list template
you can skip steps 4-7 and just replace all instances of '260' in this code with your List id.)
* 4 Examine the page html and identify the id used for the form object
* 5 Replace all instances of "listform_260_com_fabrik_260" with that form id
* 6 Examine the page html and identify the id for the table object
* 7 Replace all instances of "list_260_com_fabrik_260" with that table id
* 8 Take note of any remarks in code beginning with /*** for additional Options/settings.
* Enjoy your 'fixed header'!
* NOTE: It may be necessary to include the setHeaders() call in another fabrik *.js file instead
* - i.e. if you are also using a Fabrik list or Form module on the same page which might affect when this list is shown.
*/
requirejs(['fab/fabrik'], function () {
setHeaders();
});
/* this function checks if passed jQuery object is in viewport of browser */
jQuery.fn.inView = function(){
//Window Object
var win = jQuery(window);
//Object to Check
obj = jQuery(this);
//the top Scroll Position in the page
var scrollPosition = win.scrollTop();
//the end of the visible area in the page, starting from the scroll position
var visibleArea = win.scrollTop() + win.height();
//the end of the object to check
var objEndPos = (obj.offset().top + obj.outerHeight());
return(visibleArea >= objEndPos && scrollPosition <= objEndPos ? true : false)
};
/* The scroll event listener */
jQuery(window).scroll(function(event){
/* Get the current table vertical position as page is scrolled */
window.tableFromTop = window.thisTable.getBoundingClientRect().top + window.pageYOffset;
/* Get the vertical scroll position of entire document */
var tgBodyTop = jQuery(window).scrollTop();
/* Get the horizontal scroll position of entire document */
var tgBodyLeft = document.getElementById("list_260_com_fabrik_260").offsetLeft - jQuery(window).scrollLeft();
/* detach/attach table header */
if(tgBodyTop > window.tableFromTop) {
if(jQuery("#listform_260_com_fabrik_260 div.fabrikDataContainer table.temptable").length==0){
var temphead = jQuery("table#list_260_com_fabrik_260 thead").clone();
jQuery(temphead).prop('id','temphead');
/* Create fixed header */
var tableclasses = document.getElementById("list_260_com_fabrik_260").className;
/* The z-index may have to be set higher if the fixed header is not 'on top' */
jQuery("#listform_260_com_fabrik_260 div.fabrikDataContainer").prepend('<table class="'+tableclasses+' temptable" style="width:'+window.tablewidth+'px;z-index:1"><thead>'+jQuery(temphead).html()+'</thead></table>');
/* Note: Set the "top:" fixed position for table header in function setHeaders() */
jQuery("table.temptable").css({"position":"fixed","top":window.fixedMenuHeight+"px","left":tgBodyLeft+"px"});
}
}else{
if(jQuery("#listform_260_com_fabrik_260 div.fabrikDataContainer table.temptable").length){
jQuery("#listform_260_com_fabrik_260 div.fabrikDataContainer table.temptable").remove();
}
}
/*** Remove this section to not process detach/attach table footer ***/
if(jQuery("#bottdiv").inView() == true || tgBodyTop+window.viewHeight < window.tableFromTop+window.theadHeight+window.tfootHeight+1) {
/* Un-dock footer if table is outside viewport or normal footer would already be in viewport */
jQuery(".docked").css({"position":"","bottom":"","width":"","display":""});
jQuery(".docked").removeClass();
}else{
/* Dock the footer if table is in viewport and normal footer is outside of viewport */
if(tgBodyTop+window.viewHeight-window.theadHeight-window.tfootHeight > window.tableFromTop) {
jQuery("#list_260_com_fabrik_260 tfoot").addClass("docked");
/* May need to increase z-index value if any list Elements overlay footer when scrolled */
jQuery(".docked").css({"position":"fixed","bottom":"0px","left":tgBodyLeft+"px","width":window.tablewidth+"px","display":"inherit","z-index":"1"});
}
}
});
/* Reset the fixed headers if window gets resized */
jQuery( window ).resize(function() {
setHeaders();
});
/* main function call for fixed headers/footer -
call this function as the last line in the requirejs(['fab/fabrik'], function () */
function setHeaders() {
/*** Set window.fixedMenuHeight to the height of fixed page header/menu - 0 if none) ***/
window.fixedMenuHeight = 34;
/* clear settings if any are set */
jQuery("#list_260_com_fabrik_260 tfoot").removeClass("docked");
jQuery("#listform_260_com_fabrik_260 div.fabrikDataContainer table.temptable").remove();
jQuery("#bottdiv").remove();
/* initialize window variables */
window.thisTable = document.getElementById("list_260_com_fabrik_260");
window.tableFromTop = window.thisTable.getBoundingClientRect().top + window.pageYOffset;
window.theadHeight = document.getElementById("list_260_com_fabrik_260").getElementsByTagName('thead')[0].clientHeight;
window.tfootHeight = document.getElementById("list_260_com_fabrik_260").getElementsByTagName('tfoot')[0].clientHeight;
window.viewHeight = jQuery(window).height();
/* Create an empty div to identify the bottom of the table view, where the footer would normally be */
jQuery(jQuery("<div>",{id:"bottdiv"})).appendTo("#listform_260_com_fabrik_260 div.fabrikDataContainer");
/* initializes vars for css styling of each table header (th) - width, padding */
window.tablewidth = document.getElementById("list_260_com_fabrik_260").clientWidth;
var xwidth,xpad;
// sets width and padding of each column as css style so cloned header will have it
jQuery("table#list_260_com_fabrik_260 thead tr th").each(function (){
xwidth = jQuery(this).width();
xpad = jQuery(this).css('padding');
jQuery(this).css({'width':xwidth+'px','padding':xpad});
});
/*** Note each remark for scrollTop Options. ***/
/* This topPos value would scroll to the top of the list form */
// var topPos = document.getElementById("listform_260_com_fabrik_260").getBoundingClientRect().top + window.pageYOffset - window.fixedMenuHeight ;
/* This topPos value would scroll to the top of the table */
// var topPos = document.getElementById("list_260_com_fabrik_260").getBoundingClientRect().top + window.pageYOffset - window.fixedMenuHeight ;
/* If you have included a page class in the menu this would scroll to the top of the page (replace "onlinesurvey" with your page class name) */
var topPos = document.getElementsByClassName("onlinesurvey")[0].getBoundingClientRect().top + window.pageYOffset - window.fixedMenuHeight;
/*** Remark out the next line or remove this section if you don't want to scroll to the list/table/page on page load ***/
jQuery("html, body").animate({ scrollTop: topPos });
}