framework: jQueryUI incompatible with js/app.js

Laravel Version: 5.8.*
PHP Version: 7.3.3
Database Driver & Version: mysqlnd 5.0.12-dev – XAMPP Control Panel v3.2.3 – Windows 10 – Jetbrains PhpStorm

Description:

jQueryUI Datepicker works fine when ran outside of Laravel application. Here is the code: https://jqueryui.com/datepicker/ Implementing the same code from within any laravel blade view returns a “datepicker” not defined in the developers console(browser).

Commenting out the line:

{{--    <script src="{{ asset('js/app.js') }}" defer></script>--}}

in the app.blade.php file and the jquery date picker works.

Steps To Reproduce:

Install Laravel 5.8 using the development environment stated in this message.
php artisan make:auth
Create a blade view with an input form for date.
Add the code from https://jqueryui.com/datepicker/ to the blade view and/or app.blade.php.
Run your blade view and check console - jQueryUI values are not being passed.
Comment out the js/app.js as previously stated in this message.
jQueryUI datepicker calendar will now work.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 21 (14 by maintainers)

Commits related to this issue

Merge pull request #29001 from mikestratton/5.8 [5.8] Fixes Issue #28984, defer in app.js script prevents jquery components from loading. — committed to laravel/framework by taylorotwell 5 years ago
Revert "[5.8] Fixes Issue #28984, defer in app.js script prevents jquery components from loading." — committed to laravel/framework by driesvints 5 years ago
Merge pull request #29109 from laravel/revert-29001-5.8 Revert "[5.8] Fixes Issue #28984, defer in app.js script prevents jquery components from loading." — committed to laravel/framework by driesvints 5 years ago

Most upvoted comments

answer: Delete “defer” from js/app.js and all another scripts write after js/app.js

 <script src="{{ asset('js/app.js') }}" ></script>
    <!--  Jquery scripts -->
 <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>
    <!--  your  scripts -->
<script src="{{ asset('js/script.js') }}"></script>

lod2007 on Oct 12, 2019

I strongly disagree. I am using jQuery in some but not all html forms. I create a view just for this form. There is no need to compile all the required code in JavaScript when it is not widely used.

I have found a lot of mid level developers struggling with this. Just Google “jquery not working with Laravel”.

The ability to add an additional script that does not break the site should be the default working state. developers should not be required to compile everything. It should be an option and is a good coding practice to compile, but lack thereof should not break the app.

The “defer” seems to be a symptom of a much bigger problem.

Ease of use is a must and what has drawn many to laravel. Ignoring this bug will only offer continued frustration for thousands of developers.

mikestratton on Jul 8, 2019

Can also be resolved if defer is removed from the script.

<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/app.js') }}" ></script>

mikestratton on Jun 30, 2019

The state of this after the revert, is more than sufficient for a starter scaffold. Of course there will be situations where you’ll need to change it, but that should be handled in the individual app as the need arises. As it is, it suffices the 80% use-case.

devcircus on Jul 8, 2019

This pr breaks the most fundamental concept of mixing javascript and html.

devcircus on Jul 8, 2019

I’ve reverted the pr for now.

driesvints on Jul 8, 2019

Yeah the removal of defer doesn’t make sense without also moving the script tag to the bottom. Not sure why that was merged.

devcircus on Jul 8, 2019

@mikestratton I did run php artisan make:auth. Looks like your PR got merged though, so 👍

MattStrauss on Jun 30, 2019