Level 47
i don't think you are using Vue , it is jquery
Oct 20, 2019
21
Level 1
Vue Component not being rendered in partial blade
I am trying to render a partial page in laravel using Ajax rendered() method.The partial blade has been successfully loaded. But my vue component within the partial blade is not being rendered. I have also done debugging on my end. 1.Console.log() whether the vue component loaded successfully, in laravel. Yes it is loaded successfully. 2.Npm install, and npm run dev. -> no changes still the view is not being rendered.
Link to my stack overflow: https://stackoverflow.com/questions/58424611/vue-component-not-being-rendered-in-partial-blade
Level 1
@maverickchan , in my partial blade i have <personal-info id="personal_info_component" class="hidden" :user='{!! json_encode($user, JSON_HEX_APOS) !!}' :package='{{ GeneralHelper::getPackageId() }}'>' '</personal-info>.
Thus i am using jquery add class hidden and remove class hidden, to show my vue component.
The flow of my code.
- I have a function in index.blade.php.
loadShowpage(). - I render my show.blade.php, using ajax into a modal which is in located in my index page.
- The problem is my vue component is not being rendered together.
Level 47
better post the whole code
Level 1
Index.Blade.php
<div class="right_col" role="main" style="margin-left:0px;">
<div class="row">
<div class="col-xs-12">
<div class="havence-content">
<div class="havence-content-header">
@include('partials.topbarmenu')
</div>
<div class="havence-content-body">
<div class="havence-content-datatable">
<div id="dtAnimation" class="">
<table class="havence-datatable row-border" id="admin-table" cellpadding="0" cellspacing="0" border="0" style="border-radius:0px 0px 10px 10px;width:100%;">
@include('partials.top_table')
{{-- <div class="container">
</div> --}}
<div id="hover-content" class="" style="" >
@include('partials.hierarchy_filter')
</div>
<thead>
<tr style="background-color: white;">
<th scope="col bottom" style="background : none; "></th>
<th scope="col bottom" style="">Name</th>
<th scope="col bottom" style="">Last Updated</th>
{{-- <th></th> --}}
<th scope="col bottom" style="">Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
@include('partials.button_animation_side',['jobRoles' => $jobRoles])
</div>
<div class="container">
//Rendering show blade into this modal
<div class="container">
<div class="modal" id="staffModal">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-body">
<div class="" role="main">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div id="staff_modal_content" class="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Function
$('#admin-table tbody').on('click', 'tr', function (evt) {
var $cell=$(evt.target).closest('td');
if($cell.index() == 1)
{
var staff_id = oTable.row(this).data().staff_id;
loadShowPage(staff_id);
}
})
//ajax function which will be used to render show page into the modal above.
function loadShowPage(staff_id){
let url = '/staff/staff/' + staff_id;
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: 'GET',
url: url,
dataType: 'JSON',
success: function(data)
{
if (data.status == 1){
$('#staff_modal_content').html(data.rendered);
if (!$('#staffModal').is(':visible')) {
$('#staffModal').modal('show');
}
}
else {
alert('An error has occurred. Please refresh the page and try again.');
}
},
error: function(data)
{
toggleLoader();
}
})
}
Controller
public function show(Staff $staff)
{
$user = Auth::user();
$staff->load('family_particulars');
if(!$user->can('view',$staff))
return redirect()->route('staff.staff.index');
$class = ChildClass::staffIncharge($staff->staff_id)->first();
$main_user = $staff->main_user;
$main_user->ref_user->load(['family_particulars','qualifications', 'courses','scholarship','computer_skills','previous_employment','reference','staff_employment','leaves']);
$rendered = view('staff.staff.show', ['staff'=>$staff, 'ref_user'=>$main_user,'class'=>$class])->render();
return response()->json(array('status' => 1, 'rendered' => $rendered));
}
Following from here it's going to be my show.blade.php
<?php $user = $ref_user ;
?>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="">
<div class="x_title">
<div class="col-md-6">
<h2 class="text-uppercase">{{$user->name}}</h2>
</div>
<div class="col-md-6">
<a href="#"><i class="fas fa-times-circle col-xs-offset-12" data-dismiss="modal" style="font-size:24px !important;color:red !important"></i></a>
</div>
<div class="clearfix"></div>
</div>
<div class="">
@if(Session::has('message'))
<div class="alert alert-success alert-dismissible" role="alert">
<p>
{{ Session::get('message') }}
</p>
</div>
@endif
<div class="container">
<div class="row shadow">
<div class="col-xs-12 bhoechie-tab-container">
<div class="list-group-horizontal bhoechie-tab-menu">
<div class="list-group">
<a id="step-1" href="#" class="tabs list-group-item text-center {{!Request::get('wiz_step') || Request::get('wiz_step')==1 ? 'active':'' }}">
<h4 style="padding-right: 10px;" class="glyphicon glyphicon-user"></h4>Personal Info
</a>
</div>
</div>
<div class="row col-md-12 col-sm-12 col-xs-12 bhoechie-tab" style="margin-bottom:15px; margin-left:1px">
<div id="content-1" class="bhoechie-tab-content {{!Request::get('wiz_step') || Request::get('wiz_step')==1? 'active':'' }}">
@include('staff.staff.partials.PersonalInfo')
</div>
The following will be my partial blade.
<div id="info-details" class="row-container-flex row-p">
<div class="col-xs-12 rightbackground">
<div class="col-xs-6 col-top-pane-m">
<a id="edit-personl-info-btn" class="btn btncss btnborder col-xs-offset-left-12">
<i class="fas fa-edit m-right-xs"></i> Edit
</a>
</div>
<div class="col-xs-6 col-top-pane-m">
{{-- <input type="text" name="my-url-copy" id="my-url-copy" class="hidden" value="{{ route('staff.staff.index',[$staff->staff_id]) }}"> --}}
<input type="text" class="visible-none" value="{{ route('staff.staff.index') }}?staff={{$staff->staff_id}}" id="myInput">
<button type="button" id="copy-url-btn" onclick="copyURL()" class="btn btn-primary btnborder col-xs-offset-10"><i class="fas fa-link"></i> Copy Link</button>
{{-- <a id="copy-url-btn" class="btn btn-primary btnborder col-xs-offset-10" href="#">
<i class="fas fa-link"></i> Copy Link
</a> --}}
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="leftpane">
<div class="panel-group leftpaneinner margin-top-panel" id="personal-section">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#personal-section" href="#personalInfo">
<h2 class="StepTitle bold">
<span style="margin:0 20px 20px 0;">
<i style="color:orange" class="fas fa-chevron-circle-down fa-lg"></i>
</span>Personal Information
</h2>
</a>
</h4>
</div>
<div id="personalInfo"class="panel-collapse collapse show">
<div class="panel-body">
@if($user->admin_type_ref_id==6)
<div id="" class="row">
<div style="display:flex" class="col-lg-12 col-md-12 col-xs-12">
<div style="margin: auto;" class="col-md-2 col-sm-2 col-xs-12 profile_left">
<div class="profile_img">
<div id="crop-avatar">
<!-- Current avatar -->
<img style="width: 100%; height: 100%; margin-bottom:0px " class="img-responsive avatar-view thumbnail" src="{{$staff->image_link}}" alt="Avatar" title="Change the avatar">
</div>
</div>
</div>
<div class="col-md-10 col-sm-10 col-xs-12" >
<div class="col-md-5">
<div class="container">
<div class="row">
<div class="col md-12">
<table class="table table-borderless">
<tr>
<td>
<label class="inline-right" for="">Name:</label>
</td>
<td>
<p>{{$user->name }}</p>
</td>
</tr>
<tr>
<td>
<label class="inline-right" for="">Mother Tongue Name:</label>
</td>
<td>
<p>{{$staff->staff_chinese_name? $staff->staff_chinese_name:'-' }}</p>
</td>
</tr>
<tr>
<td>
<label class="inline-right" for="">Gender:</label>
</td>
<td>
<p>{{$staff->staff_gender? $staff->staff_gender:'-' }}</p>
</td>
</tr>
<tr>
<td>
<label class="inline-right" for="">Ic No:</label>
</td>
<td>
<p>{{$staff->staff_nric? $staff->staff_nric:'-'}}</p>
</td>
</tr>
<tr>
<td>
<label class="inline-right" for="">Date Of Birth:</label>
</td>
<td>
@if(!empty($staff->staff_date_of_birth))
<p>{{strtoupper(DateFormatter::longDate(Carbon::createFromFormat('d/m/Y', $staff->staff_date_of_birth)))}}</p>
@else
<p>{!! empty($staff->staff_date_of_birth) !!}</p>
@endif
{{--<p>{{$staff->staff_date_of_birth? $staff->staff_date_of_birth:'-' }}</p>--}}
</td>
</tr>
<tr >
<td>
<label style="margin-bottom: -100px;" class="inline-right" for="">Marital Status:</label>
</td>
<td>
<p style="margin-bottom: -100px;">{{$staff->staff_marital_status? $staff->marital->status_name:'-' }}</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-borderless">
<tr>
<td>
<label class="inline-right" for="">Race:</label>
</td>
<td>
<p>{{$staff->staff_race? $staff->race->race_name:'-'}}</p>
</td>
</tr>
<tr>
<td>
<label class="inline-right" for="">Religion:</label>
</td>
<td>
<p>{{$staff->staff_religion? $staff->religion->religion_name:'-' }}
{{ $staff->staff_religion==5? '-'.$staff->staff_religion_other:'' }}</p>
</td>
</tr>
<tr>
<td>
<label class="inline-right" for="">Identity Type:</label>
</td>
<td>
<p>{{$staff->staff_identity_type? $staff->identity_type->identity_type:'-' }}</p>
</td>
</tr>
<tr>
<td>
<label class="inline-right" for="">Country Of Birth:</label>
</td>
<td>
<p>{{$staff->staff_country_of_birth? $staff->country->countryName:'-' }}</p>
</td>
</tr>
@if($staff->visible_status==3)
<tr>
<td>
<label class="inline-right" for="">Resigned Date:</label>
</td>
<td>
<p>{{ $staff->effective_date? $staff->effective_date:'-'}}</p>
</td>
</tr>
@endif
@if ($staff->transferring_date)
<tr>
<td>
<label class="inline-right" for="">Transfer Centre:</label>
</td>
<td>
<p>{{ $staff->centre->centre_name? $staff->centre->centre_name:'-'}}</p>
</td>
</tr>
<tr>
<td>
<label class="inline-right" for="">Transfer Date:</label>
</td>
<td>
<p>{{ $staff->transferring_date? $staff->transferring_date:'-'}}</p>
</td>
</tr>
@endif
<tr>
<td>
<label class="inline-right" for="">Nationality:</label>
</td>
<td>
<p>{{$staff->staff_nationality? $staff->nationality->nationality_name:'-'}}</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endif
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{!! Form::open(['id' => 'pinf-form', 'route'=> [$user->admin_type_ref_id==6? 'staff.staff.update':'staff.admin.update',$staff->staff_id] ]) !!}
@method('PUT')
@csrf
<personal-info id="personal_info_component" class="hidden" :user='{!! json_encode($user, JSON_HEX_APOS) !!}' :package='{{ GeneralHelper::getPackageId() }}'></personal-info>
{!! Form::close() !!}
@maverickchan , I hope this could be helpful.
Level 1
Function This would be my jquery function. in show.blade.php. This function is to hide and show my vue component.
$('#edit-personl-info-btn').on('click', function(e){
e.preventDefault();
$('#info-details').addClass('hidden');
$('#personal_info_component').removeClass('hidden')
});
Level 47
where do you put your js files??
Level 1
If your asking about js files for vue. it's in my resources>assets>js. I called them into my layouts. and extend my layouts for index and show page.
Level 47
i am asking the jquery part
Level 1
loadShowPage function i placed it in my index.blade.php. Whereas my $('#edit-personl-info-btn').on('click', function(e){. It's my show.blade.php
Level 47
how???
1 like
Level 1
@muath , i don't understand. And regarding appropriate method i am using get, cause i am getting the data from my show.blade.php and .html() into a modal in my index.blade.php
Level 1
@maverickchan is it possible that the single vue file component not loading because of my ajax and rendering the data into index. Since the root is now an index?
Level 47
you never let the js part work.
if you are using Vue , forget about jquery
or check the doc search key word stack
Level 1
@maverickchan , i don't get this part of ur lineforget about jquery or check the doc search key word stack
Level 47
you cannot just insert script in blade file , you need a directive called stack to inject javascript such as jquery or plain js.
Since you already using Vue component , why not let vue do the trick? You really don't need jquery in most cases if you have Vue.
And , you never answer my question: How do you put your script in the blade file? Post the whole blade file , not separated php and js. You can hide some sensitive infos , but i need to see the structure
Level 1
The following will be my entire structure
<!DOCTYPE html>
<html lang="en">
@include('partials.header')
<body class="nav-sm">
@include('partials.loader')
<div id="app" class="container body">
<div class="main_container">
@include('partials/sidebar')
@include('partials/topbar')
@yield('content')
@include('partials/footer')
</div>
</div>
<script src="{{ asset('js/app.js') }}"></script>
<!-- Custom Theme Scripts -->
<script src="{{ asset("js/gentelella.min.js") }}"></script>
@stack('scripts')
<script>
$(document).ready(function (){
$("#module_search_new").keyup(function() {
var x = document.getElementById('showSearchDiv');
if($(this).val() == "") {
x.style.display = 'none';
} else {
x.style.display = 'block';
}
});
@if(Auth::user()->small_menu==1)
$('#sidebar-menu li').removeClass('active');
$('#sidebar-menu li ul').hide();
@endif
$("#menu_toggle").on('click', function (e){
$.ajax({
type: 'GET',
url: '{{route('staff.menu.updatemenu')}}',
processData: false,
contentType: false,
success: function(data)
{
},
error: function(data)
{
}
})
})
})
$('#h_filter_form').on('keypress','#keyword_search', function(e) {
var key = e.which;
if (key == 13) {
e.preventDefault();
}
});
function toggleLoader()
{
$('#loader').toggle();
}
</script>
@yield('page-js')
</body>
</html>
The following will be my index page.
@extends('layouts.main')
@section('content')
<div class="right_col" role="main" style="margin-left:0px;">
<div class="row">
<div class="col-xs-12">
<div class="xyz-content">
<div class="xyz-content-header">
@include('partials.topbarmenu')
</div>
<div class="xyz-content-body">
<div class="havence-content-datatable">
<div id="dtAnimation" class="">
<table class="havence-datatable row-border" id="admin-table" cellpadding="0" cellspacing="0" border="0" style="border-radius:0px 0px 10px 10px;width:100%;">
@include('partials.top_table')
<thead>
<tr style="background-color: white;">
<th scope="col bottom" style="background : none; "></th>
<th scope="col bottom" style="">Name</th>
<th scope="col bottom" style="">Last Updated</th>
{{-- <th></th> --}}
<th scope="col bottom" style="">Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
@include('partials.button_animation_side',['jobRoles' => $jobRoles])
</div>
<div class="container">
<div class="modal" id="staffModal">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-body">
<div class="" role="main">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div id="staff_modal_content" class="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{!! Form::open(['method'=>'post', 'id'=> 'delete-frm']) !!}
@method('DELETE')
@csrf
{!! Form::close() !!}
</div>
@push('stylesheets') <link href="{{ asset("css/CustomMenuUi.css") }}" rel="stylesheet">
{{-- Import stylesheets For content-9 --}}
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>
<script src="{{ asset("js/CustomUI.js") }}"></script>
{{-- Show page scripts --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="{{ asset("js/daterangepicker.js") }}"></script>
<script src="{{ asset("js/icheck.js") }}"></script>
@section('page-js')
<script>
$(document).ready(function(){
$('#admin-table tbody').on('click', 'tr', function (evt) {
var $cell=$(evt.target).closest('td');
if($cell.index() == 1)
{
var staff_id = oTable.row(this).data().staff_id;
// var url = '{{ route("staff.staff.show", ":id") }}';
// url = url.replace(':id', staff_id);
// var redirectWindow = window.open(url, '_blank');
// redirectWindow.location;
loadShowPage(staff_id);
}
})
function loadShowPage(staff_id){
//let url = "{{ route('staff.staff.index') }}";
//url = url + '/' + staff_id;
let url = '/staff/staff/' + staff_id;
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: 'GET',
url: url,
//data: staff_id,
dataType: 'JSON',
success: function(data)
{
if (data.status == 1){
$('#staff_modal_content').html(data.rendered);
if (!$('#staffModal').is(':visible')) {
$('#staffModal').modal('show');
}
}
else {
alert('An error has occurred. Please refresh the page and try again.');
}
},
error: function(data)
{
toggleLoader();
}
})
}
function reload()
{
oTable.ajax.reload();
}
})
</script>
Upon clicking on the row in table my show page will fire up.
@yield('content')
</div>
<script>
$(document).ready(function (){
})
function toggleLoader()
{
$('#loader').toggle();
}
</script>
@yield('page-js')
```@extends('layouts.popup')
@section('content')
<?php $user = $ref_user ;?>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="">
<div class="x_title">
<div class="col-md-6">
<h2 class="text-uppercase">{{$user->name}}</h2>
</div>
<div class="col-md-6">
<a href="#"><i class="fas fa-times-circle col-xs-offset-12" data-dismiss="modal" style="font-size:24px !important;color:red !important"></i></a>
</div>
<div class="clearfix"></div>
</div>
<div class="">
@if(Session::has('message'))
<div class="alert alert-success alert-dismissible" role="alert">
<p>
{{ Session::get('message') }}
</p>
</div>
@endif
<div class="container">
<div class="row shadow">
<div class="col-xs-12 bhoechie-tab-container">
<div class="list-group-horizontal bhoechie-tab-menu">
<div class="list-group">
<a id="step-1" href="#" class="tabs list-group-item text-center {{!Request::get('wiz_step') || Request::get('wiz_step')==1 ? 'active':'' }}">
<h4 style="padding-right: 10px;" class="glyphicon glyphicon-user"></h4>Personal Info
</a>
@if($user->admin_type_ref_id==6)
<a id="step-2" href="#" class="tabs list-group-item text-center {{Request::get('wiz_step')==2? 'active':'' }}">
</a>
@endif
</div>
</div>
<div class="row col-md-12 col-sm-12 col-xs-12 bhoechie-tab" style="margin-bottom:15px; margin-left:1px">
<div id="content-1" class="bhoechie-tab-content {{!Request::get('wiz_step') || Request::get('wiz_step')==1? 'active':'' }}">
@include('staff.staff.partials.PersonalInfo')
</div>
<div id="content-2" class="bhoechie-tab-content {{Request::get('wiz_step')==2? 'active':'' }}">
@include('staff.staff.partials.Account')
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('stylesheets')
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
{{-- Import stylesheets For content-9 --}}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
@endpush
@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="{{ asset("js/daterangepicker.js") }}"></script>
<script src="{{ asset("js/icheck.js") }}"></script>
<script src="https://unpkg.com/[email protected]/dist/sweetalert2.all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
{{-- Import Scripts For content-9 --}}
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
@endpush
@section('page-js')
<script>
$(function($){
/* Personal Information */
$('#edit-personl-info-btn').on('click', function(e){
e.preventDefault();
$('#info-details').addClass('hidden');
$('#personal_info_component').removeClass('hidden')
});
/* Account Function*/
$('#edit-account-info-btn').on('click', function(e){
e.preventDefault();
$('#account_info_component').removeClass('hidden');
$('#school_matters-details').addClass('hidden');
});
$("div.bhoechie-tab-menu>div.list-group>a").click(function(e) {
e.preventDefault();
$(this).siblings('a.active').removeClass("active");
$(this).addClass("active");
var index = $(this).index();
$("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active");
$("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active");
});
</script>
@endsection
From my show page i will have a partial blade for each step. The purpose is to write cleaner codes.
@extends('layouts.popup')
@section('content')
<?php $user = $ref_user ;?>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="">
<div class="x_title">
<div class="col-md-6">
<h2 class="text-uppercase">{{$user->name}}</h2>
</div>
<div class="col-md-6">
<a href="#"><i class="fas fa-times-circle col-xs-offset-12" data-dismiss="modal" style="font-size:24px !important;color:red !important"></i></a>
</div>
<div class="clearfix"></div>
</div>
<div class="">
@if(Session::has('message'))
<div class="alert alert-success alert-dismissible" role="alert">
<p>
{{ Session::get('message') }}
</p>
</div>
@endif
<div class="container">
<div class="row shadow">
<div class="col-xs-12 bhoechie-tab-container">
<div class="list-group-horizontal bhoechie-tab-menu">
<div class="list-group">
<a id="step-1" href="#" class="tabs list-group-item text-center {{!Request::get('wiz_step') || Request::get('wiz_step')==1 ? 'active':'' }}">
<h4 style="padding-right: 10px;" class="glyphicon glyphicon-user"></h4>Personal Info
</a>
@if($user->admin_type_ref_id==6)
<a id="step-2" href="#" class="tabs list-group-item text-center {{Request::get('wiz_step')==2? 'active':'' }}">
</a>
@endif
</div>
</div>
<div class="row col-md-12 col-sm-12 col-xs-12 bhoechie-tab" style="margin-bottom:15px; margin-left:1px">
<div id="content-1" class="bhoechie-tab-content {{!Request::get('wiz_step') || Request::get('wiz_step')==1? 'active':'' }}">
@include('staff.staff.partials.PersonalInfo')
</div>
<div id="content-2" class="bhoechie-tab-content {{Request::get('wiz_step')==2? 'active':'' }}">
@include('staff.staff.partials.Account')
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('stylesheets')
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
{{-- Import stylesheets For content-9 --}}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
@endpush
@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="{{ asset("js/daterangepicker.js") }}"></script>
<script src="{{ asset("js/icheck.js") }}"></script>
<script src="https://unpkg.com/[email protected]/dist/sweetalert2.all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
{{-- Import Scripts For content-9 --}}
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
@endpush
@section('page-js')
<script>
$(function($){
/* Personal Information */
$('#edit-personl-info-btn').on('click', function(e){
e.preventDefault();
$('#info-details').addClass('hidden');
$('#personal_info_component').removeClass('hidden')
});
/* Account Function*/
$('#edit-account-info-btn').on('click', function(e){
e.preventDefault();
$('#account_info_component').removeClass('hidden');
$('#school_matters-details').addClass('hidden');
});
$("div.bhoechie-tab-menu>div.list-group>a").click(function(e) {
e.preventDefault();
$(this).siblings('a.active').removeClass("active");
$(this).addClass("active");
var index = $(this).index();
$("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active");
$("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active");
});
</script>
@endsection
Partial blade content which is child of show page.
<div id="info-details" class="row-container-flex row-p">
<div class="col-xs-12 rightbackground">
<div class="col-xs-6 col-top-pane-m">
<a id="edit-personl-info-btn" class="btn btncss btnborder col-xs-offset-left-12">
<i class="fas fa-edit m-right-xs"></i> Edit
</a>
</div>
<div class="col-xs-6 col-top-pane-m">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="leftpane">
<div class="panel-group leftpaneinner margin-top-panel" id="personal-section">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#personal-section" href="#personalInfo">
<h2 class="StepTitle bold">
<span style="margin:0 20px 20px 0;">
<i style="color:orange" class="fas fa-chevron-circle-down fa-lg"></i>
</span>Personal Information
</h2>
</a>
</h4>
</div>
<div id="personalInfo"class="panel-collapse collapse show">
<div class="panel-body">
@if($user->admin_type_ref_id==6)
<div id="" class="row">
<div style="display:flex" class="col-lg-12 col-md-12 col-xs-12">
<div style="margin: auto;" class="col-md-2 col-sm-2 col-xs-12 profile_left">
<div class="profile_img">
<div id="crop-avatar">
<!-- Current avatar -->
<img style="width: 100%; height: 100%; margin-bottom:0px " class="img-responsive avatar-view thumbnail" src="{{$staff->image_link}}" alt="Avatar" title="Change the avatar">
</div>
</div>
</div>
<div class="col-md-10 col-sm-10 col-xs-12" >
<div class="col-md-5">
<div class="container">
<div class="row">
<div class="col md-12">
<table class="table table-borderless">
<tr>
<td>
<label class="inline-right" for="">Name:</label>
</td>
<td>
<p>{{$user->name }}</p>
</td>
</tr>
<tr>
<td>
<label class="inline-right" for="">Mother Tongue Name:</label>
</td>
<td>
<p>{{$staff->staff_chinese_name? $staff->staff_chinese_name:'-' }}</p>
</td>
</tr>
<tr>
<td>
<label class="inline-right" for="">Gender:</label>
</td>
<td>
<p>{{$staff->staff_gender? $staff->staff_gender:'-' }}</p>
</td>
</tr>
<tr>
<td>
<label class="inline-right" for="">Ic No:</label>
</td>
<td>
<p>{{$staff->staff_nric? $staff->staff_nric:'-'}}</p>
</td>
</tr>
<tr>
<td>
<label class="inline-right" for="">Date Of Birth:</label>
</td>
<td>
@if(!empty($staff->staff_date_of_birth))
<p>{{strtoupper(DateFormatter::longDate(Carbon::createFromFormat('d/m/Y', $staff->staff_date_of_birth)))}}</p>
@else
<p>{!! empty($staff->staff_date_of_birth) !!}</p>
@endif
</td>
</tr>
<tr >
<td>
<label style="margin-bottom: -100px;" class="inline-right" for="">Marital Status:</label>
</td>
<td>
<p style="margin-bottom: -100px;">{{$staff->staff_marital_status? $staff->marital->status_name:'-' }}</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-borderless">
<tr>
<td>
<label class="inline-right" for="">Race:</label>
</td>
<td>
<p>{{$staff->staff_race? $staff->race->race_name:'-'}}</p>
</td>
</tr>
<tr>
<td>
<label class="inline-right" for="">Religion:</label>
</td>
<td>
<p>{{$staff->staff_religion? $staff->religion->religion_name:'-' }}
{{ $staff->staff_religion==5? '-'.$staff->staff_religion_other:'' }}</p>
</td>
</tr>
<tr>
<td>
<label class="inline-right" for="">Identity Type:</label>
</td>
<td>
<p>{{$staff->staff_identity_type? $staff->identity_type->identity_type:'-' }}</p>
</td>
</tr>
<tr>
<td>
<label class="inline-right" for="">Country Of Birth:</label>
</td>
<td>
<p>{{$staff->staff_country_of_birth? $staff->country->countryName:'-' }}</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endif
</div>
</div>
</div>
</div>
</div>
</div>
{!! Form::open(['id' => 'pinf-form', 'route'=> [$user->admin_type_ref_id==6? 'staff.staff.update':'staff.admin.update',$staff->staff_id] ]) !!}
@method('PUT')
@csrf
<personal-info id="personal_info_component" class="hidden" :user='{!! json_encode($user, JSON_HEX_APOS) !!}' :package='{{ GeneralHelper::getPackageId() }}'></personal-info>
{!! Form::close() !!}
</div>
Finally my vue files
APP.js I will only show 2 important one related to the question.
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
require('owl.carousel');
require('./ccustom.js');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('staff-creation', require('./components/staff/StaffCreation.vue'));
Vue.component('personal-info', require('./components/staff/PersonalInfo.vue'));
const app = new Vue({
el: '#app'
});
Next is my personalInfo.vue template
<template>
<div>
<div class="row-container-flex row-p">
<div class="col-md-12 col-sm-12 col-xs-12 rightbackground" >
<div class="col-xs-12 col-top-pane-m">
<div class="col-xs-12">
<a v-if="!user" href="#" class="btn btn-warning btnborder col-xs-offset-overide" @click.stop.prevent="goAccount"><i class="fa fa-chevron-right fa_icon"></i> {{user? 'Next':'Next' }}</a>
</div>
</div>
<div class="col-xs-12">
<div v-if="user" class="col-xs-6">
<a href="#" class="btn btncss btnborder col-xs-offset-left" @click.stop.prevent="cancelEdit" ><i class="fas fa-times m-right-xs"></i> Cancel</a>
<a href="#" class="btn btn-primary btnborder" @click.stop.prevent="saveStaff" ><i class="fas fa-edit m-right-xs"></i> {{user? 'Update' : 'Create'}}</a>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="">
<div class="panel-group leftpaneinner margin-top-panel" id="personal-section">
<div class="panel panel-default" style="">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#personal-section" href="#personal-info"><h2 class="StepTitle bold"><span style="margin:0 20px 20px 0;"><i style="color:orange;padding-right: 10px;" class="fas fa-chevron-circle-down fa-lg"></i></span>Personal Information</h2></a>
</h4>
</div>
<div id="personal-info" class="panel-collapse collapse show">
<div class="panel-body">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="row item form-group">
<label class="control-label col-md-4 col-sm-4 col-xs-12 text-right mt-6">Name</label>
<div class="col-md-8 col-sm-8 col-xs-12">
<input type="text" v-model="user_data.staff_name" name="staff_name" class="form-control bd-radius col-md-7 col-xs-12 select required">
</div>
</div>
<div class="row item form-group" >
<label class="control-label col-md-4 col-sm-4 col-xs-12 text-right mt-6">Mother Tongue Name</label>
<div class="col-md-8 col-sm-8 col-xs-12">
<input type="text" v-model="user_data.staff_chinese_name" name="staff_chinese_name" class="form-control bd-radius col-md-7 col-xs-12">
</div>
</div>
<div class="clearfix"></div>
<div class="row item form-group">
<label class="control-label col-md-4 col-sm-4 col-xs-12 text-right mt-6">Gender <span class="required">*</span></label>
<div class="col-md-8 col-sm-8 col-xs-12 mt-6">
M:
<input type="radio" class="flat" v-model="user_data.staff_gender" name="staff_gender" value="male" required />
F:
<input type="radio" class="flat" v-model="user_data.staff_gender" name="staff_gender" value="female" />
</div>
</div>
<div class="row item form-group">
<label class="control-label col-md-4 col-sm-4 col-xs-12 text-right mt-6">Ic No
</label>
<div class="col-md-8 col-sm-6 col-xs-12">
<input type="text" v-model="user_data.staff_nric" name="staff_nric" class="form-control bd-radius col-md-7 col-xs-12">
</div>
</div>
<div class="row item form-group">
<label class="control-label col-md-4 col-sm-4 col-xs-12 text-right mt-6">Date of Birth
</label>
<div class="col-md-8 col-sm-6 col-xs-12">
<div class="input-group">
<input style="border-top-left-radius: 5px;border-bottom-left-radius: 5px;" type="text" v-model="user_data.staff_date_of_birth" name="staff_date_of_birth" class="form-control col-md-7 col-xs-12 bdcalendar">
<span class="input-group-btn">
<button style="border-top-right-radius: 5px;border-bottom-right-radius: 5px;" @click.stop.prevent="user_data.staff_date_of_birth='' " type="button" class="btn btn-primary">Clear</button>
</span>
</div>
</div>
</div>
<div class="row item form-group mb-0">
<label class="control-label col-md-4 col-sm-4 col-xs-12 text-right mt-6">Marital Status
</label>
<div class="col-md-8 col-sm-6 col-xs-12">
<select v-model="user_data.staff_marital_status" v-select2 name="staff_marital_status" style="width: 100%" class="form-control col-md-7 col-xs-12 select2">
<option v-for="(status, id) in marital_statuses" :value="id">{{status}}</option>
</select>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="row item form-group">
<label class="control-label col-md-4 col-sm-4 col-xs-12 text-right mt-6">Race
</label>
<div class="col-md-8 col-sm-8 col-xs-12">
<select v-model="user_data.staff_race" name="staff_race" v-select2 style="width: 100%" class="form-control col-md-7 col-xs-12 select2">
<option value="">Select</option>
<option v-for="(race,id) in races" :value="id">{{race}}</option>
</select>
</div>
</div>
<div class="row item form-group">
<label class="control-label col-md-4 col-sm-4 col-xs-12 text-right mt-6">Religion
</label>
<div class="col-md-8 col-sm-8 col-xs-12">
<select v-model="user_data.staff_religion" name="staff_religion" v-select2 style="width: 100%" class="form-control col-md-7 col-xs-12 select2">
<option value="">Select</option>
<option v-for="(religion, id) in religions" :value="id">{{religion}}</option>
</select>
</div>
</div>
<div class="row item form-group">
<label class="control-label col-md-4 col-sm-4 col-xs-12 text-right mt-6">Identity Type <span class="required">*</span>
</label>
<div class="col-md-8 col-sm-6 col-xs-12">
<select v-model="user_data.staff_identity_type" v-select2 name="staff_identity_type" style="width: 100%" class="form-control col-md-7 col-xs-12 select2 required">
<option value="">Select</option>
<option v-for="(ident,id) in identity_type_sel" :value="id">{{ident}}</option>
</select>
</div>
</div>
<div v-show="user_data.staff_identity_type!=1 && user_data.staff_identity_type!=2" class="row item form-group">
<label class="control-label col-md-4 col-sm-4 col-xs-12 text-right mt-6">Expiry Date
</label>
<div class="col-md-8 col-sm-6 col-xs-12">
<div class="input-group">
<input type="text" style="border-top-left-radius: 5px;border-bottom-left-radius: 5px;" v-model="user_data.employment_work_permit_expiry_date" name="employment_work_permit_expiry_date" class="form-control col-md-7 col-xs-12 calendar">
<span class="input-group-btn">
<button style="border-top-right-radius: 5px;border-bottom-right-radius: 5px;" @click.stop.prevent="user_data.employment_work_permit_expiry_date='' " type="button" class="btn btn-primary">Clear</button>
</span>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row item form-group">
<label class="control-label col-md-4 col-sm-4 col-xs-12 text-right mt-6">Country of Birth
</label>
<div class="col-md-8 col-sm-6 col-xs-12">
<select v-model="user_data.staff_country_of_birth" v-select2 name="staff_country_of_birth" style="width: 100%" class="form-control col-md-7 col-xs-12 select2">
<option value="">Select</option>
<option v-for="(country,id) in countries" :value="id">{{ country }}</option>
</select>
</div>
</div>
<div class="row item form-group mb-0">
<label class="control-label col-md-4 col-sm-4 col-xs-12 text-right mt-6">Nationality
</label>
<div class="col-md-8 col-sm-6 col-xs-12">
<select v-model="user_data.staff_nationality" name="staff_nationality" v-select2 style="width: 100%" class="form-control col-md-7 col-xs-12 select2">
<option value="">Select</option>
<option v-for="(nation,id) in nationalities" :value="id">{{nation}}</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
Vue.directive('select2', {
inserted(el) {
$(el).on('select2:select', () => {
const event = new Event('change', { bubbles: true, cancelable: true });
el.dispatchEvent(event);
});
},
});
export default {
props:['user', 'package'],
data: function (){
return {
imagePicked:'',
maxfilesize:5000000,
identity_type_sel:[],
countries:[],
marital_statuses:[],
races:[],
religions:[],
licenses:[],
nationalities:[],
states:[],
cities:[],
user_data:{
staff_name:'',
staff_identity_type:'',
staff_country_of_birth:'',
staff_date_of_birth:'',
staff_marital_status:1,
staff_race:'',
staff_religion:'',
driving_license:null,
second_driving_license:null,
staff_personal_email:'',
staff_chinese_name:'',
staff_nric:'',
staff_gender:'male',
staff_mobile_number:'',
staff_home_number:'',
block_house_no:'',
floor_1:'',
building_name:'',
road:'',
unit_no_1:'',
postal_code:'',
state:'',
city:'',
staff_photo:'',
employment_work_permit_expiry_date:'',
},
}
},
watch:{
'user_data.state': function(){
if (this.user_data.state) {
let stateObj = this.states.find(state => {
return state.name === this.user_data.state
});
this.cities = stateObj.cities;
}
},
alert_text : function(){
this.alert_visiblity = !this.alert_text? "hidden":'';
}
},
mounted() {
axios.get('getselections')
.then(response => {
this.identity_type_sel = response.data.identity_types;
this.countries = response.data.countries;
this.marital_statuses = response.data.marital_statuses;
this.races = response.data.races;
this.religions = response.data.religions;
this.licenses = response.data.licenses;
this.centres = response.data.centres;
this.nationalities = response.data.nationalities;
this.user_data.centre_id = Object.keys(response.data.centres)[0];
});
if(this.user)
{
this.setUserProp();
}
if (this.user_data.centre_id) {
axios.get('getstates/'+this.user_data.centre_id)
.then(response => {
this.states = response.data;
});
}
var dropzone = $('#dropzone');
var self = this;
dropzone.on('drop', function (e){
e.preventDefault();
$(this).removeClass('dragover');
var file = e.originalEvent.dataTransfer.files[0];
self.uploadFile(file);
});
dropzone.on('dragover', function (){
$(this).addClass('dragover');
return false;
});
dropzone.on('dragleave',function () {
$(this).removeClass('dragover');
return false;
});
$('.upload_img_btn').on('change', function (){
self.uploadFile($(this)[0].files[0]);
this.value = null
});
var self = this;
$('#pinf-form').on('submit', function(e){
e.preventDefault();
$("#alert2").addClass('hidden');
toggleLoader();
var formData = new FormData($(this)[0]);
if(self.imagePicked)
formData.append('file',self.imagePicked);
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
formData.append('wiz_step',1);
$.ajax({
type: 'POST',
url: $("#pinf-form").attr('action') +'?wiz_step=1',
data: formData,
processData: false,
contentType: false,
success: function(data)
{
window.location = data;
},
error: function(data)
{
var errors = data.responseJSON.errors;
var error_msg = '';
for(var idx in errors)
{
var e_name = idx.replace(/\./g, '\.');
error_msg += errors[idx] +'<br>';
$("#"+e_name).parent().addClass('has-error');
}
$("#alert2").html(error_msg);
$("#alert2").removeClass('hidden');
toggleLoader();
}
})
return false;
})
},
methods:{
checkValidation: function()
{
$('.has-error').removeClass('has-error');
this.alert_text = '';
var valid = true;
if(!this.user || (this.user && this.user.admin_type_ref_id==6))
{
$('#personal_info_component select.required, #personal_info_component input.required').each(function(){
var val = $(this).val();
if(!val)
{
$(this).parent().addClass('has-error');
valid = false;
}
})
$('#personal_info_component input.number').each(function(){
var val = $(this).val();
if(val && !(/^[0-9]*$/.test(val)))
{
$(this).parent().addClass('has-error');
valid = false;
}
});
$('#personal_info_component .check8digits').each(function(){
var val = $(this).val();
if(val && !(/^\d{8}$/.test(val)))
{
$(this).parent().addClass('has-error');
valid = false;
}
})
if(this.user_data.staff_personal_email && !this.validateEmail(this.user_data.staff_personal_email ))
{
$("#staff_personal_email").parent().addClass('has-error');
valid = false;
}
}
return valid;
},
goAccount:function(){
this.$emit('gostep', 2);
},
validateEmail: function (email) {
var re = /^(([^<>()\[\]\.,;:\s@"]+(\.[^<>()\[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
},
saveStaff:function(){
if(this.checkValidation())
{
if(this.user)
$("#pinf-form").submit();
else
$("#staffForm").submit();
}
},
setUserProp: function(){
var cloned_obj = JSON.parse(JSON.stringify(this.user.ref_user));
this.user_data = cloned_obj;
this.user_data.password = '';
this.user_data.confirm_password = '';
if(this.user.ref_user.staff_gender)
this.user_data.staff_gender = this.user.ref_user.staff_gender.toLocaleLowerCase();
this.user_data.static_job_role_id = this.user.static_job_role_id;
this.user_data.jobrole_id = this.user.jobrole_id;
this.user_data.staff_photo = this.user.ref_user.image_link;
axios.get('getjobroleselection?centre_id='+this.centre_id)
.then(response => {
this.jobroles = response.data.jobroles;
this.static_jobroles = response.data.static_jobroles;
});
},
uploadFile: function (file)
{
if((file.type =="image/jpeg" || file.type=="image/png" || file.type=="image/gif") )
if(file.size <= this.maxfilesize)
{
this.imagePicked = file;
this.updatePreviewImages();
}
else
{
swal({
title: "Error",
text: "The image file size is too big, please upload an image that is 5MB or less",
type: "error",
confirmButtonColor: '#F27474',
confirmButtonText: "Okay"
});
}
else
{
swal({
title: "Error",
text: "Only JPEG, PNG & GIF file formats are accepted",
type: "error",
confirmButtonColor: '#F27474',
confirmButtonText: "Okay"
});
}
},
passvalidation: function(val)
{
var p=val;
if (p.length < 8) {
this.alert_text = "Your password must be at least 8 characters.";
return false;
}
else if (p.search(/[a-z]/) < 0) {
this.alert_text = "Your password must contain at least one small letter.";
return false;
}
else if (p.search(/[0-9]/) < 0) {
this.alert_text = "Your password must contain at least one number.";
return false;
}
else if (p.search(/[A-Z]/) < 0) {
this.alert_text = "Your password must contain at least one capital letter.";
return false;
}
else if (p.search(/[-!$@#\%^&*()_+|~=`{}\[\]:";'<>?,.\/]/) < 0) {
this.alert_text = "Your password must contain at least one symbol.";
return false;
}
else
{
return true;
}
},
updatePreviewImages: function()
{
},
cancelEdit: function (){
if(this.user)
{
this.setUserProp();
}
$('#personal_info_component').addClass('hidden');
$('#info-details').removeClass('hidden');
}
}
}
</script>
Level 21
@thaya96 The problem is, you cannot load vue components like that. Vue will not detect that tag since its vdom is already created and that tag is not part of it anymore.
What you have to do is, either use only html to render or do not render the blade/html via ajax. Just get the JSON Response from API and handle it at javascript level
1 like
Level 1
@sachinagarwal. Thank You for your help.
Level 47
as @sachinagarwal said , Vue and jquery are total different things.
Vue is data-driven , I prefer using Vue.
But , in your case , stick to jquery will be a better solution.
Vue can work with jquery together , but not like this.
1 like
Level 21
@thaya96 Glad I could help :)
1 like
Level 1
@sachinagarwal sorry to getting back late to you. Just get the JSON Response from API and handle it at javascript level. Can you explain more on this, i tried to do something like below in my show.blade.php page.
Vue.component('personal-info', {
template: "<p>I am the test component template</p>",
mounted: function () {
console.log('component mounted');
}
});
new Vue({
el: '#app',
data: {
comp: null
},
mounted: function() {
var someHTML = '<test-component></test-component>';
var url = "https://jsonplaceholder.typicode.com/posts";
$.get(url, function (data) {
this.buildComponent(someHTML)
}.bind(this));
},
methods: {
buildComponent: function (html) {
var res = Vue.compile(html)
new Vue({
render: res.render,
staticRenderFns: res.staticRenderFns
}).$mount('#media_lib_app')
}
}
Please or to participate in this conversation.