Page History

<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() {
        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>