Laravel session message as toastr notifications - laravel-5

How to convert the below session message to Toastr message without changing the controller code. In short i want to use toastr for all session messages without touching the controller code.
#if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
#endif
I'm using basic bootstrap 4 and laravel 5.6

Since toastr is a JS library, it needs to be included on the page calling the snippet (either on the same page or before a .blade.php directive such as #include() or #yield()):
<script type="text/javascript" src="/path/to/toastr.js"></script>
Then, modify the snippet to use toastr:
#if(session("status"))
<script type="text/javascript">
toastr.info("{{ session("status") }}");
<script>
#endif
.blade.php will convert session("status") to a string, which toastr will process and display as an info message.

Great response from friend Tim Lewis, but I faced yet another challenge for trying to use the toatsr from the AdminLte3 template automatically installed on Laravel 6.x.
Below what I did to complement and make it work in my project.
According to the AminLte3 documentation, the additional inclusion of CSS or JS is through sections
Section example for adding CSS
#section('css')
<link rel="stylesheet" href="/css/admin_custom.css">
#stop
Section example for adding JS
#section('js')
<script> console.log('Hi!'); </script>
#stop
So I needed to add the Toastr library and then include my .blade file for alerts along with the JS section
JS section with the alerts .blade file
#section('js')
<script src="myPath/toastr.js"></script>
#include('myPath.alerts')
#stop
Alerts .blade file
#if(session("status"))
<script type="text/javascript">
toastr.info("{{ session("status") }}");
<script>
#endif

Related

Turbolink is not working in Livewire version 2

i am working on my new project and technology stack is: laravel 8 + Livewire V2 + Jetstream, to create a single page application (SPA). but I am still confused if its possible SPA in my selected technology stack or not.
I know Livewire no longer supports Turbolinks out of the box so they provided Turbolinks adapter. I have followed the documentation but seems like its not working. please help me to understand the issue and let me know if SPA is possible or not in Livewire version 2.
here is my code:
<div class="min-h-screen bg-gray-100">
#livewire('navigation-menu')
<!-- Page Heading -->
#if (isset($header))
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
#endif
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
#stack('modals')
#livewireScripts
<script src="https://cdn.jsdelivr.net/gh/livewire/turbolinks#v0.1.x/dist/livewire-turbolinks.js" data-turbolinks-eval="false"></script>
Livewire Version 1 supported Turbolinks internally. Livewire Version 2 has removed internal support and extracted it into this plugin.
The goal of this livewire version 2 is to provide full Turbolinks/Turbo support in Livewire.
add hotwired/turbo package on your layout below #livewireScripts
add livewire/turbolinks package on your layout below hotwired/turbo package
#livewireScripts
<script type="module">
import hotwiredTurbo from 'https://cdn.skypack.dev/#hotwired/turbo';
</script>
<script src="https://cdn.jsdelivr.net/gh/livewire/turbolinks#v0.1.x/dist/livewire-turbolinks.js" data-turbolinks-eval="false" data-turbo-eval="false"></script>
You need to install Turbolink module first, Please go Turbolinks documentation Here.
Support for Turbolink has been removed in Livewire 2. So you need to add an extra JS script to make it work.
More here => https://github.com/livewire/turbolinks
Just add this after your livewire script:
<script src="https://cdn.jsdelivr.net/gh/livewire/turbolinks#v0.1.x/dist/livewire-turbolinks.js" data-turbolinks-eval="false" data-turbo-eval="false"></script>
Example:
#livewireScripts
<script src="https://cdn.jsdelivr.net/gh/livewire/turbolinks#v0.1.x/dist/livewire-turbolinks.js" data-turbolinks-eval="false" data-turbo-eval="false"></script>

Laravel blade.php use JavaScript compiled by mix to app.js

I'd like to use a JavaScript function in my blade.php file. I created the xyz.js file with a very simple function
function picture(soemthing){
document.getElementById('idXYZ').src = "example.com";
}
Then I added this file to the webpack.mix.js config:
mix.js(['resources/assets/js/app.js', 'resources/assets/js/xyz.js'], 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
and run: npm run dev. So far so good, npm compiled my script and the picture function was included in the app.js file. Now I'd like to add a form in blade.php and call the picture function on click. I created the following blade.php file:
#extends('layouts.app')
#section('content')
<div class="container">
<form>
Enter url: <input type="text" id="someID">
<input type="button" onclick="picture($('#someID').val())" value="Click"/>
</form>
</div>
<script src="{{ mix('js/app.js') }}"></script>
#endsection
And here I got really lost (btw: I was always the backend guy). On page reload browser displays
[Vue warn]: Error compiling template: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed.
And when I click the button I have
Error new:76 Uncaught ReferenceError: xyz is not defined
I understand that the first errors says that the app.js file was not loaded and that's the reason why picture is not found. How should I include app.js or any other compiled by mix JavaScript file? Is it really the tag causing this problem?
Try this I solved me
<script src="{{ asset('js/app.js') }}?time={{ time() }}"></script>
" I think not all browsers support this "
I think you're getting the error because you're placing a new script tag inside of the vue.js application div.
If you're opening your layout file app.blade.php there is a div with id="app" and inside it you're having your content section yield. Side-effect means that you shouldn't load a new script inside a Vue.js template.
The script should be in your layout at the end of the body tag. Also the script tag should look like this:
<script src="{{ asset('js/app.js') }}"></script>
Then your script should be available. But I would have a look at Vue.js and how you're handling click events there. click handler docs

Vuejs view source - I can still see directives after compilation

When I compile my vuejs and then do a view source (chrome) I still see the directives and variable place holders?
<nav #click="toggleNav"></nav>
<span class="title">{{ pageName }}</span>
I am pulling it in via
<script src="https://unpkg.com/vue/dist/vue.js"></script>
When I try to validate via the W3c I get loads of errors. Should these not be compiled down?
Should I make anything with a directive on it a component so it does not show in my html?

Laravel: javascript and ajax url is not converted properly

When I am trying to initialise javascript and css, I am getting an problem in path. It takes only root URL.
Eg. I have initialize
<script type="text/javascript" src="/bower_components/angular/angular.js"></script> then
it takes
<script type="text/javascript" src="http://localhost/bower_components/angular/angular.js"></script>
The file must be
<script type="text/javascript" src="http://localhost/myapp/bower_components/angular/angular.js"></script>
instead of
<script type="text/javascript" src="http://localhost/bower_components/angular/angular.js"></script>
Same problem with the Ajax.
Thanks,
Hasmukh
Your problem is not Laravel but that you're doing your HTML wrong.
If you application doesn't sit on the root of the site, then using root-relative URLs like "/some/url/here" will never work.
Luckily, Laravel can help you out there - you need to use its helpers for including assets:
{{ HTML::style('css/site.css') }}
{{ HTML::script('js/site.js') }}
{{ HTML::image('images/logo.png') }}
Or if you need to use an asset URL in some other form:
Download the file
You may have to set the URL to your application at the top of app/config/app.php though (especially if you need absolute URLs here, for example in HTML emails).

how to integrate CKEditor 4 in php page

How to integrate CKEditor 4 in php page? I looked at similar topics such as how to add or embed CKEditor in php page, but when I extracted the zip file there is no file called ckeditor.php.
At the moment there's no PHP connector for CKEditor v4 as some features are still waiting to be ported from v3. Some people reported successful integration of v3 connector into v4 so you can always give it a try and use the code from the latest 3.6.x package.
See the post on the form to know more.
Sample form:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<script src="../ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
</html>

Resources