I've created 'test.js' file in 'resources/js/' and added console.log(first) to it
In the welcome.blade.php I have something like that:
<body>
#vite(['resources/js/test.js'])
<script type='text/javascript'>
console.log(second)
</script>
</body>
What I expect is to execute those scipts in order from top to bottom, however it returns output:
second
first
I guess #vite(['resources/js/test.js']) is executed asynchronously by default, but I want to change it.
Is there any better way to do this than to put all the internal JS in DOMContentLoaded?
Changing type from 'text/javascript' to 'module' helped.
<script type='module'>
console.log(second)
</script>
Related
so I just migrated to Vite, and almost everything works, except... In a Blade component I'm adding a script to my scripts stack :
#push('scripts')
<script>
myfoo();
</script>
#endpush
In app.js I have defined
window.myfoo = () => {
console.log(111);
}
And I get an error Uncaught ReferenceError: myfoo is not defined. It worked before with Webpack. If I call myfoo() in the console it works. If I setTimeout the call a bit it works.
Of course in my layout they're in the correct order :
#vite('resources/js/app.js') {{-- Previously <script src="{{ mix('js/app.js') }}"></script> --}}
#stack('scripts')
I can force the call to wait for DOMContentLoaded but honestly I just don't understand the issue. Thanks ahead.
So it's because the script is tagged as type="module", its execution seems to be delayed. The solution is to makr the depending script as type="module" too.
#push('scripts')
<script type="module">
myfoo();
</script>
#endpush
I have a jsp file that includes multiple scripts at the end, such as
<script src="/resources/scripts/app.js"></script>
<script src="/resources/scripts/user.js"></script>
<script src="/resources/scripts/check.js"></script>
However, I'm getting back only enclosing script tags like this:
<script src="/resources/scripts/app.js"/>
<script src="/resources/scripts/user.js"/>
<script src="/resources/scripts/check.js"/>
This causes the browser to try to correct this and ends up only including the first script tag and the other script tags are ignored.
Does anyone know how I can stop spring from converting the script tags to self enclosing?
I inherited a Laravel project that has many blade files with javascript inside tags within the blade file. The issue is that there is a lot of repetitive JS logic so I'd like to extract the JS and create JS files to include in the blade? Example: <script src="{{ asset('js/components/file.js')}}"></script>
Is this the best practice for blade files or is it expected to be have the JS within the actual file?
First you have to assign where yo want to push scripts in your layout. for example, say layout.blade.php is your main layout file and you want to inject codes after footer. So add
#stack('scripts')
after footer.
Now in your blade file, use #push to inject your code.
#push('scripts')
<script>
// your code
</script>
#endpush
check blade stack for further detail.
I recommend you to maintain a specific section for page-specific javascript.
Please refer the following examples..
Example template.blade.php
<body>
#yield('content')
#include('_partial.scripts')
#yield('page-script')
#include('_partial.footer')
</body>
then
#section('page-script')
<script type="text/javascript">
// your custom script
</script>
#stop
Just wanted to bring some additionnal information, you can also use the defer attribute.
And here with Laravel 8, in webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/my-super-amazing-script.js', 'public/js')
And in your main my-layout.blade.php :
...
#yield('javascript')
</body>
Then, in in your specific page :
#extend('my-layout.blade.php')
...
#section('javascript')
<script src="{{ mix('js/my-super-amazing-script.js') }}" defer></script>
#endsection
As of now i am routing like the following:
beego.Router("/detailed", &controllers.MainController{}, "get:Detailed")
Instead i want to route like this:
beego.Router("/detailed/[some-product-name]", &controllers.MainController{}, "get:Detailed")
i did try like below:
beego.Router("/detailed/:id", &controllers.MainController{}, "get:Detailed")
But all dependency files like js, bootstrap, css are expected in the path of /detailed/static/ instead of /static.
Thank you.
It's not a beego problem. You probably made your include scripts, stylesheets link relative. In your html (template), all file "improts" you should predate with / sign.
So if you have
<script src="static/js/jquery.js" type="text/javascript"></script>
You need to change it to:
<script src="/static/js/jquery.js" type="text/javascript"></script>
I'm restructuring a page for a client, and I'm having some issues with the jQuery code I implemented on the page.
There's a pop-up lightbox that uses Prototype which appears when the page loads, and then there's marquee/scrollers on the top and right that I put there that use jQuery. I'm really unsure about what's causing the error.
I'm familiar with jQuery's noConflict, but I've tried pretty much every variation of it on this page and I still get an error - after a few seconds the marquees stop - and IE displays that "Errors on page" dialog, referencing line 464 ("Array length must be assigned a finite positive number").
Here is the page: -link removed by author-
Here is prototype.js: -link removed by author-
I have absolutely no idea what is causing this error and JavaScript isn't my strongest side.
When I first started seeing this error, I was Googling around for more general "Prototype + jQuery" errors, when I should have been looking for a solution specific to the exact problem I was dealing with.
Adding the terms "array length" and "line 464" actually led me to the solution to this specific problem, and here it is:
Updated from prototype v1.4 to v1.5.1.2 (v1.7, the latest release,
didn't work right and even produced a stack overflow error).
Changed around the order of the scripts, and changed noConflict:
<script src="/scripts/jquery-1.5.2.js" type="text/javascript"></script>
<script src="/scripts/jquery.Scroller-1.0.src_4.js" type="text/javascript"></script><!-- all _$_'s replaced with _jQuery_ -->
<script type="text/javascript">
<!--
// more jquery, all $'s replaced with jQuery
-->
</script>
<script type="text/javascript">
<!--
jQuery.noConflict();
-->
</script>
<script src="scripts/prototype-1.5.1.2.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
// everything else, including prototype scripts
-->
</script>
And that's it! Now I don't get the "Line 464" error and all scripts work fine.
Thank you #Ken and #Diodeus for leading me to the solution.
You may need to go through the plugins and replace $( with jQuery(, since you need to use "jQuery..." instead of "$..." in no-conflict mode.
Surround the code that uses jQuery with
(function ($) {
... // Your code
})(jQuery)
This way it uses local $ which is bound to jQuery and and jQuery only.
Also it is considered a bad idea to use both frameworks on the same website. You can find jQuery replacements for pretty much all of Prototype plugins.
I would find plugins in the same library. jQuery has all the plugins you mentioned, so there's no need to try using both. These two libraries can be difficult to get working together.
If you're set on using both libraries, try this ordering:
1) other lib
2) jquery
3) noconflict call
4) all plugins
<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="/scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$.noConflict();
-->
</script>
<script src="/scripts/jquery.Scroller-1.0.src_3.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>