EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Stefan B. on August 11, 2014, 03:05:22 AM



Title: How can I set the Accept attribute for FORM submit (problem with IE remote data)
Post by: Stefan B. on August 11, 2014, 03:05:22 AM
Hallo, we have a big problem with the EasyUi FORM plugin and Internet Explorer to get remote JSON data result from tomcat application server.
The IE will always save the JSON Object result as a file! (Other browsers work fine)
(see also http://www.jeasyui.com/forum/index.php?topic=3517.0)

I have done many tests with the EasyUi form but it will not work!

If I use direkt the Axax jquery call $.ajax({}); it works also fine. There I can also set the properties for accept, content-type and so on.
Code:
	$.ajax({
type: "post",
url: "http://localhost:8082/GordisWebClient/testFormSubmit.do",
cache: false,
data:'sADesc=' + $("#sADesc").val() + "&sARack=" + $("#sARack").val(),
success: function(response){
consoleLog(JSON.stringify(response));
},
error: function(){
alert('Error while request..');
}
});

My analysis has shown that in the request header with EasyUi FORM, the attribute accept never contains "application/json" and therefore we have the problem with IE! (see attachments). Our remote server controller methode returns every time a JSON Object. We also use the Spring Framework on remote side.

So my question is: how can I set the Accept attribute for the Request-Header when I use the EasyUi Form to submit form data to an remote server,
and then the IE accepts the JSON data response?


Title: Re: How can I set the Accept attribute for FORM submit (problem with IE remote data)
Post by: stworthy on August 11, 2014, 08:00:23 AM
When using 'form' plugin to submit a form, the form will be submitted with an iframe target. After that the returning data from server will arrive this iframe. To make the form accept the data correctly, setting the 'Content-Type' with 'text/plain' may be more appropriate. Please try to use 'text/plain' instead of 'application/json'.


Title: Re: How can I set the Accept attribute for FORM submit (problem with IE remote data)
Post by: Stefan B. on August 11, 2014, 11:45:21 PM
Hello stworthy,
you mean we should set the response data-type to text/plain on the remote controller - yes?
But this is not so easy, we use Spring-Framework to handle the request/response methodes.
Also the Problem is only with IE data handling!

So my question was: how can we set the Accept attribute for the request-header on client site, when we use the EasyUi Form before submit the form data.
There should be an easyui form option to set this ajax post attributes like this:

Code:
	$.ajax({
type: "post",
url: "http://localhost:8082/testFormSubmit.do",
data:'sADesc=' + $("#sADesc").val() + "&sARack=" + $("#sARack").val(),
dataType: 'json',
contentType: 'application/json',
accept: {
  json: 'application/json',
  xml: 'application/xml'
},[/b]
success: function(response){
consoleLog(JSON.stringify(response));
},
error: function(){
alert('Error while request..');
}
});


Easyui only use the attribute dataType: 'json' in the form plugin.
The is not attribute to set contentType or accept for the form!


Title: Re: How can I set the Accept attribute for FORM submit (problem with IE remote data)
Post by: stworthy on August 12, 2014, 01:22:00 AM
You can not set 'accept' property when submitting a form. You should set 'Content-Type' to 'text/plain' or 'text/html' in the remote server. When set to 'text/html', please wrap the returning json data with <textarea> element, just like this:
Code:
<body>
<textarea>{"total":1,"rows":[{"name":"name1","address":"address1"}]}</textarea>
</body>


Title: Re: How can I set the Accept attribute for FORM submit (problem with IE remote data)
Post by: Stefan B. on August 28, 2014, 01:14:56 AM
In this case the Spring MVC was the problem to change the content-type of the result header. Also we use Jackson to convert JSON Objects

So the solution was to set the MappingJacksonHttpMessageConverter supported media types. Default is only application/json!
Here is the working XML configuration.

Code:
     <mvc:annotation-driven>
    <mvc:message-converters>
        <bean class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">
<property name="supportedMediaTypes">
    <list>
            <value>application/json;charset=utf-8</value>
            <value>text/html;charset=utf-8</value>
            </list>
</property>
        </bean>
    </mvc:message-converters>
</mvc:annotation-driven>


Title: Re: How can I set the Accept attribute for FORM submit (problem with IE remote data)
Post by: bbones on July 21, 2015, 01:39:53 AM
Stephan, may I ask you

I have same set - Spring controller with EasyUI on client.

Rest controller
Code:
	
@RequestMapping(value = "/", method = RequestMethod.POST, produces = MediaType.TEXT_PLAIN_VALUE )
public @ResponseBody ContractDTO submit(ContractDTO contractDTO) {
Contract contract = mapper.map(contractDTO, Contract.class);
contract = contractService.save(contract);
mapper.map(contract, contractDTO);
return contractDTO;
}

and JS part
Code:
$("#cf").form('submit', {
    success:function(data){
       $("#cf").form('load', JSON.parse(data));
    } // Success
});

Request works fine from Advanced rest client query
But from EasyUI it successfully post a record but data is empty and in Chrom debugger I can see message
Quote
Refused to display 'http://localhost:8080/protofront/service/contracts/' in a frame because it set 'X-Frame-Options' to 'DENY'

Annotated Spring web config looks like
Code:
    @Bean
    public MappingJackson2HttpMessageConverter jackson2Converter() {
        MappingJackson2HttpMessageConverter converter = new MappingJackson2HttpMessageConverter();
        MediaType[] arr = new  MediaType[] { MediaType.APPLICATION_JSON, MediaType.TEXT_PLAIN, MediaType.TEXT_HTML };
        converter.setSupportedMediaTypes(Arrays.asList(arr));
        converter.setObjectMapper(objectMapper());
        return converter;
    }


Any help?
BR