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 +=" Até <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"/>
Até
<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;"/>
<img src="<c:url value="/includes/images/bt_voltar.jpg" />" id="voltar" style="cursor:pointer;cursor:hand;"/>
</td>
</tr>
</table>
</s:form>