Dynamically show previous/next div with XQuery - recursion? - html

Question

knowing community,
I want to achieve the following in short: I have a XML-file with listed pizzas inside of it (it is a kind of test file). My page has a select menu from which a user choses one pizza and the pizza size, which is then both displayed below. The content will only show up after the user has chosen. This is the function:
declare function app:showpizza2($node as node(), $model as map(*)){
let $pizza1 := request:get-parameter('selectMenu1', '')
let $size1 := request:get-parameter('size1', '')
return
for $pizza in $app:pizza//pizza
where $pizza/#id eq $pizza1
let $id := $pizza/#id
return
(<a data-key="{ $id }" class="person"><div>{ $pizza1 }</div></a>,
<div>{ $size1 }</div>)
};
With a second function I now want to build previous/next buttons which take the current shown pizza, find it inside of the XML tree and then go one step further up or down. So far I am able to show one pizza above or below with these lines:
declare function app:previousPizza($node as node(), $model as map(*)){
let $pizza1 := request:get-parameter('selectMenu1', '')
return
for $pizza in $app:pizza//pizza
where $pizza/#id eq $pizza1
let $previousPizza := $pizza/preceding::pizza[1]
return
<p>{ $previousPizza }</p>
};
The problem of course is that as a "current pizza parameter" I only take the user-chosen value from the select menu. So I guess this is a typical recursion problem because I want to have a function which always takes the current parameter after clicking on a button but I kind of really have no idea how to achieve this. Can you help out?
This is my html-file where I call these functions:
<div class="row">
<div class="col-sm-4">
<!-- form for choosing pizza -->
<form action="?">
<!-- select Pizza type -->
<select name="selectMenu1" id="pizzamenu1"
data-placeholder="Pizza wählen" style="width:150px">
<option value=""></option>
<option value="pizza1">Pizza 1</option>
<option value="pizza2">Pizza 2</option>
<option value="pizza3">Pizza 3</option>
</select>
<!-- select pizza size -->
<select name="size1" data-placeholder="Größe wählen"
style="width:150px;" onchange="this.form.submit()">
<option value=""></option>
<option value="family">Familien Pizza</option>
<option value="medium">Mittel Pizza</option>
<option value="small">Kleine Pizza</option>
</select>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<!-- showpizza2 returns chosen pizza from select menu -->
<div data-template="app:showpizza2"/>
<!-- Show previous pizza -->
<div data-template="app:previousPizza"/>
</div>
</div>
Thanks.

Answer 1

Since the value of the user-selected pizza comes from the html list, it is in $model. Your Xquery function for the next/prev buttons should access the $model to start where you want to.
We would need to see how you call the xquery modules in your .html files, to give you a working code sample. But the problems you describe are likely originating there.
See the documentation for Using the Model to Keep Application Data