In my laravel 5.6/jquery application I need to create some js file with common funcs and accessible in all js files of my project
and for this in app template
resources/views/cardsBS41Frontend/layouts/frontend.blade.php I added definition of js/app_funcs.js:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<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() }}">
<title>#if(isset($site_name)){{ $site_name }}#endif</title>
<!-- Styles -->
<link href="{{ asset('css/frontend.css') }}" rel="stylesheet">
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<!-- Scripts -->
<script src="{{ asset('js/jquery-3.3.1.min.js') }}"></script>
<script src="{{ asset('js/app.js') }}{{ "?dt=".time() }}" defer></script>
<script src="{{ asset('js/app_funcs.js') }}{{ "?dt=".time() }}" defer></script>
<script src="{{ asset('/js/bootstrap.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
<main class="py-4">
#yield('content')
</main>
</div>
#section('scripts')
#endsection
#yield('scripts')
</body>
#include($frontend_template_name.'.layouts.footer')
</html>
and in blade template resources/views/cardsBS41Frontend/vote.blade.php I attach /vote.js file, which refers only this template:
#extends($frontend_template_name.'.layouts.frontend')
#section('content')
<div class="container">
...CONTENT OF MY PAGE
</div>
#endsection
#section('scripts')
<script src="{{ asset('js/'.$frontend_template_name.'/vote.js') }}{{ "?dt=".time() }}"></script>
<script type="text/javascript" language="JavaScript">
/*<![CDATA[*/
var frontendVote = new frontendVote('view', // must be called before jQuery(document).ready(function ($) {
<?php echo $appParamsForJSArray ?>
);
jQuery(document).ready(function ($) {
frontendVote.onFrontendPageInit('view')
});
/*]]>*/
</script>
#endsection
But in vote.js file when I call js function of js/app_funcs.js file I got error that
Uncaught ReferenceError: functionname is not defined
I expected to use of functions of js/app_funcs.js, as this file is attached and I see in console of the browser
that file js/app_funcs.js is retrieved ok BEFORE /vote.js.
Can you give me a hint what is wrong and which is the right way ?
Thanks!
You're loading the app_funcs.js script with defer. That means the script loads in parallel with the HTML but defers execution until the HTML is parsed. Since you're loading the vote.js script without defer, it stops HTML parsing, loading and executing immediately, effectively running it before the app_funcs script. Either defer the load of your vote script as well, or don't use defer with the app_funcs script.
Related
I am trying to add jquery and use into a new project
app.js
require('./custom');
require('./bootstrap');
require('alpinejs');
custom.js
window.$ = require('jquery');
window.Swal = require('sweetalert2');
guest.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body>
<div class="font-sans text-gray-900 antialiased">
{{ $slot }}
</div>
</body>
</html>
welcome.blade.php
<x-guest-layout>
<script>
function alerta() {//This Work
Swal.fire("Hello World Sweetalert2");//This Work
$('.lol').hide();//This Work
}
$(function() {//$ This not Work
console.log( "ready!" );
});
Swal.fire("Hello World Sweetalert2");//This not Work
</script>
<x-jet-button onclick="alerta()" class="lol">Alert</x-jet-button>
</x-guest-layout>
And finally get the error Uncaught ReferenceError: $ is not defined or Uncaught ReferenceError: Swal is not defined
How can i solve this?
Edit:
Thanks to #Areg this question is solved, I understood this better after reading The Script element
When you write something into app.js you need to compile it later on using npm run dev or npm run watch. Also don't defer you app js file, because it is designed to run the script after the document is loaded as it states on w3schools
The defer attribute is a boolean attribute.
When present, it specifies that the script is executed when the page has finished parsing.
Note: The defer attribute is only for external scripts (should only be used if the src attribute is present).
I am trying to hook up summernote wysiwyg with Laravel 8, no matter what I do I am getting a constant jquery error. I have tried to use webpack for the scripts and added scripts directly to the page. The order to my scripts should be correct and I am executing the code after the scripts However, the error is a basic error and I can't nail down the issue.
The webpack file is default and I have run npm run dev & prod.
The code listed put into a basic HTML file runs with no errors, there must be something I am doing with Laravel.
jquery.js:4055 Uncaught TypeError: "#summernote".summernote is not a function
App.blade.php
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script type="text/javascript" rel="script" src="{{asset('js/app.js')}}" ></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
//rest of the template is out of the box Laravel base install with auth installed
<form method="post">
<textarea id="summernote" name="editordata"></textarea>
</form>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-bs4.min.js"></script>
<script type="text/javascript" rel="script" src="{{asset('js/main.js')}}" ></script>
</body>
</html>
Main.js
jQuery(document).ready(function() {
/* $('#summernote').summernote({
placeholder: 'Hello Bootstrap 4',
tabsize: 2,
height: 100 */
// Code still produces the error here
});
});
$('#summernote').summernote({
placeholder: 'Hello Bootstrap 4',
tabsize: 2,
height: 100
});
// Code still produces the error here
Happy to provide more information, help will be greatly appreciated.
This works for me with these
Before the end of </thead>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.js"></script>
Inside <form>
<div id="summernote"></div>
Before the end of </body>
<script>
$(document).ready(function() {
$('#summernote').summernote();
});
</script>
Jsfiddle Preview
Useful links
Summernote Getting started
Summernote Examples
Issue might be Summernote get loaded before the JQuery library
I found a solution, I cant take credit. An older slightly related Laravel issue had a solution:
Laravel 5.4 Script loading issue
The contributor is #jordan
By isolating the script into a #section and adding $yield('scripts') below the js files solved the problem. Still not sure what Laravel is doing to the scripts as the page loads, but I have a solution. Thanks for all of your help those who contributed, I always value the input and suggestions.
I'd like to add a jQuery UI datepicker field to a form in a laravel 7 app, but I always get the following error message:
Uncaught TypeError: $(...).datepicker is not a function.
I tried to use the source code example from here.
I read at least a dozen different posts on how to fix this, tried all of them without luck in my case.
My feeling is that my laravel app (maybe in app.js?) already loads one of the scripts or maybe a different version of a the same script (maybe jQuery?) used also by the datepicker and this causes the issue. Unfortunately being new to Laravel, I'm not sure how to solve this. Please see below some code samples and let me know, if you have any suggestions. Many thanks!
App layout file header:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
View file:
#extends('layouts.app')
#section('content')
<form action="" method="post" action="/tour/{id}">
<!-- CROSS Site Request Forgery Protection -->
#csrf
<div class="form-group">
<label>Date</label><br>
<input id="datepicker" type="text" />
</div>
</form>
<script>
$( function() {
$( "#datepicker" ).datepicker();
});
</script>
#endsection
well here you are calling jquery twice actually. one in app js file and other from the cdn. you need not to call the cdn. and as you are using defer attribute in app js and another version of jquery, both are conflicting and thus datepicker is not a function. you can simply remove defer attribute and the extra cdn call.
<script src="{{ asset('js/app.js') }}"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
});
</script>
Your code perfectly works in my local installation.
<script src="{{ asset('js/app.js') }}" defer></script>
Try to remove app.js and check whether your libraries are getting conflict.
If not, open your insepect element and check if you have an active internet connection and jquery ui is loaded (Refer pic 2)
I'd like to add a bootstrap datepicker field to a form in a laravel 7 app, but I always get the following error message: Uncaught TypeError: $(...).datepicker is not a function.
I read at least a dozen different posts on how to fix this, tried all of them without luck in my case.
My feeling is that my laravel app (maybe in app.js?) already loads one of the scripts or maybe a different version of a the same script (maybe jQuery?) used also by the datetimepicker and this causes the issue. Unfortunately being new to Laravel, I'm not sure how to solve this. Please see below some code samples and let me know, if you have any suggestions. Many thanks!
App layout file header:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet">
</head>
View file:
#extends('layouts.app')
#section('content')
<form action="" method="post" action="/tour/{id}">
<!-- CROSS Site Request Forgery Protection -->
#csrf
<div class="form-group">
<label>Date</label><br>
<input id="datepicker" type="text" />
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script>
$( "#datepicker" ).datepicker({
format: "mm/dd/yy",
});
</script>
You are initiating datepicker in your code, but in the header you are loading a completely different plugin datetimepicker
I am currently working on a project using Django, and I am having a weird problem with my script tags.
I have a layout.html file in which I have included Jquery and Bootstrap in the head. Using jinja, I am extending layout.html for my new file, main.html. In my new file I am now including a new script because this script is peculiar to this page.
The problem I am having is that this new script does not work in main.html unless I again include Jquery in inside main.html. Please, I would like to know if there is an explanation for this? or maybe I am missing something?
layout.html file
<html>
<head>
// script to include jquery here, version 3.3.1
// other scripts include, bootstrap.js, popper.js, knockout.js
</head>
<body>
{ block content % }
{ % endblock % }
</body>
</html>
Sample of main.html
main.html
{ % extends "layout.html" %} {% block content %}
// This new script below only works if jquery is included here
// new script here
<div> </div>
{% endblock %}
I am also using knockout.js, from which I am calling functions in new script on document load. The new script requires Jquery, But I don't understand why it's not finding the jquery unless its included in the same file. The I also get and error when I include JS in the main.html file because jquery should be included before bootstrap.js.
Please, I would be happy if anyone has encountered similar problems or if anyone can explain this to me.
This is the head for layout.html:
<head>
<title>Suggesto</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- font awesome-->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
/>
<!-- Js-cookie-->
<script src="https://cdn.jsdelivr.net/npm/js-cookie#2/src/js.cookie.min.js"></script>
<!--Jquery-->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"
></script>
<!-- Popper.js-->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"
></script>
<!-- Bootstrap.js-->
<script src="/static/bootstrap/js/bootstrap.js"></script>
<!-- Font -->
<link
href="https://fonts.googleapis.com/css?family=Noto+Serif+SC|Open+Sans|Quicksand|Montserrat"
rel="stylesheet"
/>
<!--Knockout.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
{% load staticfiles %}
<link
rel="stylesheet"
href="/static/bootstrap/css/bootstrap.css"
type="text/css"
/>
<link rel="stylesheet" href="/static/css/mainpage.css" type="text/css" />
</head>
The main.html starts like this
{%extends "mainpage/layout.html" %} {% block content %}
<script src="/static/js/jquery.session.js"></script>
<link
rel="stylesheet"
href="/static/css/star-rating.min.css"
media="all"
type="text/css"
/>
<script src="/static/js/star-rating.min.js"></script>
<script src="/static/js/suggest.js"></script>
<link rel="stylesheet" href="/static/css/suggest.css" type="text/css" />
<!-- Start -->
<div class="container" id="Page">
It ended up being a function from Knockoutjs:
ko.cleanNode( )
I don't know what this function does under the hood, something to look at. Feel free to provide more details if you know more.