1

Eu tenho um evento do botão que aciona um ajax que carrega os dados como exemplo.

$('#table_com_parcelas tbody').append('<tr><td class="align">' + x + ' de ' + parcelas + '</td><td class="align">' + vencimento + '</td><td class="align">R$ ' + mascaraValor(valor.toFixed(2)) + '</td><td class="align"><select id="select-' + x + '" onchange="('+this.id+')>"' + insere_option() + '</select></td></tr>');

O ajax carrega de 1 a 12 selects, depende da quantidade de parcelas escolhida, porém o evento onchange="('+this.id+')" carraga o id do botão e não do select em questão.

existe alguma forma de inserir o onchange() após todos os selects terem sidos preenchidos? ou tem outra forma de selecionar o select que foi clicado

abaixo funções utilizadas;

while (x <= parcelas) {
        data_sun += 30;
        var vencimento = adicionarDiasData(data_sun, data);
        var valor = total / parcelas;
        $('#table_com_parcelas tbody').append('<tr><td class="align">' + x + ' de ' + parcelas + '</td><td class="align">' + vencimento + '</td><td class="align">R$ ' + mascaraValor(valor.toFixed(2)) + '</td><td class="align"><select id="select-' + x + '">' + insere_option() + '</select></td></tr>');
        x++;
    }//carrega os selects
type_of_payment();//chama a função que seta os outros selects. Aqui o onchange está funcionando. 

Carraga options;

function insere_option() {
    var options = "";
    options += "<option value=''>Selecione</option>";
    options += "<option value='1'>Boleto</option>";
    options += "<option value='2'>Cartão</option>";
    options += "<option value='3'>Cheque</option>";
    options += "<option value='4'>Dinheiro</option>";
    options += "<option value='5'>Transferência</option>";
    return options;
}

Como todos são aninhados tenho outra função que seta os options subsequentes com a mesmo item selecionado.

function type_of_payment() {
    var selects = $("#table_com_parcelas select");
    var index = null;
    var valor = null;
    selects.on('change', function () {
        var valor = this.value;
        indice = selects.index(this);
        selects.each(function (index) {
            if (index > indice) {
                $(this).val(valor);
            }
        });
    });
}

2 Respostas 2

1

Cara pelo que entendi o problema é que o this que você está colocando está se referindo a um escopo diferente no caso a função do evento do botão, mude de onchange="funcao('+this.id+')" para onchange="funcao(this.id)".

No seu código

  1. Coloquei alguns valores estáticos para poder simular;
  2. Removi as funções desconhecidas;
  3. Adicionei:

onchange="teste(this.id)"

function teste(that){
   console.log(that);
}

var x = 1;//para teste
var parcelas = 10;//para teste

while (x <= parcelas) {
  var vencimento = '2017-09-15'; //para teste
  var valor = 100; //para teste
        $('#table_com_parcelas tbody').append('<tr><td class="align">' + x + ' de ' + parcelas + '</td><td class="align">' + vencimento + '</td><td class="align">R$ ' + valor.toFixed(2) + '</td><td class="align"><select onchange="teste(this)" id="select-' + x + '">' + insere_option() + '</select></td></tr>');
        x++;
    }//carrega os selects
type_of_payment();

function teste(that){
  alert(that.value);
}

function type_of_payment() {
    var selects = $("#table_com_parcelas select");
    var index = null;
    var valor = null;
    selects.on('change', function () {
        var valor = this.value;
        indice = selects.index(this);
        selects.each(function (index) {
            if (index > indice) {
                $(this).val(valor);
            }
        });
    });
}

function insere_option() {
    var options = "";
    options += "<option value=''>Selecione</option>";
    options += "<option value='1'>Boleto</option>";
    options += "<option value='2'>Cartão</option>";
    options += "<option value='3'>Cheque</option>";
    options += "<option value='4'>Dinheiro</option>";
    options += "<option value='5'>Transferência</option>";
    return options;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table_com_parcelas">
<tbody></tbody>
</table>

7
  • eu tinha feito dessa forma que você mencionou porém o on("change",...) da função type_of_payment() deixa de funcionar.
    – WMomesso
    Commented 15/09/2017 às 14:40
  • Pode me explicar o que a função type_of_payment deveria fazer? Commented 15/09/2017 às 14:44
  • Exemplo, o usuário seleciona o primeiro select com uma opção da forma de pagamento e a função seta os outros selects com a mesma forma de pagamento, caso seja feito em 5 parcelas e o primeiro for seleciona em cartão ele seta o restante como cartão também.
    – WMomesso
    Commented 15/09/2017 às 14:48
  • Pelo código da sua função ele vai setar tudo que tiver um índice maior que o alterado, execute o meu exemplo e veja como ele se comporta. se você quiser que alteração afete todos basta substituir o if (index > indice) { $(this).val(valor); } por $(this).val(valor); Commented 15/09/2017 às 14:51
  • sim exatamente isto ele deve alterar apenas os indices maiores, e isso está correto e no seu exemplo ele também está correto, mas queria criar um alert informando o valor que foi selecionado, e essa função o onchange não está chamando
    – WMomesso
    Commented 15/09/2017 às 14:54
0

O problema foi solucionado inserindo

<script>
function func(id) {
    alert(id);
}
</script>

Na pagina de exibição do conteúdo, o mesmo não estava sendo reconhecido no main.js após o ajax popular os selects.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .