I am playing around with Laravel last version, trying to import and use JS files on the front-end. I have them stored in my folder 'public/js/'.
I have this Blade template you can see below, pizza.blade.php. If you inspect the page source, you can clearly see the JS files are existing, since their links, which are regularly working, are "http://localhost:8000/storage/...".
Nevertheless, they are not working inside the document and, inspecting the network tab, I can see they are not imported.
The image, pizza.png, located in 'public/storage' is displaying correctly.
What am i doing wrong?
Also, is there a better practice to use JS files, such as mix or npm? Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script>src="{{asset('/js/jquery-3.3.1.js')}}"</script>
<script>src="{{ asset('/js/test.js') }}"</script>
<title>Document</title>
</head>
<body>
<h1 class="ciao">PIZZA LOGO</h1>
<div>
<img src="http://localhost:8000/storage/pizza.png" alt="">
</div>
</body>
<script>
$(document).ready(function () {
$(".ciao").css('display', 'none');
});
</script>
</html>
You have this error
<script>src="{{asset('/js/jquery-3.3.1.js')}}"</script>
this is just script with single javascript variable and string inside. You need this:
<script src="{{asset('/js/jquery-3.3.1.js')}}"></script>
this is html script tag with src attribute.
Related
How can I create a to do list with just javascript? I have a html file with only 1 div and have to do this with just javascript?
example
This is my html file...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To do App</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
The rule is that I can't add more html tags
Please help!!!
Well, you have to add more tags.
You don't have to write those tags into your HTML file, you can create elements using JS.
Components that you can create in JS
Search Bar
Todo Item
Button
After writing these components you can plug and play your logic.
When I make a JS file and run it in Terminal it successfully runs .
code:
function add(x,y){
var sum = x+y;
console.log(sum);
}
add(15,5);
this code gives me correct answer, but when I create an HTML file and link it with the same Javascript file and trying to run it in terminal a pop-up massage says "code language not supported or defined"
html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="indaxi.js"></script>
</head>
<body>
</body>
</html>
so , why is that ..?
You will need to make sure that your file is referenced correctly. Here it is expected to be in the same folder as the HTML file that you have. As about the language, you can specify it as
<script type="text/javascript" src="indaxi.js"></script>
I have a very simple directory structure with an index.html file and a main.js file at the same level and no other files/folders. But I'm unable to link this js file in my index.html.
I have posted the contents of both files below, and the expected behaviour is to have a simple alert pop-up.
Here is my HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript" scr="main.js"></script>
<title>External JS Issue</title>
</head>
<body>
Some Content Here.
</body>
</html>
Here is my JS File:
alert("If you can read this, it worked!");
However, if I include this JS line of code and put it directly inside my index.html, it works fine.
Here are the screenshots:
index.html:
main.js:
Browser Screenshot with External JS(NOT Working):
index.html with inline JS:
Browser Screenshot with Inline JS(Working):
You have a typo, the attribute of the <script> tag should be src, not scr.
Zoho CRM has something called Widgets to extend it's functionality. Using the widgets feature, you can directly embed UI components in a CRM and use the data form a third-party application to perform actions as per requirement.
A widget is basically an HTML file which is loaded in a popup once a custom button is fired. To store/retrieve data from Zoho CRM you need to load jQuery and their JS SDK in the HTML file.
The most basic HTML file looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://live.zwidgets.com/js-sdk/1.0.5/ZohoEmbededAppSDK.min.js"></script>
<title>Document</title>
</head>
<body>
<script>
ZOHO.embeddedApp.on("PageLoad",function(data) {
console.log(data);
//Custom Business logic goes here
});
ZOHO.embeddedApp.init();
</script>
</body>
</html>
In this file console.log(data) will log information about the page on which the widget is fired. On for instants a Lead page, it will log information about that lead, like the id.
Functions to store/retrieve data need to be used where it says //Custom Business logic goes here.
The code for getting all Leads in this widget looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://live.zwidgets.com/js-sdk/1.0.5/ZohoEmbededAppSDK.min.js"></script>
<title>Document</title>
</head>
<body>
<script>
ZOHO.embeddedApp.on("PageLoad",function(data) {
ZOHO.CRM.API.getAllRecords({Entity:"Leads"})
.then(function(data){
console.log(data)
})
});
ZOHO.embeddedApp.init();
</script>
</body>
</html>
Because I need to create multiple Zoho Widgets and use the same Vue Components on every Widget I thought of using NuxtJS. I successfully create the Vue Components, but I have no clue how to incorporate Zoho's JS SDK.
Is there anybody who can give me some suggestions how to make this work? Thanks!
why not having the SDK function in a external file from your html, where you invoke all the methods from the SDK api?
simply import your SDK to the header of the html.
hey i found this solution on the github issues page that actually worked. hopfully it will help you.
under data you can define your script as a string somthing like this:
<template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div v-html="scripts"></div>
</template>
<script>
export default {
data: () => ({
scripts: "<script src='https://www.google.com/recaptcha/api.js'><\/script>"
})
}
</script>
and then just add a div tag in your page with v-html="script"
i tried it and it worked fine. but i don't feel it's the best practice. hopfully this will help you.
the source and all the discussion on github: https://github.com/nuxt/nuxt.js/issues/2000
I have a Spring boot app with a Thymeleaf template, that is supposed to load a css file and a javascript file.
The CSS file loads, but the Javascript file doesnt, it does not even try to get it from the server. There is no HTTP request for the Javascript, but the requests for the CSS are visible.
Where is my mistake?
I already tried putting the link for the javascript in the header next to the css but that made no difference.
My folder structure is as follows:
resources
-- static
---- bootstrap
------ css
---- js
Here the HTML:
<html xmlns:th="https://thymeleaf.org" lang="en" style="height: 100%;">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website Title</title>
<link rel="stylesheet" type="text/css" th:href="#{/bootstrap/css/bootstrap_custom.css}" />
</head>
<body class="d-flex flex-column h-100">
<script th:href="#{/js/main.js}" type="text/javascript"></script>
</body>
</html>
There is no error message, the tag for the javascript is simply ignored.
Your script end tag is incomplete. It should be:
<script th:src="#{/js/main.js}" type="text/javascript"></script>
The tag should read
<script th:src[...]>
instead of
<script th:href[...]>