We Keep Coding

Where to add Javascritp/JQuery in laravel 7?

I am new to laravel. I have setup a project with Vue and tried to add jquery code in one of the blade page but I am seeing following error in console. Jquery is working fine but the error in console tells that I am not doing it the right way.
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.
331|
332|
333|
| ^^^^^^^^
334| function refresh(value)
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
335| {
| ^^^^^^^^^
336| location.replace('jiras?status='+value);
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
337| }
Can anyone help me that where should I add jquery/javascript code so that it doesn't show any error in the console.

#extends('layout.app')
#section('content')
<your-vue-component></your-vue-component>
#endsection
and inside layout/app.blade.php you can put jquery. Probably above the app.js file

Thank you for your answer Daud.
I created a jquery.js file and added my code inside it. I put this file under public/js/ directory and add the path of it inside app.blade.php file as follows:
<script src="{{ asset('js/jquery.js') }}" defer></script>
The jquery worked fine console error is also gone. Thank you for your help.

How to add external Javascript in gatsby?

I want to know how to add external javascript file to gatsby, where should i put
these tag in which file ? And also how to import the file properly to the DOM.
Thanks

You can add this part of code in you gatsby-ssr.js, this add code in your balise .
export const onRenderBody = ({ setHeadComponents }) => {
setHeadComponents([
<link
rel="stylesheet"
href="/style.css"
/>
])
}
You Have the same for the body
export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
setHeadComponents([
<link
rel="stylesheet"
href="/style.css"
/>
]),
setPostBodyComponents([
<script></script>,
]),
}

You can choose any one way as follows:
a. Use Plugin
You can use gatsby-plugins to add external scripts such as Google Tracking Code, Google Tag Manager, Hubspot code, etc.
In order to use gatsby plugin on your website, search for the plugin in gatsby org website https://www.gatsbyjs.org/plugins/ and follow the steps to add it in your site.
b. Use gatsby-ssr.js
Suppose you want to add scripts or a list of scripts but there is no plugin in gatsbyjs. Still, you can add external scripts.
For it, you need to use gatsby SSR API https://www.gatsbyjs.org/docs/ssr-apis/.

You can always use html.js to add HTML tags, but better use npm packages to add the libs.
Here are the docs on how to do it with html.js:
https://www.gatsbyjs.org/docs/custom-html/

Add external CSS and JS links to a component in Angular 2

In order to use "Bootstrap Select" only in my.component.ts, I tried use this:
#Component({
templateUrl: 'my.component.html',
styleUrls: [
'my.component.css',
//Bootstrap Select
'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css'
]
})
I got this error :
Can't resolve './https://cdnjs.cloudflare.com/...' in 'C:.....\app\components'
It seems that angular 2 search for bootstrap in my folder. So can I tell him that it is an external URL?
I am also need to add my js link:
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

From angular styles documentation.
Style URLs in metadata
You can load styles from external CSS files by adding a styleUrls
attribute into a component's #Component decorator:
#Component({
selector: 'hero-details',
template: `
<h2>{{hero.name}}</h2>
<hero-team [hero]=hero></hero-team>
<ng-content></ng-content>
`,
styleUrls: ['app/hero-details.component.css']
})
export class HeroDetailsComponent {
/* . . . */
}
The URL is relative to the application root, which is usually the location of the index.html web page that hosts the application. The
style file URL is not relative to the component file. That's why the
example URL begins src/app/. To specify a URL relative to the
component file, see Appendix 2.
You can also embed tags into the component's HTML template.
As with styleUrls, the link tag's href URL is relative to the
application root, not the component file.
#Component({
selector: 'hero-team',
template: `
<link rel="stylesheet" href="app/hero-team.component.css">
<h3>Team</h3>
<ul>
<li *ngFor="let member of hero.team">
{{member}}
</li>
</ul>`
})
CSS #imports
You can also import CSS files into the CSS files using the standard
CSS #import rule. For details, see #import on the MDN site.
In this case, the URL is relative to the CSS file into which you're
importing.
#import 'hero-details-box.css';
Now. For one of your purposes you could need to change encapsulation. It is the topic here. Load external css style into Angular 2 Component Give a look. It solves you for adding an external CDN but I wanted to give full info and why is it needed. To ensure you it is the only that solves your scenario.
Also, other suggestions there up resolves you for adding script tag. I suggest just add it to your component template, as you should do directly in the html what is yet specific of your component.

