Topic: Uncaught ReferenceError: toastr is not defined at create:265
I am trying to load a toastr alert on a form submit using laravel I have placed the code in the foreach statement<script>command:toastr.warning(\\\\\\\\\\\\\\\'$error\\\\\\\\\\\\\\\')</script>When the error is thrown I get a js error for each error thrown.create:265 Uncaught ReferenceError: toastr is not definedat create:265The tostr.js is being loaded, if I add a button to the form I am able to activate an alert that way.
Alert Code
@if(isset ($errors) && count($errors) > 0)
<script>Command: toastr["error"]("<?php echo $errors ?>") </script>
@endif
@if(Session::get('success', false))
<?php $data = Session::get('success'); ?>
@if (is_array($data))
@foreach ($data as $msg)
<div class="alert alert-success alert-notification">
<i class="fa fa-check"></i>
{{ $msg }}
</div>
@endforeach
@else
<div class="alert alert-success alert-notification">
<i class="fa fa-check"></i>
{{ $data }}
</div>
@endif
@endif
Form Code
@extends('layouts.appmain')
@section('page-title', trans('app.dashboard'))
@section('page-heading', trans('app.dashboard'))
@section('breadcrumbs')
<li class="breadcrumb-item active">
@lang('Companies')
</li>
@stop
@section('content')
@include('partials.toastr')
{!! Form::open(['route' => 'companies.store', 'id' => 'companies-form']) !!}
<section class="form-elegant">
<!--Form without header-->
<div class="card">
<div class="card-body">
<div class="row">
<!--Header-->
<div class="text-center">
<h3 class="dark-grey-text mb-5"><strong>Create New Company</strong></h3>
</div>
</div>
<!--Body-->
<div class="row">
<div class="col-md-12">
<div class="md-form">
<input type="text" id="name" name="name" class="form-control" >
<label for="name">Company Name</label>
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="md-form">
<input type="text" id="street_number" name="street_number" class="form-control" >
<label for="street_number">House Number</label>
</div>
</div>
<div class="col-8">
<div class="md-form">
<input type="text" id="route" name="route" class="form-control" >
<label for="route">Address</label>
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="md-form">
<input type="text" id="locality" name="locality" class="form-control">
<label for="locality">City</label>
</div>
</div>
<div class="col-4">
<div class="md-form">
<input type="text" id="administrative_area_level_1" name="state" class="form-control" >
<label for="administrative_area_level_1">State</label>
</div>
</div>
<div class="col-4">
<div class="md-form">
<input type="text" id="postal_code" name="postal_code" class="form-control" >
<label for="postal_code">Zip Code</label>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="md-form">
<input type="text" id="email" name="email" class="form-control">
<label for="email">Email Address</label>
</div>
</div>
<div class="col-6">
<div class="md-form">
<input type="text" id="phone" name="phone" class="form-control">
<label for="phone">Phone Number</label>
</div>
</div>
</div>
<div class="text-center mb-3">
<button type="submit" class="btn blue-gradient btn-block btn-rounded z-depth-1a">Create New Company</button>
</div>
</div>
</div>
<!--/Form without header-->
</section>
{!! Form::close() !!}
@stop
@section('styles')
<style type="text/css">
.form-elegant .font-small {
font-size: 0.8rem; }
.form-elegant .z-depth-1a {
-webkit-box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25);
box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25); }
.form-elegant .z-depth-1-half,
.form-elegant .btn:hover {
-webkit-box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15);
box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15); }
</style>
@stop
@section('scripts')
{!! HTML::script('assets/js/chart.min.js') !!}
{!! HTML::script('assets/js/as/dashboard-admin.js') !!}
<script type="text/javascript">
toastr.options = {
"closeButton": false,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-top-right",
"preventDuplicates": false,
"onclick": null,
"showDuration": 300,
"hideDuration": 1000,
"timeOut": 5000,
"extendedTimeOut": 1000,
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
</script>
@stop
Vasilioskw answered 3 years ago
Hi, I spend about two days trying to fix this.
Here's what I added in my application.html(+ .erb - if using rails)
Code: (open)div id="notifications"><%= flash_notifications %> div(>)
(<) head (> )
(<)script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js">(<)/script (>)
(<)script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js">(<)/script (>)
(<)script src="http://code.jquery.com/jquery-1.9.1.min.js">(<)/script (>)
(<)/head (>)
These links may not be the most up to date versions, but it worked for me.
Sorry I has to write this in a ridiculous way, the forum blocks out some of the "<" & ">"
And this is what I have in my Application_helper.rb (Which I believe is just the equivalent of your function in Javascript -- You may have to write it differently to the language, this is in ruby)
def flash_notifications
flash_messages = []
flash.each do |type, message|
type = 'success' if type == 'notice'
type = 'error' if type == 'alert'
text = "toastr.#{type}('#{message}');"
flash_messages << text.html_safe unless message.blank?
end
"<script>$(function(){ #{ flash_messages.join("\n") } });</script>".html_safe if flash_messages.any?
end
and in your CSS file @import "toastr"; along with installing it
Now, I'm not sure if the import is even working, cause all similar issues were solved with adding the cloudflare stylesheets -- which are what gives the application access to what you're trying to do, as I understand.
Marcin Luczak staff commented 3 years ago
Hi @Vasilioskw,
Thank you for your contribution to our community :)
Keep coding, Marcin
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Bartłomiej Malanowski staff pro premium commented 6 years ago
Could you please show us your code?Jblevins pro commented 6 years ago
Updated Post with codeJblevins pro commented 6 years ago
I fixed this by loading jquery first in head then toastr second.... I prefer that they are loaded at the end of the page however it does not appear to work that wayJakub Strebeyko staff commented 6 years ago
Hi there, Toastr requires jQuery. It means it gets undefined if jQ is not already there. Beside that you can load them however you like. With Best Regards, Kuba