How do I add the js file to my page?
I have the following structure:
public
- css
- js
- vendor
- bootstrap
- jquery
I want to use the jquery and bootstrap that are in my vendor folder.
I'm trying the following way.
<script type="text/javascript" src=" {{ asset('vendor/jquery/js/jquery-3.2.1.min.js) }} "> </script>
<script type="text/javascript" src=" {{ asset('vendor/bootstrap/js/bootstrap.min.js) }} " > </script>
but does not work, error appears
syntax error, unexpected 'vendor' (T_STRING)
you have forgot to put ' at the end of assert function
<script type="text/javascript" src="{{asset('vendor/jquery/js/jquery-3.2.1.min.js')}}"> </script>
<script type="text/javascript" src="{{ asset('vendor/bootstrap/js/bootstrap.min.js')}}"> </script>
You are missing the closing quote:
<script type="text/javascript" src=" {{ asset('vendor/jquery/js/jquery-3.2.1.min.js') }} "> </script>
<script type="text/javascript" src=" {{ asset('vendor/bootstrap/js/bootstrap.min.js') }} " > </script>
Related
I have in my application a lot of generated reports with html tables, now I implemented with vuejs diagrams. But I can't get them rendered because they are in javacript.
$view = view('reports.single.print', ['stats' => $stats]);
$html = $view->render();
In normal browser mode everything is fine, but I need to get rendered html for print mode.
I tried with moving from bottom to <head>
<script type="text/javascript" src="{{ asset('assets/js/app.js') }}"></script>
but nothing changes.
My blade looks like:
<body>
#include('header')
HTML TABLE CONTENT
<diagram></diagram>
#include('footer')
<script type="text/javascript" src="{{ asset('assets/js/app.js') }}">
</body>
Can I render somehow also javascript with render() method?
I think you should try adding a closing tag (</script>).
Replace:
<script type="text/javascript" src="{{ asset('assets/js/app.js') }}">
with the following:
<script type="text/javascript" src="{{ asset('assets/js/app.js') }}"></script>
See if you can find an alternative to this. I have a #stack('header_scripts') and I want to render from there multiple scripts like <scripts></scripts> in my website.
For example, this is my master_page.blade.php:
<head>
#stack('header_scripts)
</head>
And this is my index.blade.php:
<div class="promotion">
-45% DISCOUNT!
#push('header_scripts')
<script>
//show promotion and send data to Google Anlytics from here
</script>
#endpush
</div>
<div class="container>
//some products list here
#push('header_scripts')
<script>
//show all the products and send data to Google Anlytics
</script>
#endpush
</div>
Etc, etc.
The problem is that the last push to the stack overwrites the first push code.
How can I do this?
<head>
#stack('css')
</head>
<body>
#stack('js')
</body>
#extends('layouts.admin.app')
#section('title','Tag')
#push('css')
<link href="{{ asset('admin/plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css') }}" rel="stylesheet">
#endpush
#section('content')
#endsection
#push('js')
<script src="{{ asset('admin/plugins/jquery-datatable/jquery.dataTables.js') }}"></script>
#endpush
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="/plugins/morris/morris.min.js"></script>
<script src="/plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="/plugins/knob/jquery.knob.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="/plugins/daterangepicker/daterangepicker.js"></script>
<script src="/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="/plugins/bootstrap-wysihtml5/bootstrap3-wysiHtml5.all.min.js"></script>
<script src="/dist/js/pages/dashboard.js"></script>
<script src="/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/plugins/select2/select2.full.min.js"></script>
<script src="/plugins/input-mask/jquery.inputmask.js"></script>
<script src="/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="/plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="/plugins/daterangepicker/daterangepicker.js"></script>
<script src="/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script src="/plugins/timepicker/bootstrap-timepicker.min.js"></script>
<script src="/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="/plugins/iCheck/icheck.min.js"></script>
<script src="/plugins/fastclick/fastclick.min.js"></script>
<script src="/dist/js/app.min.js"></script>
<script src="/dist/js/demo.js"></script>
here are my footer file that contain links of scripts i have tried
{!! Html::script('js/test.js') !!}
all these sulution in laravel blade but wrked fine for components but still getting the error message in console of not define.not define .
here i am attaching the blade file as well as console errors i have placed all the files in the
layout-blade-php.txt
public folder
<script> $.widget.bridge('uibutton', $.ui.button);</script>
That line must be placed under your script import statements.
Also your jquery script is commented out. Hope this helps.
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="/plugins/morris/morris.min.js"></script>
<script src="/plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="/plugins/knob/jquery.knob.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="/plugins/daterangepicker/daterangepicker.js"></script>
<script src="/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="/plugins/bootstrap-wysihtml5/bootstrap3-wysiHtml5.all.min.js"></script>
<script src="/dist/js/pages/dashboard.js"></script>
<script src="/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/plugins/select2/select2.full.min.js"></script>
<script src="/plugins/input-mask/jquery.inputmask.js"></script>
<script src="/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="/plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="/plugins/daterangepicker/daterangepicker.js"></script>
<script src="/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script src="/plugins/timepicker/bootstrap-timepicker.min.js"></script>
<script src="/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="/plugins/iCheck/icheck.min.js"></script>
<script src="/plugins/fastclick/fastclick.min.js"></script>
<script src="/dist/js/app.min.js"></script>
<script src="/dist/js/demo.js"></script>
<script> $.widget.bridge('uibutton', $.ui.button);</script>
We can use a section to define some HTML and then yield that somewhere else.
So why do we have stacks? https://laravel.com/docs/5.2/blade#stacks
It's doing exactly the same thing with different keywords, but has fewer options (No inheritance).
#push('scripts')
<script src="/example.js"></script>
#endpush
<head>
<!-- Head Contents -->
#stack('scripts')
</head>
Can be done with section:
#section('scripts')
<script src="/example.js"></script>
#endsection
<head>
<!-- Head Contents -->
#yield('scripts')
</head>
I might be mistaken, but the difference is not only semantically, but in behaviour as well.
With #push you append as many times as needed to a stack, while (by default) you may fill #section only once in your views.
In some situations this comes in handy when you need to add content from different locations across your template files or in loops:
index.blade.php:
#extends('master')
...
#for ($i = 0; $i < 3; $i++)
#push('test-push')
<script type="text/javascript">
// Push {{ $i }}
</script>
#endpush
#section('test-section')
<script type="text/javascript">
// Section {{ $i }}
</script>
#endsection
#endfor
master.blade.php
#stack('test-push')
#yield('test-section')
</body>
result:
<script type="text/javascript">
// Push 0
</script>
<script type="text/javascript">
// Push 1
</script>
<script type="text/javascript">
// Push 2
</script>
<script type="text/javascript">
// Section 0
</script>
</body>
Stack is someway appropriate for scripts , with stack you can Append as much as you need .
#push('scripts')
<script src="/example.js"></script>
#endpush
Append …
<script>
#stack('scripts')
</script>
As you can see the script's stack will be appended under the script tag of example js. So you can push special scripts for each view.
#section - You can add your js css once.
#stack - Push js, aand css into stack (page) many times.
Wondering how can I link with blade syntax to my jquery/javascript files?
<script src="../../public/js/jquery.min.js"></script>
<script src="../../public/js/bootstrap.js"></script>
This didn't work:
<link type="text/css" rel="stylesheet" href="{{ URL::to('js/jquery.min.js') }}">
<link type="text/css" rel="stylesheet" href="{{ URL::to('js/bootstrap.js') }}">
URL::to($param) directs to your root folder (/public) and adds the string folders. URL::to('js/bootstrap.js') directs to /public/js/bootstrap.js. this looks correct to me.
although you used a css linking tag for javascript. try using:
<script src="{{ URL::to('js/jquery.min.js') }}"></script>
<script src="{{ URL::to('js/bootstrap.js') }}"></script>
You should use the following:
<script src="{{ URL::asset('/js/jquery.min.js') }}"><script/>
<script src="{{ URL::asset('/js/bootstrap.js') }}"><script/>
This will always work. If you are creating a package in workbench this is also the way to go.
And if you want to publish your assets to public you will do:
php artisan asset:publish --bench="vendor/package"