Including Javascript codes with #stack not working - javascript

I'm working with Laravel 8 and I have a master.blade.php goes like this:
<!DOCTYPE html>
<html>
<head>
<!-- including scripts and stylesheets -->
</head>
<body>
#yield('content')
<script src="/plugins/jquery/jquery.min.js"></script>
#stack('scripts')
</body>
</html>
Then at content.blade.php, I added this as my dynamic content:
#extends('admin.master')
#section('content')
{{ $title }}
...
{{ $slot }}
#endsection
After that I have created some new file and used the components like this:
#component('admin.layouts.content' , ['title' => 'example file'])
#slot('breadcrumb')
<li class="breadcrumb-item active">Example File</li>
#endslot
...
#endcomponent
#push('scripts')
<script>
console.log(1); // to check if the js codes can be run on page
</script>
#endpush
But the problem is that #push('scripts') not working at all! Meaning that this way of including Javascript codes is wrong.
So how can I properly include them in my example page properly?
Note that I don't want to include js codes in content.blade.php because it loads in every single page!

You can try to swap the order of #push and #component
#push('scripts')
<script>
console.log(1); // to check if the js codes can be run on page
</script>
#endpush
#component('admin.layouts.content' , ['title' => 'example file'])
#slot('breadcrumb')
<li class="breadcrumb-item active">Example File</li>
#endslot
...
#endcomponent
I guess it's got something with how blade files are parsed and compiled. So when #component | <x-component> comes before #push, what probably happens is that the component gets rendered by the blade compiler engine and then there's no placeholder for the #push directive to merge contents on the stack.
Faced a similar issue once and learnt that when using components the #push should come before the #component | <x-component> - order is important when using stacks with component.

Related

How to put JavaScript in Laravel make:auth

Hello everyone so new to laravel here, I just want to ask how to put JS into the file that automatically created when running php artisan ui vue --auth, because whenever I try to add it into resources/views/auth/register.blade.php I get
[Vue warn]: Error compiling template:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed.
sorry for random question I just want to know how, and also how to add css, thank you so much in advance
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>
<div class="card-body">
#if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
#endif
You are logged in!
</div>
</div>
</div>
</div>
more code here since they dont allow
#endsection
You're trying to add a <script> to your blade #section, which is why you're getting that error. There are a few ways to do this.
1.. Add your script tags to views/layouts/app.blade.php right before the </body> tag, for example:
<script></script>
</body>
</html>
2.. Place them in your <head> tag and add the defer attribute
<script defer></script>
Your register.blade.php and any other view that extends app.blade.php will now have access to these scripts because it extends the app.blade.php layout.
3.. Use the Blade #stack directive to push your script to a stack. Stacks can be named, in this example lets simply use the name scripts. Add this to register.blade.php
#push('scripts')
<script></script> <!-- Add your JS file or JS code -->
#endpush`
Now in the <head> tag of your app.blade.php you can place #stack('scripts')
Note: Only register.blade.php will load this script, any other view that extends app.blade.php will not have access to it.

Function not defined from different js file (NOT an order problem) - IE Only

Why do I get a javascript error (function not defined) on Internet Explorer when I try to call a function that lives inside a different js file?
I'm using laravel blades, this is my parent template:
<!DOCTYPE html>
<html>
<head>
<!-- METAS -->
<title>#yield('titulo')</title>
#yield('css')
</head>
<body>
#include('navbar')
#yield('content')
#include('footer')
<!-- Here I have jquery and bootstrap js files... -->
<script src="{{ asset('js/sitio/custom.js') }}" type="text/javascript"></script>
#yield('js')
</body>
</html>
So within the extending view I have:
#extends('layouts.template')
#section('content')
<button id="button" type="button">Click me</button>
#endsection
#section('js')
<!-- Here I have a js file that calls a function that lives inside custom.js -->
<script src="{{ asset('js/some-js-file.js') }}"></script>
#endsection
Basically I have a button that when clicked needs to send some data over ajax:
Code inside some-js-file.js:
$(document).ready(function(){
$('#button').on('click', function(){
sendAjax(); //the error is here, I get a 'sendAjax is not defined'
})
});
Code inside custom.js:
//this function is declared inside the global scope
function sendAjax(){
//do things
}
It's also worth mentioning that the code segment that calls the custom.js file's function gets executed inside a $(document).ready().., also, this only happens with internet explorer, in other browsers such as firefox, chrome and safari works always fine.
I've read a suggestion to change the location of my custom.js file and move it inside <head> tag but I would need to also move jquery and bootstrap js libraries because that custom file makes use of them, and according to this answer, it is NOT recommended to move jquery inside <head> tags because of performance. How can I solve this?

Dropdown list isn't working after importing another html file using jquery?

