jQueryUI incompatible with js/app.js

[mikestratton]

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

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

[MattStrauss]

I just tried this out on a (relatively) fresh install of Laravel and the datepicker worked as expected without commenting out the app.js reference. But I am not using a Windows machine or XAMPP (Mac/Valet/PHP 7.2.17 instead).

That being said, I am not sure how those environment differences would cause the issue. Did you try it with a fresh install of Laravel?

[mikestratton]

Yes

[mikestratton]

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]

@570studio Did you run php artisan make:auth ?

[MattStrauss]

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

[dongido001]

Hi, @570studio

After running php artisan make:auth, did it work for you?

Now the removal of the defer breaks My Vue app. I now have to move the script to the bottom of the page.

[devcircus]

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

[driesvints]

I've reverted the pr for now.

[devcircus]

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.

[mikestratton]

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]

If @taylorotwell agreed with the initial commit, why revert his commit?

[devcircus]

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

[mikestratton]

Yes but so does the current state with defer.

[mikestratton]

If moving the script to the bottom of the page allows the use of jQuery libraries, why not just do that?

[mikestratton]

So, in essence, it is ok to deliver an html page that reads only one script?

[driesvints]

We won't be reverting this. Feel free to change this in your own codebase.

[mikestratton]

Ok, thanks for the review.

[lod2007]

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>   

[tinchoque]

respuesta:
Eliminar "aplazar" de js / app.js y todos los otros scripts escriben después de 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>   

Perfecto!! me funciono!!

[Charudatta999]

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>   

thanks a lot, It was huge relief really I don't know how to thank you

[gkpurcey]

I've been struggling with this myself and wasted many hours looking for a solution.
Big thanks to lod2007!