Send form to controller with ajax

0

I need to send formulario with ajax , so there is no reloading of página .

If you do not have it, I need the screen to return to where it was.

InthewebsiteIhavethesetabs,thetabwheretherewillbesubmitisAGENDADEREUNIÕESifthereisawaytogoandcontrollerautomaticallyreturnstoit.

Mycodelookslikethis:

<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><divclass="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 fullcalendar jquery and what I need to save is an event, so I make two forms, the first one I'll plot in my event calendar and then I'll submit it to save to the database (this is the missing part ), doing save in the controller is quiet, the problem is to send this and get the answer back.

Would you like to do one of two options?

  • By AJAX without reloading the page
  • Normal, returning the screen to the tab AGENDA DE REUNIÕES
  • asked by anonymous 10.01.2017 / 13:39

    1 answer

    2

    My suggestion is that in the controller, after processing the data sent in the controller, redirects to the same page with a flag:

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

    On the client side, via javascript you do, after the part where you delegate the event click on this tab:

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

    Supported in an answer mine for some time

        
    10.01.2017 / 14:07