I just use my code like this
Dropzone.options.attachkyc = {
maxFiles: 1,
accept: function(file, done) {
console.log("uploaded");
done();
},
init: function() {
this.on("maxfilesexceeded", function(file){
alert("No more files please!");
});
},
addRemoveLinks: true,
removedfile: function(file) {
var name = file.name;
$.ajax({
type: 'POST',
url: host+'upload/unfile',
data: "id="+name,
dataType: 'html'
});
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
//console.log();
}
};
When i upload second file is show alert "No more files please!", well is working taht file not uploaded, but my problem is, that second file i'm add it still show on my dropzone. My question is how i'm remove second file automaticly after i show the alert??
if you want to remove max file extended file you just have to use maxfilesexceeded method of dropzone
init: function() {
myDropzone.on("maxfilesexceeded", function (file) {
this.removeFile(file);
});
},
or you can also used one other method too
init: function() {
myDropzone.on("addedfile", function (file) {
if (myDropzone.files.length === 1) {
alert("You can Select upto 1 Pictures for Venue Profile.", "error");
this.removeFile(file);
}
});
},
I finaly sovle my problem.
on at
init: function() {
this.on("maxfilesexceeded", function(file){
alert("No more files please!");
});
},
i change it into like this
init: function() {
this.on("maxfilesexceeded", function(file){
alert("No more files please!");
this.removeFile(file);
});
},
is work perfectly i want.
If you are looking to keep the newly added file and remove the first file that was added you can do something like what is below:
init: function() {
myDropzone.on("maxfilesexceeded", function(file) {
this.removeFile(this.files[0]);
});
},
You could obviously update the index of this.files to access other files in the array as well.
Related
I am facing problem in jquery
i have the following code which contains jquery-ui-tooltip with custom content.
$('a').tooltip({
items: "a ,[title]",
content: function() {
$('a').mouseenter(function(e) {
var tempid= $(this).attr('title');
console.log("hhh "+tempid);
$.ajax({
type:"POST",
url:"page1.php",
data:"id=tempid",
error:function(){
console.log(event);
return "<P>Some Problem occured</p>";
},
success:function(e){
console.log(event);
}
});
});
return "<p>ha hdj fj fkfod jf kjf ckfd fkj</p>";
}
})
Now the problem is that when mouse enter on any link ,then success part execute 1 times .when mouse enter on the same link then it executes twice and so on...
But i want it to execute only once even if mouse enter twice or more.
Use a global variable to check if the mouse has already entered.
var hasNotEntered = true;
$('a').tooltip({
items: "a ,[title]",
content: function () {
$('a').mouseenter(function (e) {
if (hasNotEntered) {
var tempid = $(this).attr('title');
console.log("hhh " + tempid);
$.ajax({
type: "POST",
url: "page1.php",
data: "id=tempid",
error: function () {
console.log(event);
return "<P>Some Problem occured</p>";
},
success: function (e) {
console.log(event);
}
});
}
});
return "<p>ha hdj fj fkfod jf kjf ckfd fkj</p>";
}
});
I am having a Jquery dialog with two buttons Add and Cancel. User will input few fields and on pressing Add button, I am doing UI modifications and validations. After all the operations are done, I am closing the dialog. But issue is, even though I am closing the dialog after save and other operations, but the dialog is getting closed before the operations gets completed.
Below is my Jquery dialog code,
dlg.dialog({
height:300,
width:600,
modal:true,
autoOpen:true,
title: "Add Property",
closeOnEscape:true,
buttons: {
"Cancel": function() {
$(this).dialog("close");
},
"Create Property": function() {
//Validate Property
// Save Property
$(this).dialog("close");
}
}
}
});
function save() {
$.ajax({
type: 'POST',
url: ServiceUrl,
data: parameter,
success : function(data) {
// Convert the response text to JSON format
var jsonData = eval('(' + data + ')');
if (jsonData.results) {
// success
}
}
});
};
In above code I am executing $(this).dialog("close"); after validate and save function but my dialog is getting closed , before these function finishes. This behavior doesn't happen if I execute line by line by keeping breakpoints in firebug. Please help in resolving and help me in understanding. Thanks in advance.
Since the .ajax() call(s) are asynchronous, the $(this).dialog("close"); does not wait for the .ajax() call to finish. Put the dlg.dialog("close"); inside the success of the .ajax() call after you see that the save/validations were successful.
dlg.dialog({
height:300,
width:600,
modal:true,
autoOpen:true,
title: "Add Property",
closeOnEscape:true,
buttons: {
"Cancel": function() {
$(this).dialog("close");
},
"Create Property": function() {
//Validate Property
// Save Property
$.ajax({
success: function (response) {
//test to see if the response is successful...then
dlg.dialog("close");
},
error: function (xhr, status, error) {
//code for error condition - not sure if $(this).dialog("close"); would be here.
}
})
}
}
}
});
Your logic should look something like:
dlg.dialog({
height:300,
width:600,
modal:true,
autoOpen:true,
title: "Add Property",
closeOnEscape:true,
buttons: {
"Cancel": function() {
$(this).dialog("close");
},
"Create Property": function() {
$.ajax({//Validate request
...
success:function(response){
$.ajax({//Save request
...
success:function(response){
//close the dialog here
}
});
}
});
}
}
}
});
Either you can chain your ajax calls like this, or you can make them asynchronous by passing an async:false option.
I understand the need for a global "save" function, as it eliminates the need to write the same script over and over again.
Try doing something like this:
dlg.dialog({
height: 300,
width: 600,
modal: true,
autoOpen: true,
title: "Add Property",
closeOnEscape: true,
buttons: {
"Cancel": function () {
$(this).dialog("close");
},
"Create Property": function () {
save(true); //!!!
}
}
});
And then:
function save() {
$.ajax({
type: 'POST',
url: ServiceUrl,
data: parameter,
success: function (data) {
// Convert the response text to JSON format
var jsonData = eval('(' + data + ')');
if (jsonData.results) {
//!!!! Then close the dialog
dlg.dialog("close") //!!!!
}
}
});
}
This way, your close function is not called until the AJAX response is received.
EDIT: I would also set the dlg variable and the save() function-name as globals by attaching them to the window object like so:
window.dlg = $("#myDialogElement");
window.save = function () {
//function stuff here
}
This will ensure they're always available.
I'm still finding my way with Backbone and I've always use Prototype instead of jQuery in the past so please forgive me if I'm doing something stupid.
I'm trying to develop a UI containing several connected unordered lists where each sortable list is represented by a separate Backbone collection. I'm using ICanHaz and Mustache templates but that's not of importance for my question.
When dragging items between the lists, how would I best achieve the automatic updating of the collections (remove a model from one and insert it into another)? I'm currently trying to use the receive and remove methods in the jQueryUI Sortable interaction — am I at least on the right lines?
var WS = {};
(function(ns) {
ns.Item = Backbone.Model.extend();
ns.Content = Backbone.Collection.extend({
model: ns.Item,
url: location.href,
initialize: function(el) {
this.el = $(el);
this.deferred = this.fetch();
},
recalculate: function() {
var count = this.length;
this.el.next(".subtotal").html(count);
},
setOrder: function() {
$.ajax({
url: this.url + "/reorder",
type: "POST",
data: "tasks=" + $(this.el).attr("id") + "&" + this.el.sortable("serialize")
});
}
});
ns.ContentRow = Backbone.View.extend({
tagName: "li",
className: "item",
events: {
"click .delete": "destroy"
},
initialize: function(options) {
_.bindAll(this, "render", "destroy");
this.model.bind("change", this.render);
this.model.view = this;
},
render: function() {
var row = ich.item(this.model.toJSON());
$(this.el).html(row);
return this;
},
destroy: function() {
if (confirm("Really delete?")) {
this.model.destroy({
success: function(model, response) {
$(model.view.el).remove();
},
error: function(model, response) {
console.log(response);
}
});
}
}
});
ns.ListView = Backbone.View.extend({
initialize: function(collection) {
this.el = collection.el;
this.collection = collection;
this.collection.bind("add", this.addOne, this);
_.bindAll(this, "addOne");
this.el.sortable({
axis: "y",
connectWith: ".tasks",
receive: _.bind(function(event, ui) {
// do something here?
}, this),
remove: _.bind(function(event, ui) {
// do something here?
}, this),
update: _.bind(function(event, ui) {
var list = ui.item.context.parentNode;
this.collection.setOrder();
}, this)
});
},
insert: function(item) {
var prefix = this.el.parentsUntil('ul').parent().attr("id"),
view = new ns.ContentRow({
model: item,
id: prefix + "_" + item.id
});
this.el.append(view.render().el);
},
addOne: function(item) {
if (item.isNew()) {
item.save({}, {
success: _.bind(function(model, response) {
// I should set id from JSON response when live
model.set({ id: this.collection.length });
this.insert(model);
}, this)
});
} else {
this.insert(item);
}
},
addAll: function() {
this.collection.each(this.addOne);
},
render: function() {
this.collection.deferred.done(_.bind(function() {
this.addAll();
}, this));
}
});
ns.AppView = Backbone.View.extend({
lists: [],
initialize: function(holder) {
holder.find("ul").each(_.bind(function(index, list) {
var Items = new WS.Content(list),
App = new WS.ListView(Items);
App.render();
this.lists.push(Items);
}, this));
}
});
})(WS);
$(document).ready(function() {
var App = new WS.AppView($("#tasks"));
});
You are on the right track. You will probably want to add the id of each sortable element into the template somewhere. Then when you receive the event, you know which model to add or remove from the collection. For example add...
<div data-id={{id}}> ... my thing ... </div>
And in the sortable call get the target's id attribute and call Collection.add() or remove()
Just use Backbone.CollectionView.. it has this functionality built in out of the box.
var listView = new Backbone.CollectionView( {
el : $( "#list1" ),
sortable : true,
sortableOptions : {
connectWith : "#list2"
},
collection : new Backbone.Collection
} );
var listView = new Backbone.CollectionView( {
el: $( "#list2" ),
sortable : true,
sortableOptions : {
connectWith : "#list1"
},
collection : new Backbone.Collection
} );
Is it possible to work with combobox as with usual jquery-ui ajax autocomplete field?
What I need?
I want there will be some default options and when user try to put any letters it must connect to the server to find requested information (as usual remote json autocomplete).
Is it possible at all?
Here's a heavily modified version of the jQueryUI example (gist):
$.widget("ui.combobox", {
_create: function() {
var _self = this
, options = $.extend({}, this.options, {
minLength: 0,
source: function(request, response) {
if (!request.term.length) {
response(_self.options.initialValues);
} else {
if (typeof _self.options.source === "function") {
_self.options.source(request, response);
} else if (typeof _self.options.source === "string") {
$.ajax({
url: _self.options.source,
data: request,
dataType: "json",
success: function(data, status) {
response(data);
},
error: function() {
response([]);
}
});
}
}
}
});
this.element.autocomplete(options);
this.button = $("<button type='button'> </button>")
.attr("tabIndex", -1)
.attr("title", "Show All Items")
.insertAfter(this.element)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("ui-corner-right ui-button-icon")
.click(function() {
if (_self.element.autocomplete("widget").is(":visible")) {
_self.element.autocomplete("close");
return;
}
_self.element.autocomplete("search", "");
_self.element.focus();
});
}
});
Usage:
$("input_element_selector").combobox({
initialValues: ['array', 'of', 'values'],
source: /* <-- function or string performing remote search */,
/* any other valid autocomplete options */
});
Example: http://jsfiddle.net/Jpqa8/
The widget uses the supplied initialValues array as the source when the length of the search is "0" (this happens when the user clicks the dropdown button).
Supply a source parameter (function or string) that performs the remote search. You can also use any other options you would usually use with the autocomplete widget.
In my extension where the overlay.js comprises of the following events:
var sto =
{
onLoad: function() {...},
onMenuItemCommand: function(e) {...},
onToolbarButtonCommand: function(e) {...},
};
window.addEventListener("load", function () { sto.onLoad(); }, false);
I would need a listener fired every time a button is clicked in a loaded page. How can I achieve this?
Well I'm not sure if that's what u want but u can try to do an event delegation on the entire document:
var document_mouseup_lst = EventListener.createEventListener();
doc.addEventListener("mouseup", document_mouseup_lst, false);
document_mouseup_lst.addEvent("mouseup", function click(e, callback, object){
var element = e.target;
if(element.tagName.toLowerCase() === 'button') {
if (e.which == 1) { // left click
// do whatever u want
} else if (e.which == 2) { // middle click
// do whatever u want
}
}
return false;
});
btw in order to create the eventlistener (the EventListener object which got the createEventlistener method) I used this page Ajaxian >> An alternative way to addEventListener
I found the solution - was quite easy. Ok here is the source:
https://developer.mozilla.org/en/Code_snippets/Interaction_between_privileged_and_non-privileged_pages
and the modified code:
var sto =
{
onLoad: function() {...},
onMenuItemCommand: function(e) {...},
onMouseClick: function(e) {...},
onToolbarButtonCommand: function(e) {...},
};
window.addEventListener("load", function () { sto.onLoad(); }, false);
document.addEventListener("click", function(e) { sto.onMouseClick(e); }, false, true);