...
Section | |||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||
Below this text is the HTML-Code to be transcluded to provide a filter for a display table macro using the remote controlled feature. The javascript code uses the variable Morover two more variables have to be set to provide options for a dropdown. Full example replacement to put in transclusion box to disable the dropdown: tableid=fitered datalistselects=<datalist id="selects"></datalist> Full example replacement to put in transclusion box to set values for the dropdowns: tableid=filtered datalistselects=<datalist id="selects"><option value="Name">Name only</option><option value="Name, Short Description, Iteration">With Iteration</option></datalist>
|
HTML |
---|
<form id="filterForm${tableid}" action=""> <label for="select">select:</label> <input id="filterSelect${tableid}" size="50" type="text" list="selects${tableid}" name="select" autocomplete="on"> ${datalistselects} <label for="where">where:</label> <input id="filterWhere${tableid}" size="50" type="text" list="wheres${tableid}" name="where" autocomplete="on"> ${datalistwheres} <input type="submit" value="Submit"> <input type="reset" value="Reset"> </form> <script> AJS.toInit( function() { const logToConsole = false; if (logToConsole) AJS.log("[copy-page-id] Registering action 'Copy Page ID to Clipboard' to keydown 'p'..."); console.debug('${datalistselects}') function appendToQueryString(queryString, queryParam) { if (queryString.trim()) { queryString = queryString + "&" + queryParam; } else { queryString = "?" + queryParam; } return queryString; }; var urlParams = new URLSearchParams(window.location.search); var originalSelect = urlParams.get('${tableid}:select'); var originalWhere = urlParams.get('${tableid}customWhere'); var initialWhere = urlParams.get('${tableid}initialWhere'); console.debug("From Queryparam : initial where is: " + initialWhere); var oldQueryParams = "" urlParams.forEach(function(value, key) { if (!key.startsWith("${tableid}")) { oldQueryParams = appendToQueryString(oldQueryParams, key + "=" + encodeURI(value)); } }); if (typeof initialWhere == 'undefined' || initialWhere == null) { console.debug("Check 1 a: initial where is empty"); if (initialWhere == originalWhere) { console.debug("In Check 1 b : initial where is: " + initialWhere); console.debug("In Check 1 b : original where is: " + originalWhere); } else { initialWhere = $('#${tableid} table').attr('data-projectdoc-query-where'); console.debug("In Check 1 c: initial where is: " + initialWhere); console.debug("In Check 1 c : original where is: " + originalWhere); } if (typeof initialWhere == 'undefined' || initialWhere == null) { console.debug("Check 1 : initial is set to empty string."); initialWhere = null; console.debug("In Check 1/1 : initial where is: " + initialWhere); } } else { console.debug("Check 1 : initial where is not empty"); console.debug("In Check 1 : initial where is: " + initialWhere); } $('#filterForm${tableid} datalist').attr('id', function(index, id) { return id + "${tableid}"; }) $("#filterSelect${tableid}").val(originalSelect); $("#filterWhere${tableid}").val(originalWhere); $('#filterForm${tableid}').submit(function(evt) { evt.preventDefault(); var tableId = "${tableid}"; var $select = $('#filterSelect${tableid}').val(); var $where = $('#filterWhere${tableid}').val(); var $queryString = ""; if (oldQueryParams.trim()) { $queryString = appendToQueryString($queryString, oldQueryParams.substr(1)); } if (typeof initialWhere == 'undefined' || initialWhere == null) { console.debug("Check 2 : initial where is empty"); } else { console.debug("Check 2 : initial where is not empty"); if (initialWhere == originalWhere) { console.debug("In Check 2 b : initial where is: " + initialWhere); console.debug("In Check 2 b : original where is: " + originalWhere); } else { $queryString = appendToQueryString($queryString, "${tableid}initialWhere=" + encodeURI(initialWhere)); console.debug("In Check 2 c: initial where is: " + initialWhere); console.debug("In Check 2 c : original where is: " + originalWhere); } console.debug("In Check 2 : initial where is: " + initialWhere); console.debug("In Check 2 : querystring is: " + $queryString); } if ($select.trim()) { var $encodedSelect = encodeURI($select); var $selectQueryParam = tableId + ":" + "select" + "=" + $encodedSelect; $queryString = appendToQueryString($queryString, $selectQueryParam); } if ($where.trim()) { var $encodedCustomWhere = encodeURI($where); var $customWhereQueryParam = "${tableid}customWhere" + "=" + $encodedCustomWhere; var $encodedWhere = ""; if (typeof initialWhere == 'undefined' || initialWhere == null) { console.debug("Check 3 : initial where is empty"); $encodedWhere = encodeURI($where); } else { console.debug("Check 3 : initial where is not empty"); $encodedWhere = encodeURI(initialWhere + " AND " + $where); } var $whereQueryParam = tableId + ":" + "where" + "=" + $encodedWhere; $queryString = appendToQueryString($queryString, $whereQueryParam); $queryString = appendToQueryString($queryString, $customWhereQueryParam); } $action = window.location.href.split('?')[0] + $queryString; $('#filterForm').attr('action', $action); console.debug($action); window.location.href = $action; }); } ) </script> |
Section | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
|
...