How to remove table row by passing its id to an object?

0

I would like to click the remove table row button, execute an ajax function that would pass the line id to the java method. The deletion on the page works, but I can not get the id to exclude the right item in the arrayList in java.

$("#associarCanalDeVendaAPlano").on("click", function(e){

            e.preventDefault();
            var codigo = $('#canal').val();

            var id = $("#canal option:selected").text();
            $('#tabelaCanais').on('click', ".remover", function(e){

                    var $this = $(this);

                    $   .ajax({
                        type: "POST",
                        url: $.url.get('removerVigenciaCanalVendaPlano'),
                        data:{'vigenciaCanalVendaVO.canalVendaVO.nome':$("#id").val()},
                        beforeSend: function() {
                            bloquearTela();
                    },
                    complete: function() {
                            desbloquearTela();

                    } ,success: function(data) {
                        alert('success');
                        $this.closest('tr').remove();
                    },
                    error: function(data){
                        alert('error');
                    }
                    });
                });             
                $.ajax({
                    type: "POST",
                    url:  $.url.get('salvarRelacaoCanalVendaPlano'),
                    data: {'vigenciaCanalVendaVO.canalVendaVO.codigo':$("#canal").val(), 'vigenciaCanalVendaVO.dataInicioVigenciaAssociacaoPlano' : $("#dataInicioVigencia").val(),
                        'vigenciaCanalVendaVO.dataFimVigenciaAssociacaoPlano':$("#dataFimVigencia").val(),'vigenciaCanalVendaVO.canalVendaVO.nome':$("#canal option:selected").text()},
                    beforeSend: function() {
                            bloquearTela();
                    },
                    complete: function() {
                            desbloquearTela();

                    } ,success: function(data) {

                        if($("#canal").val() != null){
                            //alert('sucess');
                            //alert('Estou aqui'+$('#canal').val()+"  "+ $('#dataInicioVigencia').val()+"  "+$('#dataFimVigencia').val());

                             var coluna = "<tr>";

                             coluna += "<td width='40%'  align='center'><input type='text' disabled = 'disabled'   value=' "+$("#canal option:selected").text()+"' style='width: 136px;' /></td>";
                             coluna +="<td width='40%'  align='center'><input type='text'  mask = '99/99/9999' disabled = 'disabled'  size='12' maxlength='10'  value="+$("#dataInicioVigencia").val()+" name='vigenciaCanalVendaVO.dataInicioVigenciaAssociacaoPlano'/>"
                             coluna +=" &nbsp;&nbsp;&nbsp;&nbsp;At&eacute;&nbsp;&nbsp;&nbsp;&nbsp; <input type='text' mask='99/99/9999'  disabled = 'disabled'  size='12' maxlength='10'  value="+$("#dataFimVigencia").val()+" name='vigenciaCanalVendaVO.dataFimVigenciaAssociacaoPlano'/></td>";
                             coluna +="<td align='center'><img src='/EEDI-Administrativo/includes/images/bt_remover.gif' class='remover' id='"+id+"'  style='cursor:pointer;cursor:hand;'/></td>";
                             coluna += "</tr>";

                             $("#canal option[value='"+$("#canal").val() +"']").remove();
                             //alert(coluna);    
                             ($('#tabelaCanais')).append(coluna);
                        }
                    },
                    error: function(data){
                        //alert('error');
                    }

                });

html page:

 <s:form action="incluir" id="form">
    <jsp:include page="../menu.jsp"></jsp:include>
    <table  style="width: 100%" class="tabela_interna">
        <tr>
            <th colspan="5">Plano</th>
        </tr>
        <tr>
            <td width="14%" class="td_label"><label for="nome">Nome:</label></td>
            <td width="90%" colspan="4">
                <s:textfield name="planoVO.nome" id="nome" data-required="Nome" maxlength="50" size="50"/>
            </td>
        </tr>
        <tr>
            <td width="10%" class="td_label"><label for="valorTaxa">Valor Taxa (R$):</label></td>
            <td width="90%" colspan="4">
                <s:textfield name="planoVO.valorTaxa" id="valorTaxa" data-type="currency" maxlength="6" size="6"/>
            </td>
        </tr>
        <tr>
            <th colspan="5">Tipo Cobrança / Valor</th>
        </tr>
        <tr>
            <td class="td_label" width="10%"></td>
            <td class="td_label" align="center" width="20%">Valor Titular (R$)</td>
            <td class="td_label" align="center" width="20%">Valor Dependente (R$)</td>
            <td class="td_label" align="center" colspan="2" width="50%">Período de Carência</td>
        </tr>

        <s:iterator value="planoVO.listaDeValorPlano" var="tipoCobrancaEValoPlano">
            <tr>
                <td class="td_label" align="center"><s:property value="tipoCobranca"/></td>
                <td class="td_dados" align="center">
                    <input type="text" maxlength="10" size="12" id="<s:property value='tipoCobranca'/>_T" name="mapTipoCobrancaEValor['<s:property value='tipoCobranca'/>_T']" value="<s:property value='valorTitular'/>" data-required="Valor Titular / <s:property value='tipoCobranca'/>" data-type="currency"/>
                </td>
                <td class="td_dados" align="center">
                    <input type="text" maxlength="10" size="12" id="<s:property value='tipoCobranca'/>_D" name="mapTipoCobrancaEValor['<s:property value='tipoCobranca'/>_D']" value="<s:property value='valorDependente'/>" data-required="Valor Dependente / <s:property value='tipoCobranca'/>" data-type="currency" />
                </td>
                <td class="td_dados" align="center" colspan="2">
                    <textarea cols="70" rows="4" id="<s:property value='tipoCobranca'/>" name="mapTipoCobrancaEPeriodoCarencia['<s:property value='tipoCobranca'/>']" data-required="Período de Carência / <s:property value='tipoCobranca'/>" ><s:property value='periodoCarencia'/></textarea>
                </td>
            </tr>
        </s:iterator>
    </table>

    <table  id="tabelaCanais" style="width: 100%" class="tabela_interna">
                <tbody>
            <tr>
                <th colspan="3">Canal / Vigência</th>
            </tr>
                <tr>
              <td class="td_label" colspan="1"  align="center">Canal de Venda</td>
              <td class="td_label"  colspan="1"   align="center">Vigência</td>
              <td class="td_label"   align="center">Ações</td>
            </tr>
            <tr>

                <td colspan="" width="40%" align="center">  
                    <s:select name="vigenciaCanalVendaVO.canalVendaVO.codigo" id="canal" value="vigenciaCanalVendaVO.canalVendaVO.nome" list="listaDeCanais" headerKey="0"  listKey="codigo" listValue="nome" />
                </td>
                <td width="40%" align="center">
                     <s:textfield name="vigenciaCanalVendaVO.dataInicioVigencia" id="dataInicioVigencia" data-mask="data" data-date-type="default" size="12"/>
                     &nbsp;&nbsp;&nbsp;&nbsp;Até&nbsp;&nbsp;&nbsp;&nbsp;
                     <s:textfield name="vigenciaCanalVendaVO.dataFimVigencia" id="dataFimVigencia" data-mask="data" data-date-type="default" size="12"/>

               </td>
                <td align="center" width="10%">
                    <img src="<c:url value="/includes/images/bt_adicionar.gif" />" id="associarCanalDeVendaAPlano"   style="cursor:pointer;cursor:hand;"/>
               </td>                    
            </tr>


    </tbody>
   </table>
        <br/><br/><br/><br/>
    <table id="tabela_botoes" style="width: 100%">
        <tr>
            <td align="center" width="100%">
                <img src="<c:url value="/includes/images/bt_incluir.gif" />" id="incluir" style="cursor:pointer;cursor:hand;"/>
                &nbsp;&nbsp;&nbsp;
                <img src="<c:url value="/includes/images/bt_voltar.jpg" />" id="voltar" style="cursor:pointer;cursor:hand;"/>
            </td>
        </tr>
    </table>

</s:form>
    
asked by anonymous 24.10.2014 / 14:57

1 answer

1

You are delegating the click on an element with class remover . I see in your HTML that this element has ID so you just need to use $this.attr('id') .

Since the this within the event handler is already the element you clicked and has the ID you want to use. So I suggest using:

data: {'vigenciaCanalVendaVO.canalVendaVO.nome': $this.attr('id')},
    
24.10.2014 / 15:44