Modal Popup Link with API REST

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Modal Popup Link with API REST

SebastianM
Hello everyone,

I'm new one on Xwiki and i need your assistance to customise a form.

I created a new form page on my xwiki. This page containt a html form that makes a http GET request on a servlet and this one connects to a SQL DB and performs some processing before returning a CSV.

This works well but the user has nothing to tell him that his query is being processed.

I would like to display a popup to make the user wait until the download window appears and close automatically  or display an error message (Your request is too large, Your query does not contain a result, ...) if serveur return an error.

Is it possible to do this on xwiki? Someone has already done it and could show me how to do it?

Here is my xwiki code right now :

{{velocity}}
#set ($discard = $xwiki.ssfx.use('uicomponents/widgets/datepicker/calendarDateSelect.css', true))
#set ($discard = $xwiki.jsfx.use('uicomponents/widgets/datepicker/calendarDateSelect.js', true))
## Used to parse and serialize the selected date using the date format specified in the XClass.
#set ($discard = $xwiki.jsfx.use('uicomponents/widgets/datepicker/simpleDateFormat.js', true))
## A wrapper over the CalendarDateSelect widget that uses the SimpleDateFormat to parse/serialize the dates.
#set ($discard = $xwiki.ssfx.use('uicomponents/widgets/datepicker/dateTimePicker.css', true))
#set ($discard = $xwiki.jsfx.use('uicomponents/widgets/datepicker/dateTimePicker.js'))

#set($firstName = $xwiki.getDocument($context.user).getObject('XWiki.XWikiUsers').getProperty('first_name').getValue())
#set($lastName = $xwiki.getDocument($context.user).getObject('XWiki.XWikiUsers').getProperty('last_name').getValue())




{{html}}
<div>
<form role="form" action="http://10.132.121.142:8080/servlet1/data" method="get" id="requete">

                                    <div class="form-group">
                                        <label class="col-md-2 control-label">Libelle</label>
                                        <div class="col-md-2">
                                            <input type="text" name="libelle" class="form-control" placeholder="Libelle"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                    <label class="col-md-2 control-label">Instant de début</label>
                                        <div class="col-md-2">
                                            <input type="text" pattern="^(?:(?:([01]?\d|2[0-3]):)?([0-5]?\d):)?([0-5]?\d)$" name="startinstant" class="form-control" placeholder="00:00:00"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                    <label class="col-md-2 control-label">Date de début</label>
                                        <div class="col-md-2">
                                                                                        <div>
                                                                                         #set ($format = 'dd/MM/yyyy')
                                                                                         #set ($value = $datetool.date)
                                                                                          <input name="startdate" type="text" value="$!escapetool.xml($datetool.format($format, $value))"class="datetime t$!value.time" title="$!escapetool.xml($format)" />
                                                                                        </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">Region</label>
                                        <div class="col-md-2">
                                            <select name ="region" class="form-control select">
                                            <option value="ALL">ALL</option>
                                            <option value="TEST1">TEST1</option>
                                            <option value="TEST2">TEST2</option>
                                            </select>
                                        </div>
                                    </div>
                                   
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">Instant de fin</label>
                                        <div class="col-md-2">
                                            <input type="text" pattern="^(?:(?:([01]?\d|2[0-3]):)?([0-5]?\d):)?([0-5]?\d)$" name="endinstant" class="form-control" placeholder="00:00:00"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
<label class="col-md-2 control-label">Date de fin</label>
                                        <div class="col-md-2">
                                            <div>
                                                                                                #set ($format = 'dd/MM/yyyy')
                                                                                                #set ($value = $datetool.date)
                                                                                                <input name="enddate" type="text" value="$!escapetool.xml($datetool.format($format, $value))"class="datetime t$!value.time pull-right" title="$!escapetool.xml($format)" />
                                                                                        </div>
                                        </div>
                                    </div>
                                                                        <div class="form-group col-md-2">
                                           <div>
                                            <input type = "hidden" name = "firstname" value = $firstName />
                                            <input type = "hidden" name = "lastname" value = $lastName />
                                            <button type="submit" class="btn btn-primary dropdown-toggle">TELECHARGER</button>
                                        </div>
                                                                        </div>
                                </form>
</div>
{{/html}}

{{/velocity}}

Loading...