По сути, после нажатия кнопки отправки я хочу обновить страницу (чтобы новые данные из формы были обновлены) и загрузить другое представление <div class="view-practitioner">.
Я не хочу оставаться в blade.php с формой <form id="practitioner_edit_form".
Оба эти blade-сервера находятся в одной и той же навигационной ссылке href="#practitioner"
Я нашел способ сделать это, используя jquery с ajax, но я не знаю, как правильно завершить его, есть части моего кода с комментариями, которые я пробовал, но ни одна из них не сделала то, что я хотел.
JS с функцией
$(document).ready(function () {
$('#practitioner_edit_form').on('submit', function(e) {
e.preventDefault();
$.ajax({
url : $(this).attr('action') || window.location.pathname,
type: "POST",
data: $(this).serialize(),
success: function (data) {
window.location = $('.nav-tabs a[href="#practitioner"]').tab('show');
/*^reloads my page to http://rps.me/person/profile/49/[object%20Object] from http://rps.me/person/profile/49/Smith*/
/*$('.nav-tabs a[href="#practitioner"]').tab('show');*/
/*^stays in the form after submitting, changed data isn't visible, only after reload, but I want to reload to correct nav tab*/
/*location.reload();*/
},
error: function (jXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
});
});
@extends('person.person-dashboard')
@section('personContent')
<div class="page-body">
<div class="row">
<div class="col-lg-12">
<div class="row-no-margin">
<br>
@if ($message = Session::get('successRemove'))
<div class="alert alert-success alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
@elseif($message = Session::get('failRemove'))
<div class="alert alert-danger alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
@elseif($message = Session::get('defaultRemoveError'))
<div class="alert alert-danger alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
@endif
</div>
<div class="cover-profile">
<div class="profile-bg-img">
<img class="profile-bg-img img-fluid" src="/files/assets/images/bg-img1-30opacity.png"
alt="bg-img">
<div class="card-block user-info">
<div class="col-md-12">
<div class="media-left">
<div class="card-block">
<div class="img-hover">
{{--Check if the picture is null, if so show default image--}}
@if (is_null($person->avatar))
<img class="img-fluid img-radius"
src="{{asset('storage/images/userImage/standard/default.png')}}"
width="150"
height="150" alt="user-img">
<div class="img-overlay img-radius">
<span>
<a href="/person/profile/{{$person->person_id}}/{{$person->last_name}}/uploadfile"
class="btn btn-sm btn-primary">
<i class="icofont icofont-edit"></i></a>
</span>
@else
<img class="img-fluid img-radius"
src="{{asset('storage/images/userImage/standard').'/'.$person->avatar}}"
width="150"
height="150" alt="user-img">
<div class="img-overlay img-radius">
<span>
<a href="/person/profile/{{$person->person_id}}/{{$person->last_name}}/uploadfile"
class="btn btn-sm btn-primary">
<i class="icofont icofont-edit"></i></a>
<a href="/person/profile/{{$person->person_id}}/{{$person->last_name}}/remove"
class="tabledit-delete-button btn btn-sm btn-danger waves-effect waves-light active"
name="delete-image" id="delete-image-button"
onclick="return confirm(trans('collaborators.areYouSure'))">
<i class="icofont icofont-ui-delete"></i></a>
</span>
@endif
</div>
</div>
</div>
</div>
<div class="media-body row">
<div class="col-lg-12">
<div class="user-title">
@if ($person->person_title == null)
<h2>{{$person->first_name}} {{$person->last_name}}</h2>
@else
<h2>{{$person->person_title->name}} {{$person->first_name}} {{$person->last_name}}</h2>
@endif
<span>{{$person->mobile}}, {{$person->email}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="cover-profile">
<div class="profile-bg-img">
</div>
<div class="card-block user-info">
<div class="col-md-12">
<div class="media-body row">
<div class="col-lg-12">
<div class="user-title">
</div>
</div>
<div>
<div class="pull-right cover-btn">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="tab-header card">
<ul class="nav nav-tabs md-tabs tab-timeline" role="tablist" id="mytab">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#personal" role="tab"
aria-expanded="true">{{trans('navigation.general')}}</a>
<div class="slide"></div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#practitioner" role="tab"
aria-expanded="false">{{trans('navigation.practitioner')}}</a>
<div class="slide"></div>
</li>
@isset($practitioner->practitioner_id)
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#availability" role="tab"
aria-expanded="false">{{trans('navigation.availability')}}</a>
<div class="slide"></div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#absence" role="tab"
aria-expanded="false">{{trans('navigation.absence')}}</a>
<div class="slide"></div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#contract" role="tab"
aria-expanded="false">{{trans('navigation.contract')}}</a>
<div class="slide"></div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#training" role="tab"
aria-expanded="false">{{trans('navigation.training')}}</a>
<div class="slide"></div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#history" role="tab"
aria-expanded="false">{{trans('navigation.history')}}</a>
<div class="slide"></div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#access" role="tab"
aria-expanded="false">{{trans('navigation.access')}}</a>
<div class="slide"></div>
</li>
@endisset
@empty($practitioner->practitioner_id)
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#availability" role="tab"
aria-expanded="false">{{trans('navigation.availability')}}</a>
<div class="slide"></div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#absence" role="tab"
aria-expanded="false">{{trans('navigation.absence')}}</a>
<div class="slide"></div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#contract" role="tab"
aria-expanded="false">{{trans('navigation.contract')}}</a>
<div class="slide"></div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#training" role="tab"
aria-expanded="false">{{trans('navigation.training')}}</a>
<div class="slide"></div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#history" role="tab"
aria-expanded="false">{{trans('navigation.history')}}</a>
<div class="slide"></div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#access" role="tab"
aria-expanded="false">{{trans('navigation.access')}}</a>
<div class="slide"></div>
</li>
@endempty
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="personal" role="tabpanel" aria-expanded="true">
<div class="card">
<div class="card-header">
<button id="edit-btn" type="button"
class="btn btn-editpanel btn-sm btn-primary waves-effect waves-light f-right">
<i class="icofont icofont-edit"></i>
</button>
</div>
<div class="card-block">
@include('person.profile.info-display')
@include('person.profile.info-edit')
</div>
</div>
</div>
<div class="tab-pane" id="practitioner" role="tabpanel" aria-expanded="true">
<div class="card">
@isset($practitioner->practitioner_id)
<div class="card-header">
<button id="edit-practitioner-btn" type="button"
class="btn btn-editpanel btn-sm btn-primary waves-effect waves-light f-right">
<i class="icofont icofont-edit"></i>
</button>
</div>
@endisset
<div class="card-block">
@include('person.profile.practitioner.practitioner-display')
@isset($practitioner->practitioner_id)
@include('person.profile.practitioner.practitioner-edit')
@endisset
</div>
</div>
</div>
<div class="tab-pane" id="availability" role="tabpanel" aria-expanded="false">
<div class="row">
{{trans('navigation.availability')}}
</div>
</div>
<div class="tab-pane" id="contract" role="tabpanel" aria-expanded="false">
<div class="row">
{{trans('navigation.contract')}}
</div>
</div>
<div class="tab-pane" id="training" role="tabpanel" aria-expanded="false">
<div class="row">
@include('person.profile.training.training')
</div>
</div>
<div class="tab-pane" id="absence" role="tabpanel" aria-expanded="false">
<div class="row">
{{trans('navigation.absence')}}
</div>
</div>
<div class="tab-pane" id="history" role="tabpanel" aria-expanded="false">
<div class="row">
{{trans('navigation.history')}}
</div>
</div>
<div class="tab-pane" id="access" role="tabpanel" aria-expanded="false">
<div class="row">
{{trans('navigation.access')}}
</div>
</div>
<!-- tab content end -->
</div>
</div>
</div>
@include("settings.remove-confirmation")
<link rel="stylesheet" type="text/css" href="/files/assets/css/custom-person-profile.css">
<link rel="stylesheet" type="text/css" href="/files/assets/css/custom-j-forms.css">
<script src="/files/js/views/person/person-profile.js"></script>
<script src="/files/js/services/initialization.js"></script>
<script src="/files/js/services/editButton.js"></script>
<script src="/files/js/services/practitioner/editPractitionerButton.js"></script>
<script src="/files/js/services/colors.js"></script>
<script src="/files/js/modules/dataTable.js"></script>
<script src="/files/js/modules/update.js"></script>
<script src="/files/js/modules/create.js"></script>
<script src="/files/js/modules/displayInfo.js"></script>
<script src="/files/js/services/forms.js"></script>
<script src="/files/js/services/validation.js"></script>
<script src="/files/js/settings/setup-ajax-requests.js"></script>
@endsection
Я прокомментировал, какие коды я пробовал после отправки формы.