1
Hello guys I’m having a huge problem, next I need to create an element and send via ajax wait for the return (done/fail) and perform an action on this element, but sending and creating elements can be done several times in a row and the return of ajax takes different times according to the size of the sent element. The error occurs when performing the action on the element after the return of ajax, as the element identifier may already have changed if another element has been sent then I have this problem within 3 locations, inside the done and fail that the solution will be the same for both and I have this error inside a setTimeOut that is inside Always.
Following is code/plugin link: (Obs.: is equal to the code I put here below in the post) http://jsfiddle.net/mateusfmello/uog1k69p/
Code: (Obs.: error simulation)
// elemento é um elemento do DOM
(function($){
$.fn.plug = function(optionsPlugin) {
var plugin = this;
var defaultsPlugin = {
debug : false
elementos : true
};
confPlugin = $.extend(true, defaultsPlugin, optionsPlugin);
var defaultsEnvio = {
ajax : {
type : 'post',
url : '',
data : {}
}
};
if (confPlugin.elementos) {
var idElement = 0;
var elementos = new Array();
// elemento é um elemento do DOM
var criaElemento = function() {
elementos.push('novo elemento com id: '+ idElement );
};
// elemento é um elemento do DOM
var removeElemento = function(elemento){
elemento.fadeOut(1000, function() {
elemento.remove();
});
};
// elemento é um elemento do DOM
var statusElemento = function(elemento, status){
if (status)
elemento.addClass('ele-sucesso');
else
elemento.addClass('ele-erro');
};
};
var enviaAjax = function(){
$.ajax(
confEnvio.ajax
)
.done(function(res) {
if (confPlugin.elementos)
statusElemento(elementos[idElement], true);
})
.fail(function(res) {
if (confPlugin.elementos)
statusElemento(elementos[idElement], false);
})
.always(function() {
if (confPlugin.elementos)
setTimeout(
function(){
removeElemento(elementos[idElement]);
}
, 2000
);
});
};
var confEnvio = {};
plugin.enviar = function(optionsEnvio){
confEnvio = $.extend(true, defaultsEnvio, optionsEnvio);
if (confPlugin.elementos)
criaElemento();
enviaAjax();
idElement++;
};
return this.each(function() {
return plugin;
});
};
})(jQuery);
var enviaLa = $.fn.plug({debug:true});
enviaLa.enviar();
enviaLa.enviar();
I intend to release this plugin on my Github, when I do this I will put the link here in this post.
What’s the idea of the last line
return this.each(function () {
?– Sergio
@Sergio line this.each I saw in a tutorial on how to create jquery plugins, from there it said that this line serves so that it can be done element.addClass('Lala'). meuPlugin(). removeClass('Lala'); in case if it didn’t it would have to go every function call on a different line.
– MateusFMello
Matthew, as I pointed out in my reply, just pass the idElement as the sending argument to Ajax and assign it to a local variable.
– Tobias Mesquita
@Tobymosque yes I did it came to work, however at the time I run I have to pass a message and each message is different in each execution, but always picks up the last message passed, I tried to do the same scheme, but it does not work with the message.
– MateusFMello
I don’t see why it wouldn’t work with a message, at what point in the code you’re adding it?
– Tobias Mesquita