Passing a variable (text) from Client side (jQuery) to server side (Velocity)

Help / Discuss
1

For my document control system, I need to pass a User entered code (text input in a HTML input element) to a Velocity variable for validation. I have been trying jQuery AJAX methods and HTML form “post” – as being the way to do this. But not getting my coding / syntax right.
(1) What is the URL to be used for passing data to the same Xwiki page when using AJAX for FORM post ?
Does this page have to be a TERMINAL page or can it be done on a NON-TERMINAL page (aka space) ?
(2) How do I capture the data on the Server side (wiki / velocity scripting) – and ASSIGN it to a Velocity variable ?
Have been trying the $response / $request scripting functions for HTTP requests – but obviously not getting the syntax or function calls right.
The SKIN Extension tutorial - gives a method for passing a parameter from the Velocity side to JS side – but NOT the reverse.
Would greatly appreciate some advice and help to solve this problem. I am many other are facing the same and I don’t see any solution posted for similar ones in this forum.

I am relatively new to Xwiki - have completed online beginners’ courses on Java, HTML/CSS/JS and jQuery - to understand the examples / tutorials. Have also gone through the basic Xwiki tutorials and examples, particularly the FAQ, Skin extension and AJAX Example. Have also read through most of the Developer documentation.
Thanks in Advance.

2

I hope the following example will help:

{{info}}
This is an example to get a value of a HTML-Select List and do something with it
{{/info}}

This page will be called if you hit "GO" additionally.
The HTML request then contains ##?classname=...## with the selected item

In this example a list of xwiki classes will be generated by   {{code}}$xwiki.classList{{/code}}. 
This list contains user defined classes too.
After  "GO" - the propertyNames of the selected class will be shown

{{velocity}}
{{html wiki="true"}}

<form action ="">
Elements of class: <select name="classname">
##
## $request.classname is defined, when the form is submitted.
##
##  Other form fields can be found  $request.name_of_the_field
##
#if($request.classname)
#set($classname = $request.classname)
#else
#set($classname = "XWiki.XWikiUsers")
#end
#set($classes = $xwiki.classList)
#foreach($classn in $classes)
<option value="${classn}" #if($classname==$classn) selected #end>$classn</option>
#end
</select>
<input type="submit" value="Go" />
</form>
<ul>
#set($fields = $xwiki.getDocument($classname).xWikiClass.propertyNames)
#foreach ($f in $fields)
<li>$f</li>
#end
</ul>

{{/html}}

==== List all Parameters ====
#foreach ($x in $request.getParameterNames())
* **$x** : (% style="color:red" %)$request.getParameter($x)(%%)
#end

**End of Parameters**
{{/velocity}}
3

Thanks very much for sharing your selection list example. Looks good and may solve my problem.
I will work on it for the next 2 or 3 days – understand how the logic works and revert if I need any further clarifications.
thanks again and warm regards

4

Hi - fantastic !! Yours solution worked with the small changes I made as below.
Thanks also for the code itself for listing Class element names - very useful for finding the correct name of the element.

{{info}}
This is an example to get a value of a HTML-Form Input text field and do something with it
{{/info}}
{{velocity}}
{{html wiki=“true”}}

Enter your eCode:

## ## $request.ecode is defined, when the form is submitted. ## #if($request.ecode) #set($eCode = $request.ecode) #else #set($eCode= "xxxxxx") #end

{{/html}}

==== List all Parameters ====
#foreach ($x in $request.getParameterNames())
#set($eCodeValue = $request.getParameter($x))

  • $x : (% style=“color:red” %)$eCodeValue(%%)
    #end

#velocity variable $eCodeValue = the string entered
##by the User in the form input element

End of Parameters
{{/velocity}}