0
I need to send a formulario with ajax, so that there is no recharging of página.
In case there’s no way, I need the screen to go back to where it was.
On the website I have these tabs, the tab where there will be the submit is AGENDA DE REUNIÕES if you have any way of going and controller automatically returns to her.
My code is like this:
<script>
$('.enderecoOutro').hide();
$('.enderecoMembro').hide();
$('input[type=radio][name=FLG_IDENT_ENDER]').change(function() {
if(this.value == 'M'){
$('.enderecoOutro').hide();
$('.enderecoMembro').show();
}else{
$('.enderecoOutro').show();
$('.enderecoMembro').hide();
};
});
$('#divBasic').show();
$('#divMembros').hide();
$('#divAgenda').hide();
$('#divRelatorio').hide();
$('#abaBasic').click(function(event) {
$('#abaBasic').addClass('active');
$('#abaMembros').removeClass('active');
$('#abaAgenda').removeClass('active');
$('#abaRelatorio').removeClass('active');
$('#divBasic').show();
$('#divMembros').hide();
$('#divAgenda').hide();
$('#divRelatorio').hide();
});
$('#abaMembros').click(function(event) {
$('#abaBasic').removeClass('active');
$('#abaMembros').addClass('active');
$('#abaAgenda').removeClass('active');
$('#abaRelatorio').removeClass('active');
$('#divBasic').hide();
$('#divMembros').show();
$('#divAgenda').hide();
$('#divRelatorio').hide();
});
$('#abaAgenda').click(function(event) {
$('#abaBasic').removeClass('active');
$('#abaMembros').removeClass('active');
$('#abaAgenda').addClass('active');
$('#abaRelatorio').removeClass('active');
$('#divBasic').hide();
$('#divMembros').hide();
$('#divAgenda').show();
$('#divRelatorio').hide();
carregar();
});
$('#abaRelatorio').click(function(event) {
$('#abaBasic').removeClass('active');
$('#abaMembros').removeClass('active');
$('#abaAgenda').removeClass('active');
$('#abaRelatorio').addClass('active');
$('#divBasic').hide();
$('#divMembros').hide();
$('#divAgenda').hide();
$('#divRelatorio').show();
});
function carregar() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
selectable: true,
editable: true,
select: function(start, end, allDay) {
startDisplay = $.fullCalendar.formatRange(start, start, 'DD/MM/YYYY');
$("#addEvent").show();
$("#editEvent").hide();
$("#addNew-event").modal("show");
$("#addNew-event input:text").val("");
$("#getStart").val(start);
$("#getStartDate").val(startDisplay);
$("#getEnd").val(start);
$('input[type=text][name=TMP_HORAX_REUNI]').val("{{$celula->TMP_HORAX_CELUL}}");
$('input[type=text][name=TXT_RUAXX_REUNI]').val("{{$celula->TXT_RUAXX_CELUL}}");
$('input[type=text][name=TXT_BAIRR_REUNI]').val("{{$celula->TXT_BAIRR_CELUL}}");
$('input[type=text][name=TXT_CIDAD_REUNI]').val("{{$celula->TXT_CIDAD_CELUL}}");
$('input[type=text][name=TXT_ESTAD_REUNI]').val("{{$celula->TXT_ESTAD_CELUL}}");
$('input[type=text][name=TXT_NUMER_REUNI]').val("{{$celula->TXT_NUMER_CELUL}}");
$('input[type=text][name=TXT_COMPL_REUNI]').val("{{$celula->TXT_COMPL_CELUL}}");
},
eventClick: function(event, element) {
$("#addEvent").hide()
$("#editEvent").show().data("ev", event);
$("#addNew-event").modal("show");
$("#addNew-event input:text").val("");
$("#eventName").val(event.title);
}
});
$("body").on("click", "#addEvent", function() {
var eventName = $("#eventName").val();
$("#calendar").fullCalendar("renderEvent", {
title: eventName,
start: $("#getStart").val(),
end: $("#getEnd").val()
}, true);
$("#addNew-event form").submit();
$("#addNew-event form")[0].reset();
$("#addNew-event").modal("hide");
});
$("body").on("click", "#editEvent", function() {
var eventName = $("#eventName").val();
var ev = $(this).data("ev");
ev.title = eventName;
$("#calendar").fullCalendar("updateEvent", ev);
$("#addNew-event form")[0].reset();
$("#addNew-event").modal("hide");
});
}
</script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pm-body clearfix">
<ul class="tab-nav tn-justified">
<li id="abaBasic" class="active"><a>Informações básicas</a></li>
<li id="abaMembros" ><a>Membros</a></li>
<li id="abaAgenda"><a>Agenda de reuniões</a></li>
<li id="abaRelatorio"><a>Relatórios</a></li>
</ul>
<div id="divBasic" class="pmb-block">
<div class="pmbb-header">
<h2><i class="zmdi zmdi-account m-r-10"></i> Informações básicas</h2>
<ul class="actions">
<li class="dropdown">
<a href="" data-toggle="dropdown">
<i class="zmdi zmdi-more-vert"></i>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li>
{!! link_to_route('igrejas.edit', 'Editar', $igreja->COD_IDENT_IGREJ, []) !!}
</li>
</ul>
</li>
</ul>
</div>
<div class="pmbb-body p-l-30">
<div class="pmbb-view">
<dl class="dl-horizontal">
<dt>Nome</dt>
<dd>{{ $igreja->TXT_NOMEX_IGREJ }}</dd>
</dl>
<dl class="dl-horizontal">
<dt>Nº de membros</dt>
<dd>{{ count($igreja->pessoas) }}</dd>
</dl>
<dl class="dl-horizontal">
<dt>Nº de {{ (($igreja->FLG_MODEL_IGREJ == 'C')? 'celulas' : (($igreja->FLG_MODEL_IGREJ == 'P')? 'pequenos grupos' : 'salas dominicais' )) }}</dt>
<dd>{{ count($igreja->celulas) }}</dd>
</dl>
<dl class="dl-horizontal">
<dt>Cliente desde</dt>
<dd>{{ date('d/m/Y', strtotime($igreja->DAT_INICI_CLIEN)) }}</dd>
</dl>
<dl class="dl-horizontal">
<dt>Final do contrato</dt>
<dd>{{ date('d/m/Y', strtotime($igreja->DAT_FIMXX_CONTR)) }}</dd>
</dl>
</div>
</div>
</div>
<div id="divMembros" class="pmb-block">
<div class="pmbb-header">
<h2><i class="zmdi zmdi-accounts m-r-10"></i> Listagem de membros</h2>
<ul class="actions">
<li class="dropdown">
<a href="" data-toggle="dropdown">
<i class="zmdi zmdi-more-vert"></i>
</a>
</li>
</ul>
</div>
<div class="pmbb-body p-l-30">
<div class="pmbb-view">
<div class="contacts clearfix row">
@foreach($celula->membros as $membro)
<?php
$iniciais = strstr($membro->TXT_NOMEX_USUAR, ' ', true)[0] . trim(strstr($membro->TXT_NOMEX_USUAR, ' ')[1]); ?>
<div class="col-md-3 col-sm-3 col-xs-4">
<div class="c-item">
<div class="avatarIniciais p-t-20 c-white f-700 text-center bgm-purple" style="height: 125px; font-size: 50px">
{{ $iniciais }}
</div>
<div class="c-info">
<strong>{{ $membro->TXT_NOMEX_USUAR }}</strong>
<small>{{ (($membro->pivot->FLG_IDENT_USUAR == 'L')? 'Líder' : (($membro->FLG_IDENT_USUAR == 'M')? 'Membro' : 'Visitante') ) }}</small>
</div>
<a href="/membros/{{$membro->COD_IDENT_USUAR}}"><div class="c-footer">
<button class="waves-effect"><i class="zmdi zmdi-person-add"></i> Ver
</button>
</div></a>
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
<div id="divAgenda" class="pmb-block">
<div class="pmbb-header">
<h2><i class="zmdi zmdi-calendar-note m-r-10"></i> Agenda de reunições</h2>
<ul class="actions">
<li class="dropdown">
<a href="" data-toggle="dropdown">
<i class="zmdi zmdi-more-vert"></i>
</a>
</li>
</ul>
</div>
<div class="pmbb-body p-l-30">
<div class="pmbb-view">
<div id="calendar" class="card"></div>
</div>
</div>
</div>
<div id="divRelatorio" class="pmb-block">
<div class="pmbb-header">
<h2><i class="zmdi zmdi-graphic-eq m-r-10"></i> Rélatorio </h2>
<ul class="actions">
<li class="dropdown">
<a href="" data-toggle="dropdown">
<i class="zmdi zmdi-more-vert"></i>
</a>
</li>
</ul>
</div>
<div class="pmbb-body p-l-30">
<div class="pmbb-view">
aaaaaa
</div>
</div>
</div>
<div class="clearfix" style="height: 350px;"></div>
</div>
</div>
</div>
<div class="modal fade" id="addNew-event" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Adicionar reunião</h4>
<p class="c-orange">{!! (($igreja->FLG_MODEL_IGREJ == 'C')? 'A célula' : (($igreja->FLG_MODEL_IGREJ == 'P')? 'O pequeno grupo' : 'A sala dominical' )) !!} tem o endereço {{ (($celula->FLG_LOCAL_CELUL == 'I')? 'intinerante.' : 'fixo por este motivo será pre carregado o endereço para esta reunião')}}</p>
</div>
<div class="modal-body">
{!! Form::open(['route' => 'reunioes.store', 'class' => 'addEvent', 'role' => 'form']) !!}
<div class="col-sm-6">
<label for="eventName">Data</label>
<input type="text" class="input-sm form-control" name="DAT_DATAX_REUNI" id="getStartDate" disabled="">
</div>
<div class="input-group form-group col-sm-6" >
<label for="eventName">Hora</label>
<div class="dtp-container">
<input name="TMP_HORAX_REUNI" type='text' class="form-control time-picker">
</div>
</div>
<br>
<div class="form-group">
<label for="eventName">Tema</label>
<div class="fg-line">
<input type="text" class="input-sm form-control" id="eventName" name="TXT_TEMAX_REUNI">
</div>
</div>
<div class="form-group">
<label for="eventName">Descrição</label>
<div class="fg-line">
<input type="text" class="input-sm form-control" id="eventName" name="TXT_DESCR_REUNI">
</div>
</div>
<div class="radio radio-inline m-b-15">
<label>
<input type="radio" name="FLG_IDENT_ENDER" value="M">
<i class="input-helper"></i>
Endereço de membros
</label>
</div>
<div class="radio radio-inline m-b-15">
<label>
<input type="radio" name="FLG_IDENT_ENDER" value="O">
<i class="input-helper"></i>
Outro endereço
</label>
</div>
<div class="enderecoMembro">
<div class="form-group">
<div class="fg-line">
<div class="select">
<select name="COD_USUAR_ENDER" class="form-control" placeholder="Escolha um membro">
@foreach($celula->membros as $membro)
<option value="{{ $membro->COD_IDENT_USUAR}}">{{ $membro->TXT_NOMEX_USUAR}}</option>
@endforeach
</select>
</div>
</div>
</div>
</div>
<div class="enderecoOutro">
<div class="col-sm-4">
<div class="form-group">
<label for="eventName">Rua</label>
<div class="fg-line">
<input type="text" class="input-sm form-control" id="eventName" name="TXT_RUAXX_REUNI" value="{{$celula->TXT_RUAXX_CELUL}}">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="eventName">Bairro</label>
<div class="fg-line">
<input type="text" class="input-sm form-control" id="eventName" name="TXT_BAIRR_REUNI" value="{{$celula->TXT_BAIRR_CELUL}}">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="eventName">Cidade</label>
<div class="fg-line">
<input type="text" class="input-sm form-control" id="eventName" name="TXT_CIDAD_REUNI" value="{{$celula->TXT_CIDAD_CELUL}}">
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for="eventName">Estado</label>
<div class="fg-line">
<input type="text" class="input-sm form-control" id="eventName" name="TXT_ESTAD_REUNI" value="{{$celula->TXT_ESTAD_CELUL}}">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="eventName">Numero</label>
<div class="fg-line">
<input type="text" class="input-sm form-control" id="eventName" name="TXT_NUMER_REUNI" value="{{$celula->TXT_NUMER_CELUL}}">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="eventName">Complemento</label>
<div class="fg-line">
<input type="text" class="input-sm form-control" id="eventName" name="TXT_COMPL_REUNI" value="{{$celula->TXT_COMPL_CELUL}}">
</div>
</div>
</div>
</div>
<input type="hidden" id="getStart"/>
<input type="hidden" id="getEnd"/>
{!! Form::close() !!}
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-link" id="addEvent">Adicionar</button>
<button type="submit" class="btn btn-primary btn-sm" id="editEvent">Editar</button>
<button type="button" class="btn btn-link" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>My submit will come within the code:
$("body").on("click", "#addEvent", function() {
var eventName = $("#eventName").val();
$("#calendar").fullCalendar("renderEvent", {
title: eventName,
start: $("#getStart").val(),
end: $("#getEnd").val()
}, true);
$("#addNew-event form").submit();
$("#addNew-event form")[0].reset();
$("#addNew-event").modal("hide");
});
I’m using the
fullcalendar jqueryand what I need to save is an event, so I make two ways, the first I plot in the calendar my event and then I make the Submit of it to save in the database (this is the part that is missing), to effect thesavein the controller is quiet, the problem is to send this and get back the answer.
It would be possible to make one of the two options ?
- Why AJAX without reloading page
- Normal, returning the screen to the tab
AGENDA DE REUNIÕES
You can put the code you have in the view sff, the relevant part (form, table mechanic...)
– Miguel
OK I’ll edit everything
– Renan Rodrigues
@Miguel Updated the question.
– Renan Rodrigues
OK Obragado, I’m already thinking of a solution
– Miguel
Renan tell me something, I only see a form, you want to return the form to tab "MEETING SCHEDULE" right?
– Miguel
Yes, this form, is what captures the data.
– Renan Rodrigues
But it’s only in that case that you want me to go back to "meeting schedule right? In no other case is it necessary to return to a specific tab?
– Miguel
Either it goes back to tab, or it does not reload the page, although reloading is better than grabbing the updated events.
– Renan Rodrigues
Yes, I only need to come back when it is submitted, the other eventual forms you have on the page will be to exit it in the same way.
– Renan Rodrigues