I have in my application a lot of generated reports with html tables, now I implemented with vuejs diagrams. But I can't get them rendered because they are in javacript.
$view = view('reports.single.print', ['stats' => $stats]);
$html = $view->render();
In normal browser mode everything is fine, but I need to get rendered html for print mode.
I tried with moving from bottom to <head>
<script type="text/javascript" src="{{ asset('assets/js/app.js') }}"></script>
but nothing changes.
My blade looks like:
<body>
#include('header')
HTML TABLE CONTENT
<diagram></diagram>
#include('footer')
<script type="text/javascript" src="{{ asset('assets/js/app.js') }}">
</body>
Can I render somehow also javascript with render() method?
I think you should try adding a closing tag (</script>).
Replace:
<script type="text/javascript" src="{{ asset('assets/js/app.js') }}">
with the following:
<script type="text/javascript" src="{{ asset('assets/js/app.js') }}"></script>
Related
Why does Laravel blade strip out scripts? I have been trying to show a map like in their embed examples...
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" />
<div id="map"></div>
<script>
mapboxgl.accessToken ....
I can only see a link and a div, but no script and no style tag.
Although it is in the view-file, Blade removes it from the rendered page.
I get some console warnings about it not being "proper" way to include. Can this be the issue?
Have you tried adding this code between the scripts?
#stack ('before-scripts')
<script>
...
</script>
#stack ('after-scripts')
See if you can find an alternative to this. I have a #stack('header_scripts') and I want to render from there multiple scripts like <scripts></scripts> in my website.
For example, this is my master_page.blade.php:
<head>
#stack('header_scripts)
</head>
And this is my index.blade.php:
<div class="promotion">
-45% DISCOUNT!
#push('header_scripts')
<script>
//show promotion and send data to Google Anlytics from here
</script>
#endpush
</div>
<div class="container>
//some products list here
#push('header_scripts')
<script>
//show all the products and send data to Google Anlytics
</script>
#endpush
</div>
Etc, etc.
The problem is that the last push to the stack overwrites the first push code.
How can I do this?
<head>
#stack('css')
</head>
<body>
#stack('js')
</body>
#extends('layouts.admin.app')
#section('title','Tag')
#push('css')
<link href="{{ asset('admin/plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css') }}" rel="stylesheet">
#endpush
#section('content')
#endsection
#push('js')
<script src="{{ asset('admin/plugins/jquery-datatable/jquery.dataTables.js') }}"></script>
#endpush
im using a laravel 5.4 and i have a problem with urls, when i send value with urls like http://localhost:8000/Music/{id} , laravel does not load styles but if use url without value to get that view it loads styles properly, it also does not load styles if an slash get added to end of url like http://localhost:8000/videos/ but without that slash http://localhost:8000/videos works without problem ..sorry i cant speak english good.
here is my code :
Route::get('Music/{id}','homeController#Music');
public function Music(music $item)
{
return view('music',['item'=>$item]);
}
this works by route model binding properly and does what i want but when it returns music blade file it does not load styles that i linked but if use this instead :
Route::get('Music','homeController#Music');
a
public function Music()
{
$item = music::find(1); //for example
return view('music',['item'=>$item]);
}
that works perfect.
i checked this many ways its because of {vlaues} in urls
it also does not loads styles or js files if an slash get added to end of urls
what is the problem?
Use the asset() function...
<html>
<head>
<link href="{{ asset('css/test.css') }}" rel="stylesheet">
</head>
<body>
<div class="square"></div>
<!-- Same for Javascript... -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
i tested it on this too
<html>
<head>
<link rel="stylesheet" href="css/test.css" type="text/css">
</head>
<body>
<div class="square"></div>
</body>
</html>
So basically I have this code where I click on the image, it gets html file and should display it on the same page. It does display it but on another page, my guess is that it's not actually loading js file for some reason. Anyone can help?
View:
#extends('layouts.master')
#section('title', 'Best programmer ever')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="{{asset('/js/template.js')}}" rel="javascript" type="text/javascript"></script>
#section('content')
#endsection
#section('template')
<!-- #foreach ($templates as $template)
{{$template->image}}
{{$template->file}}
#endforeach
-->
<div class= "template_class">
<a class="content-link" href="templates/template1.html">
<img id = "image" src="{{ asset($template->image )}}"/>
</a>
</div>
#show
JavaScript:
$(function(){
$('.content-link').click(function(e){
e.preventDefault();
$('.content').load(this.href)
.fail(function()( alert('Oops...something went wrong')));
});
});
alert("hello");
It doesn't even show alert so that's why I think it is not loading it.
The <script> tags are out of the #section sections.
Try changing it like this:
#section('content')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="{{asset('/js/template.js')}}" rel="javascript" type="text/javascript"></script>
#endsection
If it doesn't work, check if the JS files are really included in your browser. (Open the Chrome Dev Tools and check the DOM)
I have a fresh install of Laravel passport inside of an existing Laravel 5.3 project of mine.
EDIT: I have now realised that any Vue components (even the default example component) show as fragments if i try and import them.
I am trying to import the Vue components into my application however when I do so, Vue debug tool in chrome is telling me that the elements are fragments.
Looking at the source of the page, it doesn't mention them, so im guessing that the components are being registered into the page correctly
I have been looking around and have found that most places referencing this error in vue are caused by the vue components not being wrapped in a div that roots to an element in the page however the same components have worked in a fresh install.
What should i be looking for to find the problem with this?
Here is my master layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
#include('includes.title')
<!--Baked in styles -->
#include('includes.styles')
<!-- Theme Custom styles -->
<link href="{{ asset('/css/custom.css') }}" rel="stylesheet">
{{--Fonts and icons--}}
<!-- Scripts -->
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
#yield('css')
</head>
<body>
#include('includes.navbar')
#yield('content')
<!-- Scripts -->
{{--Core ecomplete JS--}}
<script type="text/javascript" src="{{ asset('js/all.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-ui.custom.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/bootstrap.js') }}"></script>
{{--End core ecomplete JS--}}
<script type="text/javascript" src="{{ asset('js/sweetalert.min.js') }}"></script>
#yield('js')
<!-- Plugins -->
<script src="{{ asset('js/gsdk-checkbox.js') }}"></script>
<script src="{{ asset('js/bootstrap-select.js') }}"></script>
<!-- End Plugins -->
<!-- GSDK JS -->
<script src="{{ asset('js/get-shit-done.js') }}"></script>
#include('sweet::alert')
</body>
</html>
Here is the code for my app.js
Vue.component('example', require('./components/Example.vue'));
Vue.component(
'passport-clients',
require('./components/passport/Clients.vue')
);
Vue.component(
'passport-authorized-clients',
require('./components/passport/AuthorizedClients.vue')
);
Vue.component(
'passport-personal-access-tokens',
require('./components/passport/PersonalAccessTokens.vue')
);
const app = new Vue({
el: 'body'
});
Here is the code for my api.blade.php
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-8">
<passport-clients></passport-clients>
<passport-authorized-clients></passport-authorized-clients>
<passport-personal-access-tokens></passport-personal-access-tokens>
</div>
</div>
</div>
#endsection
I call it from a simple route closure.
Web.php
Route::get('api', function(){
return view('api');
});