I have built a model from GET request and display the content that I need into a form, mainly dropdown options. User then completes the form and 'POST' back to the api. The API that I am using isn't formatted in a way that I can use for ember-data so I have opted to render my model with Ember.Object
var Prequalification = Ember.Object.extend();
Prequalification.reopenClass({
template: function(){
return Ember.$.ajax({
url: "/prequalification",
dataType: 'json'
}).then(function(response){
var template = response.collection.template.data;
return template;
});
}
});
export default Prequalification;
My controller decorates the view:
var IndexController = Ember.ArrayController.extend({
businessType: function(){
var content = this.get('content');
console.log(this);
return content.get(10);
}.property('content'),
loanType: function(){
var content = this.get('content');
return content.get(5);
}.property('content')
});
export default IndexController;
So on form submit, what are my options for Posting back to the API?
Thanks!
Use an action and associate it with a button.
actions: {
save: function(){
alert('ajax save here');
}
}
http://emberjs.jsbin.com/jositowa/1/edit
I've successfully integrated dropzone.js inside an existing form. This form posts the attachments and other inputs like checkboxes, etc.
When I submit the form with attachments, all the inputs post properly. However, I want to make it possible for the user to submit the form without any attachments. Dropzone doesn't allow the form submission unless there is an attachment.
Does anybody know how I can override this default behavior and submit the dropzone.js form without any attachments? Thank you!
$( document ).ready(function () {
Dropzone.options.fileUpload = { // The camelized version of the ID of the form element
// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 50,
maxFiles: 50,
addRemoveLinks: true,
clickable: "#clickable",
previewsContainer: ".dropzone-previews",
acceptedFiles: "image/*,application/pdf, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.openxmlformats-officedocument.spreadsheetml.template, application/vnd.openxmlformats-officedocument.presentationml.template, application/vnd.openxmlformats-officedocument.presentationml.slideshow, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/vnd.openxmlformats-officedocument.presentationml.slide, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.wordprocessingml.template, application/vnd.ms-excel.addin.macroEnabled.12, application/vnd.ms-excel.sheet.binary.macroEnabled.12,text/rtf,text/plain,audio/*,video/*,.csv,.doc,.xls,.ppt,application/vnd.ms-powerpoint,.pptx",
// The setting up of the dropzone
init: function() {
var myDropzone = this;
// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function() {
// Gets triggered when the form is actually being sent.
// Hide the success button or the complete form.
});
this.on("successmultiple", function(files, response) {
window.location.replace(response.redirect);
exit();
});
this.on("errormultiple", function(files, response) {
$("#notifications").before('<div class="alert alert-error" id="alert-error"><button type="button" class="close" data-dismiss="alert">×</button><i class="icon-exclamation-sign"></i> There is a problem with the files being uploaded. Please check the form below.</div>');
exit();
});
}
}
});
Use the following:
$('input[type="submit"]').on("click", function (e) {
e.preventDefault();
e.stopPropagation();
var form = $(this).closest('#dropzone-form');
if (form.valid() == true) {
if (myDropzone.getQueuedFiles().length > 0) {
myDropzone.processQueue();
} else {
myDropzone.uploadFiles([]); //send empty
}
}
});
Reference: https://github.com/enyo/dropzone/issues/418
You should check if there are files in the queue. If the queue is empty call directly dropzone.uploadFile(). This method requires you to pass in a file. As stated on [caniuse][1], the File constructor isn't supported on IE/Edge, so just use Blob API, as File API is based on that.
The formData.append() method used in dropzone.uploadFile() requires you to pass an object which implements the Blob interface. That's the reason why you cannot pass in a normal object.
dropzone version 5.2.0 requires the upload.chunked option
if (this.dropzone.getQueuedFiles().length === 0) {
var blob = new Blob();
blob.upload = { 'chunked': this.dropzone.defaultOptions.chunking };
this.dropzone.uploadFile(blob);
} else {
this.dropzone.processQueue();
}
Depending on your situation you could simply submit the form:
if (myDropzone.getQueuedFiles().length > 0) {
myDropzone.processQueue();
} else {
$("#my_form").submit();
}
The first approach is kind of too expensive for me, I would not like to dive into the source code and modify it,
If you happen to be like me , use this.
function submitMyFormWithData(url)
{
formData = new FormData();
//formData.append('nameOfInputField', $('input[name="nameOfInputField"]').val() );
$.ajax({
url: url,
data: formData,
processData: false,
contentType: false,
type: 'POST',
success: function(data){
alert(data);
}
});
}
And in your dropzone script
$("#submit").on("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
if (myDropzone.getQueuedFiles().length > 0)
{
myDropzone.processQueue();
} else {
submitMyFormWithData(ajaxURL);
}
});
I tried Matija Grcic's answer and I got the following error:
Uncaught TypeError: Cannot read property 'name' of undefined
And I didn't want to modify the dropzone source code, so I did the following:
if (myDropzone.getQueuedFiles().length > 0) {
myDropzone.processQueue();
} else {
myDropzone.uploadFiles([{name:'nofiles'}]); //send empty
}
Note: I'm passing an object inside the array to the uploadFiles function.
Then I check server-side, if name != 'nofiles' do upload stuff.
Pretty simple, you stop the propagation ONLY if you have files to be submitted via Dropzone:
// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
// Stop the propagation ONLY if you have files to be submitted via Dropzone
if (myDropzone.getQueuedFiles().length > 0) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
}
});
I have successfully used :
submitButton.addEventListener("click", function () {
if(wrapperThis.files.length){
error = `Please select a file`;
} else {
wrapperThis.processQueue();
}
});
My answer is based on the fact that the other answers don't allow for an Ajax based solution where an actual HTML form isn't actually being used. Additionally you may want the full form contents submitted when sending the Files for upload as well.
As you'll see, my form occurs in a modal outside of any form tag. On completion, the modal is triggered to close.
(FYI getForm returns the form as an object and not directly related to the answer. Also assumes use of jQuery)
init: function() {
var dzClosure = this;
// When saving what are we doing?
$('.saveBtn').off('click').on('click',function(e){
e.preventDefault();
e.stopPropagation();
if (dzClosure.getQueuedFiles().length > 0) {
dzClosure.processQueue();
dzClosure.on('queuecomplete',function(){
$('.modal:visible').modal('hide');
})
} else {
var params = getForm();
$.post(dzClosure.options.url,params,function(){
$('.modal:visible').modal('hide');
})
}
});
dzClosure.on('sending', function (data, xhr, formData) {
var extra = getForm();
for (key in extra){
formData.append(key,extra[key]);
}
});
well,i have this script that i have set up that on submit requests php file that is used to validate my input values...i have set up that when it is not validated the correct way to echo it is not validated,now i want in my request when i get response and it is the error response to stop the submit..here is the script,it does send the request and returns response but it doesnt stop the submit...
i have made it like this but now i need to pop a confirm message when it is all done,i want to stop the form from executing when message pops up and if the user clicks yes to continue with the form...i tried it like this with fireEvent but it wont work...help guys!
window.addEvent('domready', function(){
var form=document.adminForm;
form.addEvent('submit', function(e){
var success = false;
var dataString="date=" + document.getElementById("date").value + "&start=" + document.getElementById("start").value + "&end=" + document.getElementById("end").value;
var requestData = new Request ({
url: '/provjera.php',
method:'POST',
async:false,
data:dataString,
onComplete: function(responseText){
var requestData2 = new Request({
url:'/posalji.php',
method:'POST',
data:dataString,
onComplete:function(responseText){
}
});
requestData2.send();
success= responseText == 'NO ERROR';
if(responseText == 'NO ERROR'){
}else{
alert("FAIL");
}
}
});
requestData.send();
if(success){
var result=confirm("Are you sure!?");
e.stop();
if(result){
form.fireEvent("submit");
}
}else{
e.stop();
}
});
});
This won't work, it breaks the asynchronous nature of XHR (it's *A*JAX, heh).
The way it works is this:
[form]
[submit event]
\->[function]->[xhr]->[onComplete function much later]->[e.stop() not applicable]
\->[function continues and terminates]
By the time the onComplete arrives and calls .stop(), the parent function execution has exited and failed to stop the event, it has already bubbled... XHR is non-blocking!
you have 2 patterns you can do to work around that:
1. always stop event, do something extra in onComplete
essentially, whatever the XHR passes to your onComplete can let you determine the success/failure of your operation and you can call another function, fire an event or do what you need to do (eg, transition page or display validation errors on screen or whtever).
2. use sync AJAX (anti-pattern)
you can actually make your XHR blocking if you wanted to so that in this execution context you can set a variable or stop the event from the onComplete - do so by passing async: false to your Request constructor options.
I would definitely not recommend 2 unless you are doing something like username availability checker onBlur/onChange that needs to block the thread before they submit. And even then, you can do it gracefully w/o this.
edit as per request, here is an example: http://jsfiddle.net/dimitar/du5s4/
var form = document.id('adminForm');
form.addEvent('submit', function (e) {
var success = false;
// simulate a server response of two types.
this.getElement('input[name=html]').set('value', ['success','error'].getRandom());
var requestData = new Request({
url: '/echo/html/',
method: 'post',
async: false,
data: this,
onComplete: function (responseText) {
// if server returned success, don't stop the event.
success = this.response.text == 'success';
console.log(success);
}
}).send();
success || e.stop();
});
this has been tailored for the jsfiddle api for ajax testing but you get the idea. since you evalResponse, your response can also set variables - though I don't remember what the scope of evluation will be - it may be the global object and not the inner scope of the submit function.
once again, this is totally wrong, use sparringly. you need to change over to a proper event based setup.
http://jsfiddle.net/dimitar/du5s4/2/ - same thing but w/o the async hack.
var form = document.id('adminForm');
form.addEvent('submit', function (e) {
e && e.stop && e.stop();
var self = this;
// simulate a server response of two types.
this.getElement('input[name=html]').set('value', ['success','error'].getRandom());
var requestData = new Request({
url: '/echo/html/',
method: 'post',
data: this,
onComplete: function (responseText) {
// if server returned success,
// call something like form.submit();
this.response.text == 'success' && self.submit();
console.log(this.response.text);
}
}).send();
});
I have following js code:
window.addEvent('domready', function() {
var trigger = $('sendme');
trigger.addEvent( 'click', function(event){
event.preventDefault()
var sendform = new Form.Request($('newform'), {
onSend: function(){
console.log('sending');
},
onComplete: function(){
console.log('sent');
}
});
sendform.send();
});
});
and form with data:
<form action="index.php?option=com_mycomp&layout=edit&id=1" method="post" name="newform" id="newform" class="form-validate">...
the form submits just fine and I can see changes but I get no logs,
thus cant execute actions that I need
form action is not supposed to give me any response back , it is simple post but shouldn't this work? Do I need to send the form to another file that will give me responses like json and submit my form like that ?
what am I doing wrong ?
Any help is appreciated. Thnx!
small update since post ,
I change the form to send data and receive response via json file but still no response messages. everything is being updated so submit works 100%.
right way is new Form.Request($('newform'),console.log(),{
window.addEvent('domready', function() {
var trigger = $('sendme');
trigger.addEvent( 'click', function(event){
event.preventDefault()
var sendform = new Form.Request($('newform'),console.log(), {
onSend: function(){
console.log('sending');
},
onComplete: function(){
console.log('sent');
}
});
sendform.send();
});
});
I have a <a href> hyperlink. I used JQuery so clicking the link will load contents into a div in the current page (i.e. stay in the same page), and it works now.
However I also want that, if the request fails, the link act normally and go to the href url.
I tried e.preventDefault(); and return false; in the success: callback function, but they are not in the correct scope. If I place e.preventDefault() in the calling function, I can't reverse that effect later.
Here is my code:
$('a.more-link').click(function(e){
var postId=$(this).closest('div.post').attr("id").replace(/^post-(.*)$/,'$1');
var postContent=$(this).parent();
$.ajax({
url:"?action=ajax_load_post&id="+postId,
success:function(data){
postContent.html(data);
// Can't access e.preventDefault, nor return false;
},
error:function(data){
}
});
e.preventDefault();
});
Don't worry about the preventDefault(), just redirect the user in the error function like this:
$('a.more-link').click(function(e){
var postId=$(this).closest('div.post').attr("id").replace(/^post-(.*)$/,'$1');
var postContent=$(this).parent();
var _this = $(this);
$.ajax({
url:"?action=ajax_load_post&id="+postId,
success:function(data){
postContent.html(data);
},
error:function(data){
window.location = _this.attr('href');
return false;
}
});
});