You have to give it a relative path to your file.
starting with "./ here goes the path to your css file /my.component.css"
And for the second css file thats being called. That one goes into your index.html file like so:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">

Angular 2.x change <title> in head (outside my app)

I think it should be easy but I cannot find how.
I have something like
<html>
<head>
<title>{{'a' + 'b'}}</title>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
It seems like I cannot access anything outside my-app.
In angular 1.x it was easy, I was able to add ng-app on any element (<html ng-app="myApp">).
Now I think I'm able only bootstrap in body.
I know I can manually bootstrap somehow (didn't try yet), but dynamically change title in single page applications should be super-easy, shouldn't it?

Angular2 can't be bootstrapped to entire html. But you can use Title Service.
A service that can be used to get and set the title of a current HTML document.
It has 2 methods:
getTitle()
setTitle()
Don't forget to check the dependency injection section out to see how you can use the services.
EDIT:
As of the release (2.0.0), this is how you can do it:
import { Title } from '#angular/platform-browser';
export class SomeComponent {
constructor(title: Title) {
// title.getTitle();
// title.setTitle('new title');
}
}
And the docs for the Title service are now here: https://angular.io/docs/ts/latest/api/platform-browser/index/Title-class.html

linking css files in php

I am new to php and i am working on a project i am facing some problems with linking css and js files.
Now when the project is executed,First index.php loads (located in root directory) which includes home.php and everything in it is executed correctly.
But as soon as you click on 'about' link on the 'home page' ,the page is redirected to about.php( which is located inside Presentation/about.php )here the css and js linking fails.......
On execution of index.php it takes css link successfully (the link is as follows)
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
but later when the page is redirected to about.php it expects the link to be
<link href="../css/bootstrap-theme.min.css" rel="stylesheet">
and i am using a common file for these links, i kept all links in header.php(located in Presentation/Template/header.php)
I have also defined all paths in config.php(located in inc/config.php)
i have defined the path in config.php as follows
// SITE_ROOT contains the full path to the RichTongue folder
define('SITE_ROOT', dirname(dirname(__FILE__)));
// Application directories
define('PRESENTATION_DIR', SITE_ROOT . '/Presentation/');
define('TEMPLATE_DIR', PRESENTATION_DIR.'Template/');
define('BUSINESS_DIR', SITE_ROOT . '/Business/');
define('CSS_DIR', SITE_ROOT. '/css/');
define('FONT_DIR', SITE_ROOT . '/fonts/');
define('IMAGE', SITE_ROOT . '/images/');
define('JS', SITE_ROOT . '/js/');
so i tried linking css in the following way
<link href="<?php echo CSS_DIR ?>bootstrap.min.css" rel="stylesheet" >
now the above code gives me an error in chrome which says
Not allowed to load local resource: file:///C:/xampp/htdocs/RichTongue/css/bootstrap.min.css
home.php:13
now the path in the error above(file:///C:/xampp/htdocs/RichTongue/css/bootstrap.min.css) is correct but it doesnt load the file and gives the error (error specified above)
Q)What should i do? what is the correct way of linking css and js files in php?
need help

set URl path for SITE_ROOT
if ur project path is C:/xampp/htdocs/RichTongue/css/bootstrap.min.css
so change with below line
define('SITE_ROOT', 'http://localhost/RichTongue');

Link your css and other ressources with an absolute path seems to be the easy solution for you.
Absolute path is from the root dir of your website : C:/xampp/htdocs/RichTongue
instead of file:///C:/xampp/htdocs/RichTongue/css/bootstrap.min.css you can use /css/bootstrap.min.css
so you have to modify
define('CSS_DIR', SITE_ROOT. '/css/');
to
define('CSS_DIR', '/css/');
same for other ressources (js, font, etc.)
Exemple result :
<link href="/css/bootstrap-theme.min.css" rel="stylesheet">

Say if you have a folder called css you can use real path like this:
define('CSS_DIR', realpath(dirname(__FILE__).'/css'));
Then you would use that constant path like this:
echo CSS_DIR."/style.css";

Try to use it like that way:
$SITE_FOLDER_NAME = "demo/";
define('SITEURL', 'http://'.$_SERVER['SERVER_NAME'].'/'.$SITE_FOLDER_NAME);
define('SITEURL_CSS', SITEURL.'css/');

./assets/CSS/filename.css
Did the job for me.