Use a trigger to evaluate xQuery and use return inside HTML page in eXistDB

Question

I’d like to use a Button/link/whatever to call a xQuery function from my eXist Webapp and use the returned value to display a Bootstrap alert. So include a

<button type="button" class="btn btn-danger btn-circle">execute xQuery</button>

inside my html and if it’s clicked evaluate

let $name := "Peter"
return <div class="alert alert-success" role="alert">Hi {$name}</div>

(actually I want something more complex than this, but you get the idea..)

and return

<div class="alert alert-success" role="alert">Hi Peter</div>

inside my Page. Is this possible and if, how?

Using the Templating System does not help me here and just linking to an xQuery in my Database executes the query but redirects to another page showing the result. Can I use AJAX to evaluate the xQuery and modify the current DOM?

Thanks!

For an example of this in action, see exist-db.org/exist/apps/demo/examples/basic/hello.html. The source code is at github.com/eXist-db/demo-apps. — Joe Wicentowski
Thanks, but I don’t understand how the result is written in the output div or how the button connects with the query at all... Moreover I would like to have a fixed query in my module an call it by pressing a button. — karkraeg
The "Run" button submits an HTTP POST request to eXist's REST server, containing the query to be executed in the request body. To call a fixed query, you would simply submit an HTTP GET request to the URL where your query is stored in the database. All that remains is a matter of javascript - which is not an eXist or XQuery-specific question. But the demo app I linked to does demonstrate this in action; see esp. github.com/eXist-db/demo-apps/blob/master/resources/scripts/…. — Joe Wicentowski
ah! I feel kinda dumb right now. I thought it was pure Xquery, thanks for the link, now I know how to do it. — karkraeg

karkraeg karkraeg · Accepted Answer · 2019-10-08T06:54:39

For reasons of completeness and future reference I will post a MWE of this here:

Add a Button and a result panel to a page in eXist:

<a class="btn btn-danger run" id="path/to/the/xquery/in_your_app.xq" href="#">
   <i class="glyphicon glyphicon-play" /> Run xQuery
</a>
<img class="load-indicator" src="resources/img/ajax-loader.gif" />
<div style="margin-top: 12pt;" class="output" />

Have a runxquery.js in your apps’ resources folder and reference it in your page.html:

$(document).ready(function() {
    $(".run").click(function(ev) {
        ev.preventDefault();
        file = this.id;
        var output = $(this).parent().parent().find(".output");
        var indicator = $(this).parent().parent().find(".load-indicator");
        function run() {
            indicator.show();
            output.hide();
            $.ajax({
                url: "/exist/rest/db/apps/yourapp/" + file,
                type: "GET",
                success: function(result) {
                    indicator.hide();
                    output.html(result);
                    output.slideDown(600);
                }
            });
        }

        if (output.is(":empty")) {
            run();
        } else {
            output.slideUp(800, function() {
                output.empty();
                run();
            });
        }
    });
});

Clicking the Button will trigger the xquery defined in the id of the button inside your apps folder.
If running the xQuery should return HTML Code, you need to specify this in the xQuery:

declare namespace output = "http://www.w3.org/2010/xslt-xquery-serialization";
declare option output:method "html";
declare option output:media-type "application/html";

let $text := "This is the alert text"

return 
<div class="alert alert-success alert-dismissible" data-dismiss="alert" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"/>
   {$text}
</div>

Use a trigger to evaluate xQuery and use return inside HTML page in eXistDB

1 Answers