Print Page - Easy UI 1.5.1: Form submit doesn't work

Title: Easy UI 1.5.1: Form submit doesn't work
Post by: gordis gmbh on February 20, 2017, 04:40:53 AM

The form submission in EasyUI 1.5.1 is problematic. On submitting the form I get redirected to the home page. There is no request received on the server-side. I am trying to upload a file (selected by using filebox) on submitting the form.

I define the form and filebox objects as follows:

Code:

<script type="text/javascript">
$(function(){
	$('#fileToUpload').filebox({
	    prompt:'select file to upload',
	    buttonText: 'Select File',
	    buttonAlign: 'left',
	    width:'250',
	    accept:'text/*'
	});

	$('#filesUploadWinForm').form({
	    ajax: false,
	    success: function(serverResponse) {
		handleUploadFileDoResponse(serverResponse);
	    }
	});
});
function handleUploadFileDoResponse(resp) { ... }

</script>
<div>
<form method="POST" id="filesUploadWinForm" enctype="multipart/form-data" accept-charset="UTF-8">
	<input id="fileToUpload" name="fileToUpload">
</form>
</div>

If I include the form plugin "jquery.form.js" of Version 1.4.5 it works normal.

Could you please check what the problem is? Thanks!

Title: Re: Easy UI 1.5.1: Form submit doesn't work
Post by: stworthy on February 20, 2017, 07:54:17 AM

You have to set the 'url' property before submitting a form.

Code:

$('#filesUploadWinForm').form({
  url: ...
  //...
});

Title: Re: Easy UI 1.5.1: Form submit doesn't work
Post by: gordis gmbh on February 21, 2017, 02:12:33 AM

The 'url' is set later when the form is submitted. My implementation works fine with form plugin version 1.4.5.

The following jsfiddle shows the problem with 1.5.1. Please check the console log once you select a file and click on "Upload File" button:
http://jsfiddle.net/onq3qo9t/5/ (http://jsfiddle.net/onq3qo9t/5/)

The form submission tries to redirect to jsfiddle's start page where as the form-url points to something else.

Thanks for looking into it.

Title: Re: Easy UI 1.5.1: Form submit doesn't work
Post by: stworthy on February 21, 2017, 08:58:03 PM

You call the 'submit' method with wrong syntax. Please use this code instead.

Code:

$('#filesUploadWinForm').form('submit', {
  url: 'www.gordis.de',
  //...
});

Title: Re: Easy UI 1.5.1: Form submit doesn't work
Post by: gordis gmbh on February 22, 2017, 02:56:21 AM

Thanks for mentioning the syntax in calling the submit method.

But the problem remains the same. Here, the problem-demo once again: http://jsfiddle.net/onq3qo9t/9/ (http://jsfiddle.net/onq3qo9t/9/)

If I use the easyui-form plugin from version 1.4.5, it works fine:
http://jsfiddle.net/zyqm1hjt/3/ (http://jsfiddle.net/zyqm1hjt/3/)

Title: Re: Easy UI 1.5.1: Form submit doesn't work
Post by: stworthy on February 22, 2017, 07:57:13 AM

An ajax form requires you set the 'ajax' property to true. Please try this code instead.

Code:

$('#filesUploadWinForm').form({
    ajax: true,
    success: function(serverResponse) {
	handleUploadFileDoResponse(serverResponse);
    }
});

The updated example is available from http://jsfiddle.net/onq3qo9t/10/

Title: Re: Easy UI 1.5.1: Form submit doesn't work
Post by: gordis gmbh on February 23, 2017, 06:00:34 AM

sorry, but we don't want to make an ajax submit. In our implementation for uploading files, we set the 'ajax' property explicitly to false.

Apart from that, in our implementation if I set 'ajax: true', then the behaviour with form-plugin version 1.5.1 is still the same: it gets redirected to the home page. No 'file-upload' request is sent to the server. In browsers console log no error can be seen because the start page gets reloaded.

As mentioned earlier, the form-plugin version 1.4.5 works well with 'ajax: false': http://jsfiddle.net/zyqm1hjt/3/ (http://jsfiddle.net/zyqm1hjt/3/)

Title: Re: Easy UI 1.5.1: Form submit doesn't work
Post by: stworthy on February 23, 2017, 07:28:14 AM

If you set the 'ajax' to false, the 'success' event does not fires and the page will redirect to a new link that the 'action' attribute specified. The 'submit' method in previous edition will ignore the 'ajax' property and acts as the ajax submitting. If you want to remain on the same page after submitting a form, please set the 'ajax' to true.

Please look at this example https://www.jeasyui.com/demo/main/index.php?plugin=Form&theme=default&dir=ltr&pitem=Ajax%20Form

EasyUI Forum

General Category => Bug Report => Topic started by: gordis gmbh on February 20, 2017, 04:40:53 AM