0
I have a view that by clicking a button opens a modal and by clicking the modal button inserts a line in a table and is working correctly. Included in this line is a <a class="btn-remove-row" href=""><i class="mdi mdi-close-circle font-18 text-danger"></i></a> that when clicking would have to remove the line, but instead the page is reloaded.
@extends('layouts.app')
@section('title', 'Incluir Orçamento')
@section('content')
<div class="row">
<div class="col-md-12">
<div class="card-box">
<ul class="nav nav-tabs tabs-bordered">
<li class="nav-item">
<a href="#zone-b1" data-toggle="tab" aria-expanded="true" class="nav-link active">
<i class="fi-paper mr-2"></i>Dados do Orçamento
</a>
</li>
</ul>
<form method="POST" action="{{ route('orders.store') }}">
@csrf
@include('alerts.error-message')
<div class="tab-content">
<div class="tab-pane show active" id="zone-b1">
<div class="row">
<div class="col-lg-4">
<div class="form-group mt-3">
<label>Imóvel
<span class="text-danger">*</span>
</label>
<select class="form-control" name="property_id">
<option value="">Selecione</option>
<option></option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mt-3">
<label>Cabeçalho
<span class="text-danger">*</span>
</label>
<select class="form-control" name="property_id">
<option value="">Selecione</option>
<option></option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mt-3">
<label>Rodapé
<span class="text-danger">*</span>
</label>
<select class="form-control" name="property_id">
<option value="">Selecione</option>
<option></option>
</select>
</div>
</div>
<div class="col-lg-12">
<div class="form-group mt-3">
<label>Apresentação
<span class="text-danger">*</span>
</label>
<textarea id="elm1" name="presentation"></textarea>
</div>
</div>
<div class="col-lg-12">
<div class="form-group mt-3 table-responsive">
<label>Serviços
<span class="text-danger">*</span>
</label>
<div class="col-12 mb-3 pl-0">
<a href="#" data-toggle="modal" data-target="#myModal"
class="btn btn-custom waves-light waves-effect">Incluir Serviço</a>
</div>
<table class="table">
<thead>
<tr>
<th>Serviço</th>
<th>Descrição</th>
<th>Valor</th>
<th>Excluir</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mt-3">
<label>Forma de Pagamento
<span class="text-danger">*</span>
</label>
<select class="form-control" name="payment_method">
<option value="">Selecione</option>
<option value="1">À vista</option>
<option value="2">Entrada + 30 dias</option>
<option value="3">Entrada + 30 + 60 dias</option>
<option value="4">Entrada + 30 + 60 + 90 dias</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mt-3">
<label>Valor
<span class="text-danger">*</span>
</label>
<input class="form-control" type="text" name="price">
</div>
</div>
<div class="col-lg-4">
<div class="form-group mt-3">
<label>Validade do Orçamento
<span class="text-danger">*</span>
</label>
<input class="form-control" type="date" name="price">
</div>
</div>
<div class="col-lg-12">
<div class="form-group mt-3">
<label>Considerações Importantes
<span class="text-danger">*</span>
</label>
<textarea id="elm1" name="comments"></textarea>
</div>
</div>
<div class="col-lg-12">
<div class="form-group text-right m-b-0">
<button class="btn btn-custom waves-effect waves-light" type="submit">
Salvar
</button>
<a href="{{ route('orders.index') }}"
class="btn btn-light waves-effect m-l-5">
Voltar
</a>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!--Modal-->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Incluir Serviço</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="service-modal">Serviço
<span class="text-danger">*</span>
</label>
<select class="form-control" id="service-modal" name="service-modal">
<option value="">Selecione</option>
<option value="1">Serviço 1</option>
<option value="1">Serviço 2</option>
<option value="1">Serviço 3</option>
<option value="1">Serviço 4</option>
</select>
</div>
<div class="form-group mt-3">
<label for="price-modal">Valor
<span class="text-danger">*</span>
</label>
<input class="form-control" type="text" id="price-modal" name="price-modal">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light waves-effect" data-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-custom waves-effect waves-light btn-add-row">Incluir</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
@endsection
@push('scripts')
<script>"use strict";
$(".btn-remove-row").click(function (event) {
event.preventDefault();
console.log("teste");
var tr = $(this).closest("tr");
tr.fadeOut(400, function () {
tr.remove();
});
});
$(".btn-add-row").click(function (event) {
event.preventDefault();
var newRow = $('<tr>');
var cols = '';
cols += '<td></td>';
cols += '<td></td>';
cols += '<td></td>';
cols += '<td>';
cols += '<a class="btn-remove-row" href=""><i class="mdi mdi-close-circle font-18 text-danger"></i></a>';
cols += '</td>';
newRow.append(cols);
$(".table").append(newRow);
$("#myModal").modal("toggle")
});
</script>
@endpush
I put but now nothing happens. I put a console.log in the btn-remove-Row function but nothing happens.
– Marcelo
@Marcelo Editei para vc ver o codigo funcionando é algum erro no seu javascript que impede a função de ser chamada
– Ari Santos
I don’t know, I put it the way I said it but nothing happened. I changed the code as my answer and it worked as needed.
– Marcelo
Great the imprtante is to have worked vlw
– Ari Santos
Vlw for the help.
– Marcelo