I am using dropzone and have the following init function.
Dropzone.options.filedrop = {
url: '/path/to/handler.ashx',
paramName: 'file',
uploadMultiple: true,
parallelUploads: 20,
forceFallback: true,
init: function () {
console.log('init'),
this.on("sendingmultiple", function (files, xhr, formData) { //event fired for each added files
console.log('sendingmultiple');
function() ValidateAllFiles();
});
this.on("successmultiple", function (file, data) { //event for each successful upload
console.log("done");
DisplayMsg();
});
}
This work perfectly if the browser support dropzone. However, the sendingmultiple and successmultiple functions do not get triggered if i am in fallback mode. (nothing get wriiten into console)
This is my html markup.
<form id="filedrop" runat="server" action="/path/to/handler.ashx">
<div>
<div class="fallback">
<input name="file" type="file" multiple />
<input type="submit" id="btnFallBack" value="Upload"/>
</div>
</div>
</form>
Does dropzone support these triggers even in fallback mode or i have to manually do it using button click event? If the later is true, then how can i get the array of file object like i did in the sendingmultiple function?
Thanks for your help!
yea, i was right. I refactor my code so the dropzone sendingmultiple and fall back button click event triggers ValidateAllFiles(). After that, i call the Upload() method from code behind in the button click event. The Upload() method is the same method used by dropzone for uploading files.
Related
My kendo template is as follows:
<div id="file-err-msg" > Please remove files with errors</div>
<input name="files" id="files" type="file" />
<script id="fileTemplate" type="text/x-kendo-template">
<span class='k-progress'>
</span>
<strong class='k-upload-status'>
<button type='button' class='btn-remove k-button k-button-bare k-upload-action'>
<span class='k-icon k-i-close k-delete' title='Remove'></span>
</button>
</strong>
</script>
<script>
$("#files").kendoUpload({
template: kendo.template($('#fileTemplate').html())
});
</script>
I need to hide the div with id - file-err-msg, when the remove button is clicked. the Remove action is happening when the span with css class "k-delete" is clicked. I need to add the below event handler in addition, and it is never being called.
$(".k-delete").click(function () {
alert("Remove button clicked");
});
since these controls are rendered dynamically, i tried to bind them to the event handler as below, but nothing works.
$("body").on("click", ".btn-remove", function () {
alert("dynamic control event handler");
});
Any help is appreciated!
According to Kendo Upload API documentation, you can bind a function to the remove event.
So this is where you could hide your file-err-msg div :
$("#files").kendoUpload({
template: kendo.template($('#fileTemplate').html()),
remove: function(e) {
$('#file-err-msg').hide();
}
});
Play framework 2.4.x. A button is pressed on my home page that executes some code via Ajax, and returns its results beneath the button without loading a new page. The results wait for a user to input some text in a field and press "submit". Those results Look like this:
<li class="item">
<div>
<h3>Email: </h3>
<a>#email.tail.init</a>
<h3>Name: </h3>
<a>#name</a>
</div>
<div>
<h3>Linkedin: </h3>
<form class="linkedinForm" action="#routes.Application.createLinkedin" method="POST">
<input type="number" class="id" name="id" value="#id" readonly>
<input type="text" class="email" name="email" value="#email" />
<input type="text" class="emailsecondary" name="emailsecondary" value="" />
<input type="text" class="name" name="email" value="#name" />
<input type="text" class="linkedin" name="linkedin" value="" />
<input type="submit" value="submit" class="hideme"/>
</form>
</div>
<div>
<form action="#routes.Application.delete(id)" method="POST">
<input type="submit" value="delete" />
</form>
</div>
</li>
Along with some jquery that slides up a li after submission:
$(document).ready(function(){
$(".hideme").click(function(){
$(this).closest('li.item').slideUp();
});
});
However, since a form POST goes inside an Action that must a return an Ok(...) or Redirect(...) I can't get the page to not reload or redirect. Right now my Action looks like this (which doesn't compile):
newLinkedinForm.bindFromRequest.fold(
errors => {
Ok("didnt work" +errors)
},
linkedin => {
addLinkedin(linkedin.id, linkedin.url, linkedin.email, linkedin.emailsecondary, linkedin.name)
if (checkURL(linkedin.url)) {
linkedinParse ! Linkedin(linkedin.id, linkedin.url, linkedin.email, linkedin.emailsecondary, linkedin.name)
Ok(views.html.index)
}else{
Ok(views.html.index)
}
}
)
Is it possible to return Ok(...) without redirecting or reloading? If not how would you do a form POST while staying on the same page?
EDIT: Here is my attempt at handling form submission with jquery so far:
$(document).ready(function(){
$(".linkedinForm").submit(function( event ) {
var formData = {
'id' : $('input[name=id]').val(),
'name' : $('input[name=name]').val(),
'email' : $('input[name=email']).val(),
'emailsecondary' : $('input[name=emailsecondary]').val(),
'url' : $('input[name=url]').val()
};
jsRoutes.controllers.Application.createLinkedin.ajax({
type :'POST',
data : formData
})
.done(function(data) {
console.log(data);
});
.fail(function(data) {
console.log(data);
});
event.preventDefault();
};
});
This is an issue with the browser's behavior on form submission, not any of Play's doing. You can get around it by changing the behavior of the form when the user clicks submit.
You will first want to attach a listener to the form's submission. You can use jQuery for this. Then, in that handler, post the data yourself and call .preventDefault() on the event. Since your javascript is now in charge of the POST, you can process the data yourself and update your page's HTML rather than reloading the page.
What you need is use ajax to submit a form, check this: Submitting HTML form using Jquery AJAX
In your case, you can get the form object via var form = $(this), and then start a ajax with data from the form by form.serialize()
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function (data) {
alert('ok');
}
});
In order to accomplish this task, i had to use play's javascriptRouting
This question's answer helped a lot.
I'm not experienced with jquery so writing that correctly was difficult. For those that find this, here is my final jquery that worked:
$(document).ready(function(){
$("div#results").on("click", ".hideme", function(event) {
var $form = $(this).closest("form");
var id = $form.find("input[name='id']").val();
var name = $form.find("input[name='name']").val();
var email = $form.find("input[name='email']").val();
var emailsecondary = $form.find("input[name='emailsecondary']").val();
var url = $form.find("input[name='url']").val();
$.ajax(jsRoutes.controllers.Application.createLinkedin(id, name, email, emailsecondary, url))
.done(function(data) {
console.log(data);
$form.closest('li.item').slideUp()
})
.fail(function(data) {
console.log(data);
});
});
});
Note that my submit button was class="hideme", the div that gets filled with results from the DB was div#results and the forms were contained within li's that were class="item". So what this jquery is doing is attaching a listener to the static div that is always there:
<div id="results">
It waits for an element with class="hideme" to get clicked. When it gets clicked it grabs the data from the closest form element then sends that data to my controller via ajax. If the send is successful, it takes that form, looks for the closest li and does a .slideUp()
Hope this helps
I tried to solve the problem but I can't.
When upload a file in to FireFox I can not uploaded,
but file will uploading in to Opera okay.
Along Dropzone.js I used bootstrap and jquery as library.
In my opinion the problem is addEventListener?
Example video with a firebug: enter link description here
Snippet:
Dropzone.options.myDropzone = {
// Prevents Dropzone from uploading dropped files immediately
autoProcessQueue: false,
parallelUploads: 10,
thumbnailWidth: 120,
thumbnailHeight: 120,
init: function() {
var submitButton = document.querySelector("#submit-all");
var myDropzone = this;
submitButton.addEventListener("click", function() {
myDropzone.processQueue(); // Tell Dropzone to process all queued files.
});
this.on("addedfile", function(file) {
// Create the remove button
var removeButton = Dropzone.createElement("<button class='btn btn-xs btn-warning'>Remove file</button>");
// Listen to the click event
removeButton.addEventListener("click", function(e) {
// Make sure the button click doesn't submit the form:
e.preventDefault();
e.stopPropagation();
// Remove the file preview.
myDropzone.removeFile(file);
// // If you want to the delete the file on the server as well,
// // you can do the AJAX request here.
});
// Add the button to the file preview element.
file.previewElement.appendChild(removeButton);
});
} //dropzone init
}; //dropzone options
<script src="https://raw.githubusercontent.com/enyo/dropzone/master/dist/dropzone.js"></script>
<form action="upload/do_upload" class="dropzone" id="my-dropzone"></form>
<button type="button" class="btn btn-primary"><span id="submit-all">Submit all files</span></button>
<button type="button" class="btn btn-default">Reset</button>
Here you have a SPAN id="submit-all"
<button type="button" class="btn btn-primary"><span id="submit-all">Submit all files</span></button>
Then you have a querySelector for it:
var submitButton = document.querySelector("#submit-all");
Buttons have a click event, not spans. Maybe if you change the first line to this it should work:
<button type="button" id="submit-all" class="btn btn-primary"><span>Submit all files</span></button>
Give it a try and let us know.
I have some problem.
This is HTML document.
<input class="input" type='checkbox' id='ev_1' name='ev_1' checked='checked'/>
<label for='ev_1'>
<button class='ui-btn custom-btn' id='issue'>On</button>
</label>
This is javascript.
$("#issue").click(function(event){
alert("!");
}
I think that alert("!"); is occur when I click button.
But, not effect....
I want to show alert("!");
I need your help.
As Omar mentioned, your button should be outside the label and your input checkbox can be inside the label:
<label for='ev_1'>
<input class="input" type='checkbox' id='ev_1' name='ev_1' checked='checked' />On
</label>
<button class='ui-btn custom-btn' id='issue'>On</button>
Then you can have event handlers defined in the jQM pagecreate handler. To handle the checkbox, use a change event handler, and for the button a click handler:
$(document).on("pagecreate", "#page1", function () {
$("#issue").on("click", function (event) {
alert("Button Click");
});
$("#ev_1").on("change", function (event) {
alert("Checkbox Change");
});
});
Here is a working DEMO
I have a link on my ShowData.aspx page that I'm calling fancybox on.
Edit Data
My JQuery code is:
$("#editLink").fancybox({
'opacity': true,
'overlayShow': true,
'transitionIn': 'elastic',
'transitionOut': 'none'
});
The form EditData.aspx contains a save button. My problem is that after I click the save button the dialog does not close. Furthermore, after the save is performed on the server the client page redirects to EditData.aspx.
The expected outcome is that the dialog closes and I am returned to the parent page (ShowData.aspx).
Thanks!
I removed fancybox and found that this issue also occurs with regular JQuery dialogs. If you load a page that has a submit button (or posts back in any way) then your dialog will disappear and your main page will redirect to the dialog page. Here's a simple test:
HTML:
<div id="divClick"></div>
JQuery:
$(function () {
$("#divClick").dialog({
modal: true,
open: function () {
$(this).load('Postback.aspx');
},
title: 'Ajax Page'
});
});
Postback.aspx:
<body>
<form id="form1" runat="server">
<div>
</div>
Enter Name:
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</form>
</body>
Is there a way to attach an event to the postback from the dialog?
Furthermore, I modified Postback.aspx to include jscolor.js (a JQuery plugin) to see if it would work, it did not work. Any JQuery functionality doesn't seem to work in a dialog.
I ended up using an iFrame. This seems to do the job.
MainPage.aspx
<div id="divClick"><iframe src="Postback.aspx"></iframe></div>
JQuery:
$(function () {
$("#divClick").dialog({
modal: true,
title: 'iFrame Page',
width: 500,
height: 500
});
});
JQuery plugins in Postback.aspx work well and posting back doesn't close the dialog and redirect the main page.