0

Preciso enviar um formulario com ajax, para que não haja recarregamento de página.

Caso não tenha como, preciso que a tela volte no ponto onde ela estava.

Tabs site

No website tenho estas tabs, a tab onde haverá o submit é AGENDA DE REUNIÕES caso tenha jeito de ir e o controller retorna automaticamente para ela.

Meu código esta assim:

<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>

O meu submit virá dentro do código:

     $("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");
    });

Estou utilizando o fullcalendar jquery e o que preciso salvar é um evento, então faço duas formas, a primeira eu ploto no calendario meu evento e depois faço o submit dele para salvar no banco de dados (esta é a parte que falta), efetivar o save no controller é tranquilo, o problema é enviar isto e receber de volta a resposta.

Teria como fazer umas das duas opções ?

  1. Por AJAX sem recarregar a página
  2. Normal, voltando a tela para a tab AGENDA DE REUNIÕES
9
  • Pode colocar o codigo que tens na view sff, a parte relevante (form, mecanica das tabs...)
    – Miguel
    10/01/2017 às 12:40
  • Ok irei editar tudo 10/01/2017 às 12:42
  • @Miguel Atualizada a pergunta. 10/01/2017 às 12:48
  • Ok obragado, já estou a pensar numa solução
    – Miguel
    10/01/2017 às 12:51
  • Renan diz-me uma coisa, só vejo um form, queres que ao submeter o form volte a tab "AGENDA DE REUNIÕES" certo?
    – Miguel
    10/01/2017 às 12:58

1 Resposta 1

2

A minha sugestão é que no controller, depois de processados os dados enviados no controller, redireciones para a mesma página com uma flag:

$urlBack = url()->previous(); // buscar o url anterior, referer
return redirect($urlBack. '#abaAgenda'); // redirecionar para url e concatenar id da tab

Do lado cliente, via javascript fazes, depois da parte onde delegas o evento click nesta tab:

...
if(window.location.hash) {
    var tab = location.hash; // #abaAgenda
    $(tab).trigger('click'); 
}
...

Apoiado numa resposta minha há algum tempo

0

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 .