So far I have tried adding the cdn like this which does not work:
#app.route('/')
def home():
cdn = 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"'
return render_template('index.html', cdn = cdn)
Here what I want to do is write the js code in html using gsap cdn, however it's not working at all.
index.html:
<head>
<link src="{{ cdn }}" />
rest of the code..
</head>
<body>
<script>
import { gsap, interpolate } from "gsap";
import {ScrollTrigger} from 'gsap/ScrollTrigger';
rest of the code..
</script>
</body>
Related
I want to implement this into my Next.js App
https://codepen.io/Lemonzillah/pen/rmQLRm
I tried to add both libraries needed for this to work in the _document.js file and then link the js code in text-slider from /public
<Main />
<NextScript />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="public/text-Slider.js"></script>
But it ain't working, somehow - it doesn't show any error. It's just now working - hope you can help me!
First of all. It is recommended to not use jquery in react or next js app.
Then if you want to use jquery in next js app you can use next docuemnt..
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head>
**Here you can use custom css link or font link like bootstrap cdn
</Head>
<body>
<Main />
<NextScript />
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="public/text-Slider.js"></script>
</Html>
)
}
}
export default MyDocument
You can use now slick by calling slick slider cdns link in script and css. Ans use them. It is recommend to use React slick in next js app
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?
I'm currently trying to put together a little Flask + React project. I have had some difficulty getting the js file (which contains the react code) to run at all in the project.
This is my project structure, standard for flask:
The route is defined in the routes.py file in the project root
from flask import Flask, render_template, request
app = Flask(__name__)
#app.route("/qubits")
def qubits():
return render_template('qubits.html')
# http://localhost:5000/qubits
if __name__ == "__main__":
app.run(debug=True)
I have my simple html file, which is linking properly to my css (im able to pull in css elements fine).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>nstem</title>
<link rel= "stylesheet" href= "{{ url_for('static',filename='css/nstem.css') }}">
</head>
<body>
<div class="indexBox1"></div>
<h1>: )</h1>
<script type="text/javascript"
src="{{ url_for('static', filename='js/index.js') }}"></script>
</div>
</body>
</html>
However, nothing is being returned on the webpage from these two js files:
*index.js*
import React from 'react';
import ReactDOM from 'react-dom';
import './nstem.css';
import Qubit from './qubits';
ReactDOM.render(
<Qubit />,
document.getElementById('root')
);
* function file *
import React from 'react';
import ReactDOM from 'react';
function Qubit() {
const section = 'lists';
return (
<div>Allah'u'abha</div>
);
}
export default Qubit;
Im pretty stumped; ive played with this so much today and cant figure out where the gap is. Please help, and thanks so much.
I could not output the data created in Flask to JQuery in a Html page.
I am testing $.get() method in JQuery with Flask. The task is to return a String to a Html page and display it as paragraph. But the result cannot be displayed. Can someone shed a light on this issue. Thanks!
Here is the code in Flask
from flask import request, jsonify, Flask
app = Flask(__name__)
#app.route('/', methods=["GET"])
#app.route('/hello', methods=["GET"])
def hello():
return jsonify('<h1>Hello Flask !!!</h1>')
Here is the html code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Events </title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function()
{
$("#btnGet").click(function()
{
//$.get('https://httpbin.org/get',
$.get('http://localhost:5000/hello',
function(data)
{
$("#getInfo").text(data)
});
});
});
</script>
</head>
<body>
<button id="btnGet">Click to Get Info </button>
<p id="getInfo"></p>
</body>
</html>
As new to web programming, after hours trial and error, finally found out that I am not placing the html under static folder and run it in Eclipse Environment. After open it up in http://localhost:5000/static/test.html then it works as expected.
I've read multiple posts that static files have to be in the /static/ folder and routed to with url_to in the html template. But it's not working. The entire site renders and loads with localhost, but externally viewed it only loads text, no css or js.
Console says 404: http://exmaple.com/static/scripts/my_app.js
Same applies for any images and css.
/home/me/my_app/web_dynamic/my_app.py
from flask import Flask, render_template, url_for
from models import storage
import uuid
app = Flask(__name__)
app.url_map.strict_slashes = False
port = 5000
host = '0.0.0.0'
#app.route('/', strict_slashes=False)
#app.route('/my_app/', strict_slashes=False)
def filters(the_id=None):
state_objs = storage.all('State').values()
states = dict([state.name, state] for state in state_objs)
places = storage.all('Place').values()
cache_id = uuid.uuid4()
return render_template('my_app.html',
states=states,
places=places,
cache_id=cache_id)
if __name__ == "__main__":
app.run(host=host, port=port)
/home/me/my_app/web_dynamic/temaplates/my_app.html
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename='scripts/myscript.js') }}"></script>
</head>
<body>
<! --- HTML and JINJA HERE -->
</body>
</html>