I'm trying to import header.html for avoiding file duplication. But in this situation, I can't use PHP.
This is the head section of index.html file,
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
The body section I have called my header.html as follows,
<body>
<!-- include Header -->
<div id="header"></div>
<!-- end include header -->
</body>
The header is including fine but after the header included the dropdown lists become unclickable.
When I go to inspect elements there are following errors,
One possible reason for your problem would be that if you already have <html><head><body> tags in all header.html, footer.html and your master page. When you import those sub pages in your master page all those tags will come along with contents. If its true delete those tags from your sub pages because your master page should only have one of specific tags
1) Remove the following tags from header.html and footer.html
<html>
<head>
</head>
<body>
</body>
</html>
2) Regarding Slick error please make sure you are not calling the init twice, best way would be
$('.selector').slick();
$(document).ready(function() {
$.get("header.html", function(response){
$('#header').html(response);
});
})
<?php include_once('header.html');?>
<div id="header"></div>
<?php include_once('footer.html');?>

HTML code in Body

Hello everyone i need some help:
I have this:
A) Login.html
B) Documentation.html
C) Base.html
In the login i have a form with User and Password.
In Documentation, i have all the links to folders i include for exaple (Jquery,Bootraps, and more).
In Base I have a part of code what i need for include in all pages. The code i have is:
<div id="loading">
<div id="loading-msg" >
<img src="img/spin.png" class="rotating">
</div>
</div>
This is for do a logo rotating when a post it's waiting a answer from the server. With this (It's in Documentation.html):
<script type="">
$(document).ajaxStart(function(){
$("#loading").fadeIn( 500 );
});
$(document).ajaxStop(function(){
$("#loading").fadeOut( 100 );
});
</script>
Finally, my question it's: How i include the code in "Base.html" in "Login.html", because when i use: <link href="../incluye/base.html" rel="import"> on Head, not works
There may be a typo in your html import - instead of incluye perhaps it should be include.
You can also use the load() function in jQuery to include the file as follows:
<script type="text/javascript">
$(function(){
$("#target").load("Base.html");
});
</script>
Where #target is the id of the element into which you wish to load the content.
You can also change the file extension to PHP and easily include the other files by using <?PHP include 'yourfilename.php(extension)'

Meteor - Ckeditor Integration

I'm not sure if there has been a change in the way Meteor loads items, or the way it handles jquery, but I'm having an awful lot of trouble getting ckeditor to come up.
Main Template (Iron-router):
<template name="layout">
<head>
<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="js/ckeditor/adapters/jquery.js"></script>
</head>
.....
</template>
Independent Editor Template:
<template name="editor">
<div class="editor_container">
<textarea class="editor"></textarea>
</div>
</template>
Ckeditor located at public/js/ckeditor, any time I try to do the Template.editor.rendered() technique, or even just trying to type $('.editor').ckeditor(); into the console, I get an error of:
$('.editor').ckeditor();
VM48825:2 Uncaught TypeError: undefined is not a function
Any ideas?
Try taking the <head> section out of the layout template. Reading here I believe the <head> section is treated specially be meteor (see: http://docs.meteor.com/#/full/structuringyourapp) and that it being inside a template may be causing the JS to actually not be loaded. Just a guess though.
<head>
<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="js/ckeditor/adapters/jquery.js"></script>
</head>
<template name="layout">
.....
</template>
You can use IRLibLoader from iron:router into the onBeforeAction like this.
Router.route('/editor', {
name: 'editor',
template: 'layout',
onBeforeAction: function () {
var ckEditor = IRLibLoader.load('/js/ckeditor/ckeditor.js');
var adapter = IRLibLoader.load('/js/ckeditor/adapters/jquery.js');
if(ckEditor.ready() && adapter.ready()){
console.log('The 2 JS just finish load');
this.next(); // Render the editor page
if(Meteor.isClient){
Template.editor.rendered = function(){
$('.editor').ckeditor();
console.log("loading coeditor when template fully rendered");
}
}
}
}
});
Alternative on the main layout you can use this.
<head>
<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="js/ckeditor/adapters/jquery.js"></script>
</head>
<template name="layout">
{{> yield}}
</template>
<template name="editor">
<div class="editor_container">
<textarea class="editor"></textarea>
</div>
</template>
And do the same rendered function
Template.editor.rendered = function(){
$('.editor').ckeditor();
//or make a little delay (1sec)
Meteor.setTiemout(function(){
$('.editor').ckeditor();
},100)
}
There are several problems with your code :
You can't put <head> sections inside another template, it must be done outside all templates.
The path to your JS files are broken, you must prepend a slash to them to reference files in the public directory.
Loading scripts in <head> sections is not a good idea because they will be loaded when your app first loads for every user, even if they never use the editor.
Here is a solution where we load every scripts asynchronously using jQuery promises when the editor template is rendered, and only then initialize the CKEditor.
Template.editor.rendered=function(){
var template=this;
$.when(
$.getScript("/js/ckeditor/ckeditor.js"),
$.getScript("/js/ckeditor/adapters/jquery.js")
).done(function(){
template.$(".editor").ckeditor();
});
};

Categories

Resources