I tried to put this in public index.html:
<script type='text/javascript'
src='https://platform-api.sharethis.com/js/sharethis.js#property=5f4e15b2e56e550012ae1e77&product=inline-share-buttons'
async='async'></script>
then I put this in the component:
<div class="sharethis-inline-share-buttons"></div>
but nothing is showing...
any help how do I make it work?
Related
Can anyone please guide me regarding how can I add custom javascript in Laravel project?
I did google and found some steps but unable to figure out what the error is going on?
Steps I
Created a custom.js in my public folder with a simple function
add script tag in my app.blade.php
extends my layout
But the function is not working
$(document).ready(function()
{
alert("hello this is test");
})
custom.js
enter code here
<script type="text/javascrip" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>"
<script type="text/javascript" src="{{asset('js/custom.js')}}"></script>
code I added in my main file app.blade
but when load my page it doesn't give me an alert. Alert is just for testing I tried with various function.
You misspelled javascript
Remove the (") after writing the </script>
For Javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="{{ URL::asset('js/custom.js') }}"></script>
Make your directory structure is like this for JS: /public/js/custom.js
I have to review your code. I have found an error in your code like a spelling mistake.
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>"
You have miss t at the end of javascript.
When I'm editing the below example HTML page in Visual Studio Code (borrowed from Facebook's React tutorial and slightly edited), if I write any Javascript code in the script block, it is not syntax highlighted. But if I change the script block type to "text/javascript" then the syntax highlighting works. But then any React-y/JSX code doesn't work as it is wired to work through Babel.
Is there any way to have the script tag "type" attribute set to "text/babel" and at the same time have proper syntax highlighting in Visual Studio Code?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Tutorial</title>
<script src="https://npmcdn.com/react#15.3.0/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom#15.3.0/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core#5.8.38/browser.min.js"></script>
<script src="https://npmcdn.com/jquery#3.1.0/dist/jquery.min.js"></script>
<script src="https://npmcdn.com/remarkable#1.6.2/dist/remarkable.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
ReactDOM.render(
<div>Hello world!</div>,
document.getElementById('content')
);
</script>
</body>
</html>
I found a solution to this now.
Open up: (VS code home dir)\resources\app\extensions\html\syntaxes\html.json, and edit the regex for the script tag. That fixed the issue for me.
Well this is a workaround, probably will be better to change this in a post build process, but I found an easy way to do it with this new feature TagHelpers which will help to replace the javascript value by babel
So add a file TagHelpers/ScriptTagHelper.cs
[HtmlTargetElement("script", Attributes = "to_babel")]
public class ScriptTagHelper : TagHelper
{
public override void Process(TagHelperContext context, TagHelperOutput output)
{
output.Attributes.SetAttribute("type", "text/babel");
}
}
In your page Index.cshtml
<script type="text/javascript" to_babel>
And dont forget to import TagHelpers in _ViewImports.cshtml or in your Index.cshtml
#using app1
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#addTagHelper *, app1
And voila! this render as babel.
I'm using Angular 2 to build my web application. When I try to put a tooltip or popover on an image or button, I get the default-looking tooltip instead of the bootstrap one.
I've tried the basic W3Schools examples and did everything as shown, yet it doesn't work.
I believe my problem lies with the correct imports of the bootstrap.js or jQuery, but other bootstrap items like buttons etc. do work properly.
(I use nodejs to install the necessary files/dependencies -> npm install npm install bootstrap npm install jquery)
index.html
<html>
<head>
<base href="/"><!--Without this tag, the browser may not be be able to load resources (images, css, scripts) when "deep linking" into the app. Bad things could happen when someone pastes an application link into the browser's address bar or clicks such a link in an email link. -->
<title>Factory</title>
<link type="text/css" rel="stylesheet" href="/css/styles.css">
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="/node_modules/angular2/bundles/http.dev.js"></script>
<!--<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>-->
<!--<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>-->
<!--<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />-->
<!-- stackoverflow suggested settings -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app></my-app>
</body>
</html>
page-with-tooltip(.ts)
import {Component} from "angular2/core";
import ... from ...;
import ... from ...;
...
#Component({
template: `
<div *ngIf="hall" class="container">
<h2>Detail van hal <small>{{hall.name}}</small></h2>
Hover over me
<div class="container">
<div class="hall-box-single">
<div class="hall-box"
[style.width]="hall.areaWidth*4"
[style.height]="hall.areaHeight*4">
<div class="image-container">
<div *ngFor="#item of hall.items">
<a data-toggle="tooltip" title="Popover title">
<img [src]="item.image"
[style.left]="item.posX"
[style.top]="item.posY"/>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
`})
export class HallDetailComponent implements OnInit {
...
constructor(...) {
...
}
ngOnInit() {
...
(<any>$('[data-toggle="tooltip"]')).tooltip();
$('[data-toggle="tooltip"]').tooltip();
}
}
!Edit!
Added suggestions from users as well as an extract of the running webpage source.
The script tag you wrote in your template is getting ignored, run your JS code from inside the component instead, I suggest you to run it in the ngOnInit() method since you are implementing the OnInit interface.
This should work:
#Component({
selector: 'app',
template: `
Hover over me
`
})
export class AppComponent{
ngAfterViewInit(){
$('[data-toggle="tooltip"]').tooltip();
}
}
using:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
So specific to your project:
You have three options to fix it:
One is to set a nasty timeout so it initiates the tooltips until you get a response back from the server and they have actually rendered.
The second is to find some method like the ones we try that gets executed everytime the dom changes, not just the first time.
The third and best but a bit more complicated is by implementing a method that gets executed before the page starts rendering, and if you return a promise in that method, the page will wait for the Promise to get done before rendering, so you can return a promise and resolve the promise until you get the answer from the service, that way the dom will be ready the first time the controller loads
I believe the last method is called CanActivate or something like that.
How do we define different javascript files for different view pages in play framework??
One way is to=>
#main(title, """
#*JS CODE*#
"""{
//Template Codes
}
And in main template, use it like=>
#(title,stringJS){
<script>
#Html(stringJS)
</script>
}
But what if the JS code is to be used in not all pages but selected few, the dev can't copy the JS code in every relative view page.In my case all the javascripts are loaded on the footer, which is a seperate template.
How do we solve this problem??
Any help is appreciated, thank you!
It's described in the Common templates use cases doc , section : 'moreScripts and moreStyles equivalents'
In very short it works like this (view)
#moreScripts = {
<script type="text/javascript">alert("hello !");</script>
}
#moreStyles = {
<style>background: pink;</style>
}
#main("Title", moreScripts, moreStyles){
Html content here ...
}
and in main.scala.html start with:
#(title: String, moreScripts: Html = Html(""), moreStyles: Html = Html(""))(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
#moreStyles
<script src="#routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
#moreScripts
</head>
<body>
#content
</body>
</html>
I came up with my solution,thanks to this Helpful SO post, what I did was:
#main(title, """
#*NO JS CODE, but declaration itself*#
<script src="/assets/javascripts/libs/main.js" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/libs/main.js")" type="text/javascript"></script>//Doing this gives out errors, so I had to hardcode the "src" location
"""{
//Template Codes
}
If there is more efficient way to solve this issue, ideas are welcome, because hard-coding src isn't an efficient way of dealing with this issue, imo.
I'm following the video tutorials on egghead.io but while trying to follow his example when he created a factory (see video here) I keep getting "angular is not defined" Reference Error but I have included the angular script
This is my html page:
<!DOCTYPE html>
<html>
<head>
<title>Prototype</title>
<link rel="stylesheet" type="text/css" href="foundation.min.css">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div data-ng-app="">
<div data-ng-controller="FirstController">
<input type="text" data-ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
<div data-ng-controller="SecondController">
<input type="text" data-ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
</div>
<script type="text/javascript" src="angular.min.js"></script>
</body>
</html>
and this is my javascript file "main.js":
//Services
// step 1 create an app
var myApp = angular.module('Data', []).
// tep 2 create factory
// Service name, function
myApp.factory('Data', function(){
return { message: "I'm Data from a Service" }
});
//Controllers
function FirstController($scope, Data){
$scope.data = Data;
}
function SecondController($scope){
}
I have read a few posts where similar happen (here) and please correct me if I'm wrong but I think it is to do with Boot strapping andI have tried manually bootstrapping using angular.bootstrap(document, ['Data']); but with no success, still get same error.
But What I want to know is, Why this works for so many examples online, like the egghead video series, but I have issues as I believe I have followed his video very closely. is it a change in angular in recent versions?
You have to put your script tag after the one that references Angular. Move it out of the head:
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
The way you've set it up now, your script runs before Angular is loaded on the page.
You have not placed the script tags for angular js
you can do so by using cdn or downloading the angularjs for your project and then referencing it
after this you have to add your own java script in your case main.js
that should do
I had the same problem as deke. I forgot to include the most important script: angular.js :)
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>