With my current Laravel project I am using (attempting) both Bootstrap and MDBoostrap. Currently, I'm getting the error TypeError: $(...).DataTable is not a function and from reading up on this online, this is usually due to jquery being called multiple times. I believe the error has to do with app.js but if I only include the scripts Bootstraps requires for a datatable I get the error that $ is undefined. Note: index.blade.html is extending from app.blade.html. With Laravel, I'm only trying to use MDB to create a datatable. This may be a duplicate from here but this question never got answered. I've been banging my head on this problem for a whole day now, any input is appreciative.
app.blade.html
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<title>Laravel Project</title>
</head>
<body>
<div class="container">
#yield('content')
</div>
<script src="{{asset('js/app.js')}}"></script>
<script>
// Material Design example
$(document).ready(function () {
$('#dtMaterialDesignExample').DataTable();
$('#dtMaterialDesignExample_wrapper').find('label').each(function () {
$(this).parent().append($(this).children());
});
$('#dtMaterialDesignExample_wrapper .dataTables_filter').find('input').each(function () {
const $this = $(this);
$this.attr("placeholder", "Search");
$this.removeClass('form-control-sm');
});
$('#dtMaterialDesignExample_wrapper .dataTables_length').addClass('d-flex flex-row');
$('#dtMaterialDesignExample_wrapper .dataTables_filter').addClass('md-form');
$('#dtMaterialDesignExample_wrapper select').removeClass('custom-select custom-select-sm form-control form-control-sm');
$('#dtMaterialDesignExample_wrapper select').addClass('mdb-select');
$('#dtMaterialDesignExample_wrapper .mdb-select').materialSelect();
$('#dtMaterialDesignExample_wrapper .dataTables_filter').find('label').remove();
});
</script>
</body>
</html>
index.blade.html
#extends('layouts.app')
#section('content')
<h1>User Table</h1>
#if(count($users) > 0)
<table id="dtMaterialDesignExample" class="table" cellspacing="0" width="100%">
<thead>
<tr>
<th class="th-sm">ID
</th>
<th class="th-sm">Name
</th>
<th class="th-sm">Occupation
</th>
<th class="th-sm">Location
</th>
<th class="th-sm">Salary
</th>
</tr>
</thead>
<tbody>
#foreach($users as $user)
<tr>
<td>{{$user->id}}</td>
<td>{{$user->name}}</td>
<td>{{$user->occupation}}</td>
<td>{{$user->location}}</td>
<td>{{$user->salary}}</td>
</tr>
#endforeach
</tbody>
</table>
#endif
#endsection
UsersController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
class UsersController extends Controller
{
/**
* Display a listing of the resource.
*
* #return \Illuminate\Http\Response
*/
public function index()
{
$users = User::orderBy('id', 'asc')->paginate(10);
return view('users.index',['users'=>$users]);
}
bootstrap.js
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
require('mdbootstrap');
} catch (e) {}
app.js
require('./bootstrap');
var moment = require('mdbootstrap');
app.scss
// Fonts
#import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
// MDBootstrap
#import '~mdbootstrap/css/mdb.min.css';
If this is the DataTables.net package I believe you have to include JS and possibly the CSS in order to have $('#dtMaterialDesignExample').DataTable(); succeed. I know those do not come with Bootstrap out of the box. I have a Laravel package using vanilla Bootstrap and I had to include the JS and CSS to render data tables.
I'm not terribly familiar with MDB. They may provide CSS, but I don't know if they provide the JS. It doesn't appear that you should have a duplicate definition so you need to make sure you're app is rendering something like the following to the browser:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js" type="text/javascript"></script>
That would include the JS definition of the DataTable() function.
Related
below is my App/Http/Livewire/Test.php file
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Test extends Component
{
public $name = 'mike';
public function render(){
return view('livewire.test');
}
public function clickTest(){
$this->name = 'Joe';
}
}
below is my resources/views/livewire/test.blade.php
<div>
hello {{$name}}
</div>
and below is my resources/views/test.blade.php
<html>
<head>
<title>test page</title>
#livewireStyles
<script src="{{ asset('js/app.js') }}"></script>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<div>
<livewire:test /> //this line is working fine
<button wire:click="clickTest">test</button> //this line is not working
</div>
#livewireScripts
</body>
</html>
I am able to get hello mike on page load but when I click on the test button it's not changing to Joe. When I checked on my network tab, it looks like the click event is not even triggered and it's not able to reach clickTest() function
Your button needs to be moved into the component:
<div>
hello {{$name}}
<button wire:click="clickTest">test</button>
</div>
I am having a difficult time sending HTML email through my Laravel application. I have tried to return the view and it returns well but when I send the email to an actual email, it arrives as a plain text email without all the HTML parsing.
My View layout for the email is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet">
<!-- Bootstrap CSS File -->
<link href="{{ url('design-assets/lib/bootstrap/css/bootstrap.min.css')}}"
rel="stylesheet">
<!-- Main Stylesheet File -->
<link href="{{ url('design-assets/css/style.css" rel="stylesheet')}}">
<link href="{{ url('design-assets/css/prof-custom.css')}}"
rel="stylesheet">
#yield('styles')
</head>
<body id="body">
#yield('content')
<!-- JavaScript Libraries -->
<script src="{{ url('design-assets/lib/jquery/jquery.min.js')}}"></script>
<script src="{{ url('design-assets/lib/jquery/jquery-migrate.min.js')}}">
</script>
<script src="{{ url('design-assets/lib/bootstrap/js/bootstrap.bundle.min.js') }}/"></script>
<!-- Contact Form JavaScript File -->
<!-- Template Main Javascript File -->
<script src="{{ url('design-assets/js/main.js') }}"></script>
#yield('scripts')
</body>
The actual email view is as follows:
#extends('layouts.mail')
#section('content')
<div class="card montserrat-font">
<div class="card-header">
<div class="card-title">Contact Message from the Website</div>
</div>
<div class="card-body">
<div class="card-text">
Dear Sir,<br /><br />
We have a contact from our events website with the following details<br/><br />
</div>
<div class="table-responsive">
<table class="table table-striped">
<tr>
<th>Name of Sender:</th><td>{{$mail_info['name']}}</td>
</tr>
<tr>
<th>Email of Sender:</th><td>{{$mail_info['email']}}</td>
</tr>
<tr>
<th>Phone number of Sender:</th><td>{{$mail_info['phone']}}</td>
</tr>
<tr>
<th>Subject of Message:</th><td>{{$mail_info['subject']}}</td>
</tr>
{{-- <tr>
<th>Message:</th><td>{{$mail_info['message']}}</td>
</tr> --}}
</table>
</div>
<div class="card-title">Message body</div>
<div class="card-text">
{!! $mail_info['message'] !!}
</div>
</div>
</div>
#endsection
The problem is that when I check the format returned from the email view by returning the view as follows:
return new \App\Mail\ContactMail(['email' => 'testemail#gmail.com', 'name' => 'Testing Name','phone'=>'08033776502', 'subject' => 'Just a test', 'message' => "This is a message returned from testing the view email template"]);
I get a view that represents exactly what I want but when I send the email, it arrives as a plain text email
This is how I call the view through mailable class
<?php
namespace App\Mail;
use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;
use Illuminate\Contracts\Queue\ShouldQueue;
class ContactMail extends Mailable
{
use Queueable, SerializesModels;
/**
* Create a new message instance.
*
* #return void
*/
public $mail_info;
public function __construct($mail_info_array)
{
$this->mail_info = $mail_info_array;
}
/**
* Build the message.
*
* #return $this
*/
public function build()
{
// return $this->view('view.name');
return $this->view('mails.web-contact', ['mail_info'=>$this->mail_info]);
}
}
and then through the controller as follows:
public function post_contact(Request $request)
{
try
{
$data = $request->all();
$this->validate_recaptcher($data['g-recaptcha-response']);
$this->validator($request->all())->validate();
\Mail::to('uchendukwe#yahoo.com')->send(new \App\Mail\ContactMail(['email' => $request->email, 'name' => $request->name,'phone'=>$request->phone, 'subject' => $request->subject, 'message' => $request->message]));
return redirect()->route('ContactForm')->with('msg',"<div class='alert alert-success'><span class='fa fa-check'></span> Message successfully sent. I will get back to you soon if necessary</div>");
// return new \App\Mail\ContactMail(['email' => $request->email, 'name'=> $request->name,'phone'=>$request->phone, 'subject' => $request->subject, 'message' => $request->message]);
}
catch(Exception $e)
{
return back()->withInputs()->with('msg',"<div class='alert alert-danger'><span class='fa fa-warning'></span> ".$e->getMessage()."</div>");
}
}
I am using smtp email driver and every other thing is working as expected.
I will appreciate any guide to resolve this
Thank you
Add your styles inline in the head portion of your email layout. Mail clients tend to ignore externally referenced css. Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
...
<style type="text/css">
your custom styles here
</style>
...
</head>
</html>
You can accomplish this using Markdown.
Customizing The CSS
After exporting the components, the resources/views/vendor/mail/html/themes directory will contain a default.css file. You may customize the CSS in this file and your styles will automatically be in-lined within the HTML representations of your Markdown mail messages.
I want to print the content of laravel blade file....file contains the html table of users...when user click on print button it must redirect to pop up window of print... Please help to resolve this issue.
Current code of reading the content of file...i don't know how to give the path of this file.....file is in resource/views/reports/table.blade.php
Current code shows me exception:
FileNotFoundException in Filesystem.php line 41:
File does not exist at path printview_table
Code in Controller
public function printfile()
{
$filename = '/reports/printview_table.blade.php';
try
{
$contents = File::get($filename);
printfile($contents);
}
catch (Illuminate\Filesystem\FileNotFoundException $exception)
{
die("The file doesn't exist");
}
}
I know it's too late to answer but I did the same thing today and decided to post my solution here as well so that it might help someone in the future.
Required Tools:
jQuery
jQuery.print
Solution Steps:
Step 1: The view where the print button is located in.
dashboard.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Document</title>
</head>
<body>
<button id="print"> Print </button>
<script src="{{ asset('js/jquery.js') }}"></script>
<script src="{{ asset('js/jquery.print.js') }}"></script>
<script src="{{ asset('js/scripts.js') }}"></script>
</body>
</html>
Step 2: The view that is going to be printed.
Assume I have a view like this and I want to print this out:
print.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</tbody>
</table>
</body>
</html>
Step 2: The route.
We need a route to call our view through that.
web.php
Route::post('/print', function() { return view('print'); });
Step 3: The jQuery script.
We are going to call the view content by AJAX and pass it to the jQuery.print() function for printing.
scripts.js
$('#print').on('click', function() {
let CSRF_TOKEN = $('meta[name="csrf-token"').attr('content');
$.ajaxSetup({
url: '/print/',
type: 'POST',
data: {
_token: CSRF_TOKEN,
},
beforeSend: function() {
console.log('printing ...');
},
complete: function() {
console.log('printed!');
}
});
$.ajax({
success: function(viewContent) {
$.print(viewContent); // This is where the script calls the printer to print the viwe's content.
}
});
});
That's all, customize the codes according to your own requirements.
Why don't you just pass this task to JS. In the view add a btn and on the click event call the print func.
window.print();
https://www.w3schools.com/jsref/met_win_print.asp
can you help me solve this problem ? so in this case i want to show flash message in the next page after button click & action (save, update, delete) success perform...
i've read this https://www.tutorialspoint.com/materialize/materialize_dialogs.htm and also http://materializecss.com/dialogs.html but idk how to use it in my controller
public function hapuskeluhan($id){
$keluh = keluhan::findOrFail($id);
$keluh->delete();
return redirect('lihatkeluhan');
}
For Example is function delete, how could my toast appear before it redirect ? or maybe after ? please kindly help me brother
Try this
#if(session('message'))
<script>
Materialize.toast("{{ #session('message') }}", 5000);
</script>
#endif
I think you need to pass the message along with the redirection to be displayed on the view.
public function hapuskeluhan($id)
{
$keluh = keluhan::findOrFail($id);
$keluh->delete();
return redirect('lihatkeluhan')->with(['message', 'Record Deleted!']);
}
and in your view you could access the session variable message as
Materialize.toast({{ session('message') }}, duration, 'rounded');
and initiate a click so that the toast is displayed
$(document).ready(function () {
$("your element containing materialize handle").click();
});
The answer of #Mohammad Arshad is correct. Thank you.
Just to clarify things, I put my code bellow to communicate the system login.
If you want to work with colors, for example, on login success (green) or login fail (red). Just populate the third parameter of materialize toast with 'green' or 'red' respectively.
On UserController.php file:
<?php
namespace App\Http\Controllers\Login;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Auth;
use Hash;
use App\User;
class UserController extends Controller
{
public function login(Request $request)
{
$data = $request->all();
if(Auth::attempt([ 'email'=>$data['email'], 'password'=>$data['password'] ]))
{
\Session::flash('message', ['msg'=>'Login done successfully!', 'class'=>'green']);
return redirect()->route('user.index');
}
\Session::flash('message', ['msg'=>'Login failed. Check your data.', 'class'=>'red']);
return redirect()->route('user.index');
}
}
On site.blade.php file:
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config('site.name', 'YourSite') }}</title>
<link rel="stylesheet" type="text/css" href="{{ asset('lib/materialize/dist/css/materialize.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<header>
#include('yourHeaderCode._site._nav')
</header>
<main>
<!-- Your main code -->
#yield('content')
</main>
#include('yourFooterCode._site._footer')
<!-- Scripts -->
<script src="{{ asset('lib/jquery/dist/jquery.js') }}"></script>
<script src="{{ asset('lib/materialize/dist/js/materialize.js') }}"></script>
#if(Session::has('message'))
<script type="text/javascript">
Materialize.toast("{{ Session::get('message')['msg'] }}", 4000, "{{ Session::get('mensagem')['class'] }}");
</script>
#endif()
</body>
</html>
Trying to get some data from database using Vuejs. There are some dummy data in my users table. I want to show them in my view. Problem is though the page loads, It cannot fetch the data from the users table. It does not give any console error. I have checked database connection, restarted server and also checked api data with postman. It's working fine.
Views:
layout.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" title="no title">
</head>
<body>
<div class="container">
#yield('content')
</div>
<!-- scripts -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" charset="utf-8"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.2/vue-resource.min.js" charset="utf-8"></script>
#yield('scripts')
</body>
</html>
fetchUser.blade.php
#extends('layout')
#section('content')
<div id="UserController">
<table class="table table-hover table-striped">
<thead>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Address</th>
</thead>
<tbody>
<tr v-for="user in users">
<td>#{{ user.id }}</td>
<td>#{{ user.name }}</td>
<td>#{{ user.email }}</td>
<td>#{{ user.address }}</td>
<td>#{{ user.created_at }}</td>
<td>#{{ user.updated_at }}</td>
</tr>
</tbody>
</table>
</div>
#endsection
#section('scripts')
<script src="{{ asset('js/script.js') }}" charset="utf-8"></script>
#endsection
script.js
var vm = new Vue({
el: '#UserController',
methods: {
fetchUser: function(){
this.$http.get('api/users', function(data) {
this.$set('users', data )
})
}
},
ready: function(){
}
});
web.php
Route::get('/', function () {
return view('fetchUser');
});
api.php
<?php
use Illuminate\Http\Request;
use App\User;
Route::get('/users', function(){
return User::all();
});
You should use then , and call the fetchUser in the ready function as well
data:{
users: []
},
methods:{
fetchUser: function(){
this.$http.get('api/users').then(function(response){
this.$set('users', response.data);
}, function(response){
// error callback
});
},
ready: function(){
this.fetchUser();
}
vue-resource docs