Dojo - Upload two files in one Form - upload

I use Dojo and want to send two files and one String to a REST Service. The HTML for that is the following:
//...
<script>
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.CheckBox");
dojo.require("dojox.form.Uploader");
dojo.require("dojox.embed.Flash");
if(dojox.embed.Flash.available){
dojo.require("dojox.form.uploader.plugins.Flash");
}else{
dojo.require("dojox.form.uploader.plugins.IFrame");
}
</script>
//..
<form action="http://localhost:8080/service" enctype="multipart/form-data" method="POST" name="inputDataForm" id="inputDataForm">
<table border="1" cellpadding="1" cellspacing="1" height="88" width="925">
<tbody>
<tr>
<td>Dataset1</td>
<td><input name="train" type="file" value="Browse" data-dojo-type="dojox/form/Uploader"/></td>
</tr>
<tr>
<td>Dataset2</td>
<td><input name="test" type="file" value="Browse" data-dojo-type="dojox/form/Uploader"/></td>
</tr>
<tr>
<td>Number of Customers</td>
<td><input name="numberCustomers" size="40" type="text" data-dojo-type="dijit/form/TextBox" /></td>
</tr>
</tbody>
</table>
<p><input name="runButton" type="submit" value="Run" data-dojo-type="dijit/form/Button" id="submitButton" /></p>
</form>
However: If I press the submit button, I can see via Firebug that there are sent TWO POST-Requests. One with the first file and the "Number of Customers" field and one with the second file and the "Number of Customers" field. However, my REST Service wants to have both files and the "Number of Customers" fields in one POST Request. How can i do that? What am I doing wrong?
Thanks a lot in advance
Natan

Related

Adding a Add Row button which then adds a new row for Amazon MTurk Form

