Uncaught ReferenceError: toastr is not defined at create:265

Topic: Uncaught ReferenceError: toastr is not defined at create:265

Jblevins pro asked 6 years ago

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">

<div class="card">

<div class="card-body">
<div class="row">

<div class="text-center">
<h3 class="dark-grey-text mb-5"><strong>Create New Company</strong></h3>
</div>
</div>

<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>

</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') !!}

@stop

Bartłomiej Malanowski staff commented 6 years ago

Could you please show us your code?

Jblevins pro commented 6 years ago

Updated Post with code

Jblevins 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 way

Jakub 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

Add comment

Vasilioskw free answered 3 years ago

0 0 Best answer

<p>Hi, I spend about two days trying to fix this.</p>

<p>Here's what I added in my application.html(+ .erb - if using rails)</p>

<p>Code: (open)div id="notifications"><%= flash_notifications %> div(>)</p>

<p><em>These links may not be the most up to date versions, but it worked for me.</em></p>

<p>Sorry I has to write this in a ridiculous way, the forum blocks out some of the "<" & ">"</p>

<hr>

<p>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)</p>

<p>def flash_notifications</p>

<pre class="prettyprint"><code>    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
</code></pre>

<hr>

<p>and in your CSS file
@import "toastr";
along with installing it</p>

<p>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.</p>

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Jblevins

Pro User 25Support score
4Questions 1Answers 0Snippets