1. Fabrik 3.8.1 has been released. It is mostly bug fixes and feature enhancements, but does include two new plugins (push notifications, and the sequence element). As usual we strongly recommend testing the new release on a sandbox if your application is mission critical, and always do an Akeeba backup before updating.

Javascript list plugin (+)

May 19, 2018 at 6:18 PM
Javascript list plugin (+)
  • This plugin attaches javascript to a button when viewing list data. There will be a button added for each list item and another on the top row to process all items. The javascript needs to determine which row was clicked via the ids var ids which will be an array of the checked row ids. If you simply click a single button on a row it will be an array of one row id.


    • Button label - Button label
    • Button image-
    • JavaScript file - File to run, located in plugins/fabrik_list/js/scripts. Set 'statusMsg' to return a status message which will override any static message configured below.
    • JavaScript Code - If no file selected then the JavaScript code entered here will be evaluated. Set 'statusMsg' to return a status message which will override any static message configured below.
    • Success message

    Notes (top)

    A couple of useful variables: (top)

    Code (Javascript):

    console.log(ids); //outputs an array of the selected row ids
    console.log(rows); // outputs a object key'ed on the selected row ids, each value is an object containing the row data.

    Accessing list data (top)

    You can get at the selected row data by iterating through the 'rows' variable:

    Code (Text):

    jQuery.each(rows, function(rowid, row) {
       // echo the value of yourtable___yourelement to the console
    You can get at the whole list's data through the list objects 'data' option. First you need to get at the main Fabrik "block" for the list ...

    Code (Text):
    var listdata = Fabrik.getBlock('list_123').options.data
    ... would get you the main data object (replace 123 with your list's numeric ID).

    That data is then grouped, according to your list's current display grouping, using sequentially numbered indexes starting at 0 for each group.

    If your display is not grouped, it'll all be in listdata[0]. Which is then indexed by row number (not PK value, just the sequential display count, starting at 0). And that then contains another 'data' object, which has all the element values in it. So if you wanted to get the value of 'yourtable___yourelement' in the third row of the first (or only group) ...

    Code (Text):
    var myelement = listdata[0][2] .data.yourtable___yourelement;
    Note that this will give you the "formatted" value, so (for example) if you that element as a detail view link, the above code will give you the data with the A tag round it. If you just want the raw, unformtted data, just append _raw to the element name (yourtable___yourelement_raw).

    And of course you can iterate through the data object, or otherwise do with it what you need to, using standard JS.
  • Loading...