Hi Dan,
I tried to reproduce your issue with the MySQL Sample World DB:
image2016-9-10 12:8:40.png
It should come very close to your scenario. I did it this way:
- select box for distinct languages
- select box for countries that changes when language in (1) is changed
- main table that queries the two tables with country and language as parameters
I have 3 queries:
1) Languages:
SELECT DISTINCT Language
FROM CountryLanguage
ORDER BY Language ASC
2) Countries:
SELECT Name as Country
FROM Country, CountryLanguage
WHERE Country.Code = CountryLanguage.CountryCode
AND Language = :Language
ORDER BY Name ASC
3) CountryByNameAndLanguage
SELECT Name, Language
FROM Country, CountryLanguage
WHERE Country.Code = CountryLanguage.CountryCode
AND Name = :Country
AND Language = :Language
Now comes the tricky part. All three macros in one page or one macro renders other macros from within its template? There are different ways you can achieve what you want. Each requires programming with Velocity and JS.
I used this approach: the template for the Languages query is the master and renders the two other queries. Also, I created a separate FormTemplate that is used by Languages AND Countries so we have no duplicate code. This template is included in the other templates with $PocketQuery.template("FormTemplate"). Before it is included, parameters must be set. See my following examples. The query CountryByNameAndLanguage uses the default template.
These are my templates...
FormTemplate (not used directly by any query, but included with $PocketQuery.template)
#set($pqTypeLower = $pqType.toLowerCase())
<form id="form-$pqTypeLower" class="aui">
<div class="field-group">
<label for="select-$pqTypeLower">Choose $pqType:</label>
<select class="select" id="select-$pqTypeLower" name="select-$pqTypeLower">
#foreach ($row in $result)
<option value="$row.get($pqType)" #if($row.get($pqType) == $queryParameters.get($pqType) || $row.get($pqType) == $pqInitialValue)selected="selected"#end>$row.get($pqType)</option>
#end
</select>
</div>
</form>LanguagesSelect (used by Languages query)
#set($pqType = "Language")
#set($pqInitialValue = "Swedish")
$PocketQuery.template("FormTemplate")
$PocketQuery.renderPocketQueryMacro("Countries", {
"page": $page,
"parameters": {"Language":"Swedish"},
"dynamicload": "true"
})
$PocketQuery.renderPocketQueryMacro("CountryByNameAndLanguage", {
"page": $page,
"parameters": {"Country":"Sweden", "Language":"Swedish"},
"dynamicload": "true"
})
<script>
(function() {
function reload(queryName, queryParameters) {
var container = $('.pocketquery-dynamic-load[data-query="'+queryName+'"]');
var dataIndex = container.data('index');
var data = PocketQuery.getDynamicLoadData(dataIndex);
data.queryParameters = queryParameters;
PocketQuery.load({
container: container,
data: data
});
}
$('.pocketquery-result').on('change', '#select-language', function() {
var queryParameters = { Language: $('#select-language').val() };
reload('Countries', queryParameters);
});
$('.pocketquery-result').on('change', '#select-country', function() {
var queryParameters = { Language: $('#select-language').val(), Country: $('#select-country').val() };
reload('CountryByNameAndLanguage', queryParameters);
});
}());
</script>CountriesSelect (used by Countries query)
#set($pqType = "Country")
#set($pqInitialValue = "Sweden")
$PocketQuery.template("FormTemplate")
<script>
// trigger a change manually every time the query was loaded, so the
// listener for the third query will trigger as if the select box were
// changed by hand
$("#select-country").change();
</script>In my Confluence page I simply have a single macro for the Languages query. It looks like in .
I know this looks quite complex, but once you got the gist of how templating with PocketQuery works, I think you will understand.
Let me know if this helps and if you have further questions.
Regards, Felix
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.