I have a table set up in Amazon mturk with a single row which the user can fill in with the relevant details. However, sometimes the user will need to fill in two or three more rows of data. I want them to be able to click an "add new row" button and then a new row appears at the bottom of the table which is identical to the row above for them to fill in.
I tried looking at another task to see how they got the add row button to work but I can't figure out how they did it https://worker.mturk.com/projects/3PP5EK5QU1Q6PKONUENX4D1ESGSUNM/tasks?ref=w_pl_prvw
When I include their code of <input data-action ... it gives me an error saying the name is not defined
<!-- You must include this JavaScript file -->
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script
<!-- For the full list of available Crowd HTML Elements and their input/output documentation,
please refer to https://docs.aws.amazon.com/sagemaker/latest/dg/sms-ui-template-reference.html -->
<!-- You must include crowd-form so that your task submits answers to MTurk -->
<crowd-form answer-format="flatten-objects">
<div>
<strong>Instructions: </strong>
<span>XX</span>
<div>
<div>
<p>Link to the Website: URL </p>
<p>City: "${City}"</p>
</div>
<div>
<table>
<tr>
<th>Plan Name</th>
<th>Price</th>
<th>Internet Quota (GB)</th>
<th>Local Quota (GB)</th>
<th>Other Quota</th>
</tr>
<tr>
<td>
<form>
<crowd-input name="Plan" placeholder="e.g. InternetMAX 4.5GB" required></crowd-input>
</form>
</td>
<td>
<form>
<crowd-input name="Price (Rp)" placeholder="e.g. 42000" required></crowd-input>
</form>
</td>
<td>
<form>
<crowd-input name="Internet Quota GB" placeholder="e.g. 0.5" required></crowd-input>
</form>
</td>
<td>
<form>
<crowd-input name="Local Quota GB" placeholder="e.g. 2" required></crowd-input>
</form>
</td>
<td>
<form>
<crowd-input name="Other Quota GB" placeholder="e.g. 0.5" required></crowd-input>
</form>
</td>
<td>
<input data-action="more-items" type="button" value="Add Items">
</td>
</tr>
</table>
</div>
</div>
</div>
```
``

URL found in auth.gsp - beginner

I need to know the following. I copied the following code from auth.gsp. I need to know what:
1.) I need to know what '${postUrl}' means?
2.) I did copy this code and paste it in another GSP called index.gsp, but the page didn't login successfully.
<form action='${postUrl}' method='POST' id="loginForm" name="loginForm" autocomplete='off'>
<div class="sign-in">
<h1><g:message code='spring.security.ui.login.signin'/></h1>
<table>
<tr>
<td><label for="username"><g:message code='spring.security.ui.login.username'/></label></td>
<td><input name="j_username" id="username" size="20" /></td>
</tr>
<tr>
<td><label for="password"><g:message code='spring.security.ui.login.password'/></label></td>
<td><input type="password" name="j_password" id="password" size="20" /></td>
</tr>
<tr>
<td colspan='2'>
<input type="checkbox" class="checkbox" name="${rememberMeParameter}" id="remember_me" checked="checked" />
<label for='remember_me'><g:message code='spring.security.ui.login.rememberme'/></label> |
<span class="forgot-link">
<g:link controller='register' action='forgotPassword'><g:message code='spring.security.ui.login.forgotPassword'/></g:link>
</span>
</td>
</tr>
<tr>
<td colspan='2'>
<s2ui:linkButton elementId='register' controller='register' messageCode='spring.security.ui.login.register'/>
<s2ui:submitButton elementId='loginButton' form='loginForm' messageCode='spring.security.ui.login.login'/>
</td>
</tr>
</table>
</div>
</form>
Spring security work on filters. If you print postUrl in your gsp file then it looks like /myApp/j_spring_security_check, only /j_spring_security_check URL is processed by Spring Security filter.
If you past auth.gap and not sending this url then cannot login. Change your gsp slightly to make this run, replace ${postUrl} with ${createLink(uri: '/j_spring_security_check')}.

jquery ui spinner malfunctioning with jquery mobile

I'm trying to use jquery ui spinners in a table with jquery mobile 1.4.0
<div class="table_data">
<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke">
<thead>
<tr>
<th>Address</th>
<th>Doorbells</th>
<th>Mailboxes</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input type="text" class="spinner" name="doorbells"/>
</td>
<td>
<input type="text" class="spinner" name="mailboxes"/>
</td>
</tr>
<tr>
<td>2</td>
<td>
<input type="text" class="spinner" name="doorbells"/>
</td>
<td>
<input type="text" class="spinner" name="mailboxes"/>
</td>
</tr>
<tr>
<td>3</td>
<td>
<input type="text" class="spinner" name="doorbells"/>
</td>
<td>
<input type="text" class="spinner" name="mailboxes"/>
</td>
</tr>
</tbody>
</table>
</div>
<script>
$( ".spinner" ).spinner();
</script>
In the jsfiddle link below you can see my problem. The buttons don't show up in the correct place and they don't even work anymore.
http://jsfiddle.net/murtho/ZZqu6/5/
When I do not include the jquery ui js and css file the spinners work just fine. I need the mobile ui for other features in my application, but I also wish to implement the jquery spinner (of an alternative solution)
This is how it should be working:
http://jsfiddle.net/murtho/tf89L/2/
jQuery UI and jQuery mobile don't play together that well.
For your number spinner, you can fix the formatting with one extra line of code to remove the jQM classes from the spinner button divs:
$(document).on("pagebeforeshow", "#page1", function(){
$( ".spinner" ).spinner();
$(".ui-spinner div" ).removeClass(function() {
return $( this ).attr( "class" );
});
});
Here is your updated FIDDLE
Another option is to set type="number" on the input boxes; however, not all browsers understand this.
You will need to see if jQuery UI causes any other problems with your particular application...

How to show validation errors as a list

I have a simple login form with this code in jsp file:
<s:form
action="conexion" validate="true" theme="xhtml" target="formError">
<s:textfield name="username" key="profile.rut" />
<s:password name="password" key="profile.password" />
<s:submit id="boton_ingreso"/>
</s:form>
when that is rendered, it renders this way:
<form onreset="clearErrorMessages(this);clearErrorLabels(this);" method="post" target="formError" action="/AgendaPlus/conexion.action" onsubmit="return validateForm_conexion();" name="conexion" id="conexion">
<table class="wwFormTable">
<tbody><tr>
<td class="tdLabel"><label class="label" for="conexion_username">RUT:</label></td>
<td><input type="text" id="conexion_username" value="" name="username"></td>
</tr>
<tr>
<td class="tdLabel"><label class="label" for="conexion_password">ContraseƱa:</label></td>
<td><input type="password" id="conexion_password" name="password"></td>
</tr>
<tr>
<td colspan="2"><div align="right"><input type="submit" value="Submit" id="boton_ingreso" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false">
</div></td>
</tr>
</tbody></table></form>
That way, when an error occurs, the error is shown above each field with error as a <tr> tag and since it is a table, I cannot style it to move to other place. I tried with target attribute of <s:form> tag but it did not work.
See the tag docs for fielderror:
<s:fielderror />
You know there are other themes, and that you can create your own, right?
For example, the "simple" theme doesn't render any tables or errors.
The target attribute seems a weird use for error reporting.

reading from a file using the input type=file in grails

Hi I have the following code in my grails gsp
<form action="upload-script-url" method="post" enctype="multipart/form-data">
<table class="table"style="width: 75%">
<tr>
<td>
<span style="font-weight: bold; ">Select the Source File:</span>
<input size="75" type="file" id="payload" name="payload"/>
</td>
</tr>
<tr>
<td>
<input type="submit" class="red" id="Run">Run</button>
</td>
</tr>
</table>
</form>
I read the form parameters from: here
Are those right parameters in the html form?
Now how should I proceed to read the data from the selected file? do I have to use the apache commons fileupload api ?
Thanks
request.getFile("payload")
and you will get a CommonsMultipartFile
If you take some time to (again) actually look at the documentation you will see how to do it...

Resources