Multiplas requests ajax

[budnys 0]

Oi,

 

tenho o seguinte codigo js, baseado em Backbone:

 

js:

events: {
    "click #form-save-country": "saveUserAttribute",
    "click #form-save-description": "saveUserAttribute",
    "click #form-all": "saveAllUserAttributes"
},


saveUserAttribute: function(e) {
e.preventDefault();


    var $btn = this.$(e.currentTarget);
var form = $btn.closest('form');
    var attributeValue = form.find('.js-attribute').val();


    $.ajax({
        url: form.attr('action').replace('attributeValue', encodeURIComponent(attributeValue)),
        type: 'PUT',
        data: {data: form.serialize()}
    })
    .success(function(data) {
        if (data.id || data.ID || data.data) {
            popModal('Success!', 'Attribute saved successfuly!');
            if (data.data) {
                form.find("div.msg-container p").html(data.data).show();
            }
        } else {
            popModal('Error!', 'The entered format doesn\'t fit the available formats');
        }
    })
    .fail(function(response) {
        popModal('Error!', response.responseText);
    });
},


saveAlluserAttributes: function(e) {
// Not correct, trying to find a better solution =D

e.preventDefault();

var $btn = this.$(e.currentTarget);
$btn.attr("disabled", "disabled").html("Saving content...");

var buttons = this.$el.find('.save-attribute');

var successSavedAttributes = [];
var failSavedAttributes = [];
var failSendedAttributes = [];

var promiseLoop = buttons.each(function() {

// set variables to using in the ajax call
var form = $(this).closest('form');
// getting the name of the attribute from the action's url
var attributeName = $(form.attr('action').split("/")).get(-2).replace(/\b[a-z]/g, function(letter) { return letter.toUpperCase(); });

var attributeValue = form.find('.js-attribute').val();

var promise = $.ajax({
url: form.attr('action').replace('attributeValue', encodeURIComponent(attributeValue)),
type: 'PUT',
data: {data: form.serialize()}
});


$.when(promise)
.done(function(o){
console.log("promise: ");
console.log(o);
successSavedAttributes.push(o.responseText);
})
.fail(function(o){
failSavedAttributes.push(o.responseText);
})
.always(function(o){
//console.log(o);
});
});

$.when(promiseLoop).done(function(o){
console.log("promiseLoop: ");
console.log(o);
})

console.log("successSavedAttributes: " + successSavedAttributes);
console.log("failSavedAttributes: " + failSavedAttributes);
}

e abaixo o html que utiliza o js acima:

html:

<form action="/user/1234/country/attributeValue" class="form-inline">
  <select name="category" class="js-attribute form-control">
      <option>- Choose a country -</option>
      <option value="0" selected>pais01</option>
      <option value="1" selected>pais02</option>
      <option value="2" selected>pais03</option>
      <option value="3" selected>pais04</option>
      <option value="4" selected>pais05</option>
  </select>
  <button type="submit" class="btn btn-default save-attribute" id="form-save-country">Save</button>
</form>


<form action="/user/1234/description/attributeValue" class="form-inline" data-msg-container="msg-description">
<div class="form-group">
 <input type="text" class="form-control js-attribute" size="100" name="description" id="description" value="{{ user.description }}">
 <button type="submit" id="form-save-description" class="btn btn-default save-attribute">Save</button>
</div>
</form><button class="btn btn-primary" id="form-all">Save all</button>

Gostaria de saber como implementar a funcao saveAllUserAttributes sem fazer com que abra a modal para cada form.

 

Uma implementacao inicial que fiz foi um loop entre os forms e efetuando o click do botao que faz com que execute o saveUserAttribute para cada form, mas dessa forma "pipoca" modal pra todos os lados. Estive olhando as Promises, mas ainda nao obtive algo definitivo para pegar todos os responses das requisicoes e depois gerar mensagens de erro e sucesso para cada caso.

 

Se puderem me ajudar, agradeco.

 

ps: desculpem a falta de acentos, cedilhas e etc, estou num teclado diferente do meu.