Easy UI 1.5.1: Form submit doesn't work

[gordis gmbh]

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!

[stworthy]

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

Code:

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

[gordis gmbh]

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/

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.

[stworthy]

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

Code:

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

[gordis gmbh]

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/


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

[stworthy]

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/

[gordis gmbh]

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/

[stworthy]

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