Execution of xquery function in exist-db after pressing a button

Question

Starting from the following HTML code, which generates 2 select boxes and a submit button I could not succeed to launch the app:series_por_canal AFTER pressing the search button.

I have replaced the original xquery function by a simple "hello" example because the effect is the same..

<div xmlns="http://www.w3.org/1999/xhtml" data-template="templates:surround" data-template-with="templates/page_pru.html" data-template-at="content">
    <form>
        <fieldset>
            <legend>Análisis de series:</legend>
            <div class="form-group" data-toggle="tooltip" data-placement="left" title="Nombre de canal"> 
                <div id="col-md-12 col-xs-12">
                    <span class="app:Lista_canales"/>
                </div>
            </div>
            <div class="form-group" data-toggle="tooltip" data-placement="left" title="Potential Issues">
                <div id="col-md-12 col-xs-12">
                    <span class="app:Lista_problemas"/>
                </div>
            </div>
            <button id="f-btn-search" type="submit" class="btn btn-primary" action="app:dumb_example">
                Search
            </button>
           <!-- <div id="results" class="app:dumb_example"/> -->
        </fieldset>
    </form>
</div>

the xquery function now is:

declare function app:dumb_example($node as node(), $model as map(*)) {
let $name:="John Smith"
return
    <p>Hello {$name}!</p>

};

This is a snapshot of my output after entering the page:

After making my selection on the 2 boxes and pressing the search button nothing happens (no error either), seems as if the action attribute is not valid to launch an xQuery.... if that is the case, what are the alternatives to do this?

Uncommenting the row where series_por_canal is called with class attribute it works, but running the query in parallel instead of after pressing the button. In this case I can live with that (with no parameters selected the output table will be empty as shown in the snapshots below) but would anyway like to understand how to run a xquery function after pressing a form button.

Thanks in advance for your advice....

This is the page.html:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta data-template="config:app-meta"/>
    <link rel="stylesheet" type="text/css" href="/exist/apps/analisis-programacion/resources/css/exist.css"/>
 <!--   <link rel="stylesheet" type="text/css" href="/exist/apps/analisis-programacion/resources/css/style.css"/> -->
    <script type="text/javascript" src="$shared/resources/scripts/jquery/jquery-1.7.1.min.js"/>
   <script type="text/javascript" src="$shared/resources/scripts/bootstrap.min.js"/>
  <!--  <script type="text/javascript" src="$shared/resources/scripts/loadsource.js"/>-->

   <!-- <title data-template="config:app-title">App Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> -->

</head>

   <body id="grey-top">
    <div class="grey-bot">
        <div class="container-fluid" id="main-container">
            <div class="row-fluid">
                <div class="span12" id="header">
                    <img src="/exist/apps/analisis-programacion/resources/images/Logo.png"/>
                </div>
            </div>
            <div class="row-fluid">
                <div class="navbar">
                    <div class="navbar-inner">
                        <div class="container">
                            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                                <span class="icon-bar"/>
                                <span class="icon-bar"/>
                                <span class="icon-bar"/>
                            </a>
                            <div class="nav-collapse collapse">
                                <ul class="nav">
                                    <li class="dropdown" id="about">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home</a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="index.html">Start page</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="dropdown" id="about">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Reports</a>
                                            <ul class="dropdown-menu">
                                            <li>
                                                <a href="/exist/apps/analisis-programacion/views/reports/prg_level_01.html">Series por canal</a>
                                            </li>
                                            <li>
                                                <a href="/exist/apps/analisis-programacion/views/reports/prg_level_02.html">Masters duplicados</a>
                                            </li>  
                                            <li>
                                                <a href="/exist/apps/analisis-programacion/views/reports/prg_level_03.html">Series programadas</a>
                                            </li>               
                                        </ul>
                                    </li>
                                    <li class="dropdown" id="about">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Search</a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="/exist/apps/analisis-programacion/views/search/search.html">Search</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="dropdown" id="about">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Administration</a>
                                        <ul class="dropdown-menu">

                                            <li>
                                                <a href="/exist/apps/analisis-programacion/views/admin/upload.html">Upload new file</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                                <!--<div id="login_form">
                                    <div class="results app:get-login"/>
                                </div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="content" class="row-fluid"/>
        </div>
    </div>

</body>

I think to comment on this we need to see the actual HTML output, not just the eXist templates. Is the table loaded via an ajax call? If so, what's the script behind that call? — jbrehr, Jan 06 '19 at 10:37
The table is being loaded by the xquery function, which is taking the data from an xml collection inside the existdb database, just that. I can add it to the question if you think it's important, but I don't see the query itself as being relevant for my problem — Federico, Jan 06 '19 at 16:50
The problem is whatever the browser is doing to generate call to the server. So, we should see everything happening in browser-side. What you have posted is an eXist **template** for generating HTML and whatever scripting/css, but not what is actually acted upon by the browser. Argue against that if you want. — jbrehr, Jan 06 '19 at 20:26
As requested I added a simplified xquery function. You will see that the action attribute has no effect after pressing the button just as in the previous case (with a class attribute it works). Same behavior with Firefox, Chrome and Edge. I'm using the 4.5 version of existdb — Federico, Jan 07 '19 at 07:18
You keep repeating about the xquery function - I never asked about the xquery function. I asked for the output HTML and any scripting (JS or jQuery, possibly CSS as well)....this is the code the browser executes and it's where your problem is. What you have given us is NOT the HTML or any browser-side scripting; you have given us only the eXistdb server-side template. — jbrehr, Jan 07 '19 at 09:14
Here http://medieval-inquisition.huma-num.fr/search?text=scripsit&doc=alldocs you will find an HTML form that uses GET to retrieve search results from eXist. It does not use ajax, but rather a page refresh. — jbrehr, Jan 07 '19 at 09:18
I have to apologize for my lack of experience on the matter, these are my first web app development 'exercises'. What I've done is an adaptation of something initially written by someone else, without fully understanding every line I'm adding.... Anyway, I'll add the page.html to the question (if that is not enough please let me know), which uses the exist.css included in exist. I think all the calls being used are 'standard' — Federico, Jan 07 '19 at 15:40
Well, what you've added is an eXistdb page template which 'surrounds' your HTML form above. It's not the full HTML. You'll need to open the page in your browser, then"View Page Source" and **that's** what the browser acts on (with the included JS and CSS files). It seems to me there is javascript script or jquery, possibly ajax, on the various elements which gets data for each selection. But what you have offered doesn't tell the story. As it stands all I see is half the picture and I still can't even speculate on the problem. This may very well be why you are not getting responses. — jbrehr, Jan 07 '19 at 16:48
Changing the action attribute to an HTML which calls the xquery it works, so, my issue is solved now. Thank you anyway for your time and suggestions. — Federico, Jan 08 '19 at 13:04

Execution of xquery function in exist-db after pressing a button

0 Answers0