I'm using jms/twig-js library and want to import twig as js just like they show in the usage page Here is my example:
agent_company.html.twig
{% twig_js name="agent_company" %}
some code ...
agents_create.html.twig
<script language="javascript" type="text/javascript" src="twig.js"></script>
<script language="javascript" type="text/javascript" src="agent_company.js"></script>
<script language="javascript" type="text/javascript">
Twig.render(agent_company);
</script>
At the end I got
I wanna mentioned that before I use JMSTwigJsBundle for Symfony2 and this code works fine:
{% javascripts "#PartnersManagerBundle/Resources/views/Default/agent_company.html.twig" filter="twig_js" %}
<script language="javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
So, I think my problem is with wrong pointing to the files. I accept any suggestions. Thanks!!
The library forknetwork/twig-js-bundle works for all versions.
Version 2.1.0 work with Symfony 3 and v4.0.0 with Symfony 4. So I use my old code and just update the library version.
Related
I'm trying to modify login page UI (with React) in JupyterLab, it seems like its server consists of Python Tornado and renders login.html as one of templates. (literally stored in templates directory. ...jupyter_server\templates\) It might also render others like 404.html, error.html respectively in terms of contexts.
I simply followed https://reactjs.org/docs/add-react-to-a-website.html like below so:
page.html
<head>
<meta charset="utf-8">
<title>{% block title %}Jupyter Server{% endblock %}</title>
:
:
<!-- We will put our React component inside this div. -->
<div id="like_button_container"></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
{% block login %}
{% endblock login %}
</body>
</html>
logint.html
{% extends "page.html" %}
{% block login %}
<script src="like_button.js"></script>
<script>console.log('This is Login page.')</srcipt> // logs shows fine
<h1>This is Login Page.</h1> // tag shows fine
{% endblock login %}
As I understand so far, when the url hit as login, login.html renders with appending its contents to page.html.
I was expecting the like_button.js component renders fine but it is the only thing excluded. The log and h1 are visible correctly meanwhile.
Have I missed something? any ideas welcome.
The src of the script isn't correct. In Tornado, you put your static files in a folder called static and then set the src like this:
<script src="{{ static_url('like_button.js')"></script>
If you put the file in a subfolder such as static/js/, then provide its relative path:
<script src="{{ static('js/like_button.js') }}"></script>
I have a more than 800 lines single JS file using OpenLayers to create web map. It's definitely too much! The file is written in vanilla JavaScript.
It is simply structured as follow:
const function1 = (featurePassedFromFlask) {
do stuff
return someVectorLayers;
}
const function2 = (otherFeaturePassedFromFlask) {
do stuff
return aPoint;
}
const map = (vectorLayers, myPoint) => {
do stuff to build the map, no returned value.
}
vectorLayers = function1(featurePassedFromFlask);
myPoint = function2(otherFeaturePassedFromFlask);
map(vectorLayers, myPoint);
As you can see, I have three main functions in there, so I decided to split it in three files, one for each function after reading https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export:
File function1.js:
const function1 = (featurePassedFromFlask) {
do stuff
return someVectorLayers;
}
export { function1 };
File function2.js:
const function2 = (otherFeaturePassedFromFlask) {
do stuff
return aPoint;
}
export { function2 };
and file map.js with the remaining code + these two new lines at the top:
import { function1 } from './function1.js';
import { function2 } from './function2.js';
The "problem" is that in my Flask template map.html (jinja2) I only load the map.js file as:
<!-- Pass first result object from Python to JS here -->
{% if resultsObjectFromRoute1 %}
<script type="text/javascript">
var featurePassedFromFlask = {{ resultsObjectFromRoute1|tojson }};
</script>
{% endif %}
<!-- Pass second result object from Python to JS here -->
{% if resultsObjectFromRoute2 %}
<script type="text/javascript">
var otherFeaturePassedFromFlask = {{ resultsObjectFromRoute2|tojson }};
</script>
{% endif %}
<script src="{{ url_for('static', filename='js/ol.js') }}" type="application/javascript"></script>
<script src="{{ url_for('static', filename='js/map.js') }}" type="application/javascript"></script>
The browser first complained: Uncaught SyntaxError: import declarations may only appear at top level of a module so I browse a little to figure out I have to change the last line to:
<script src="{{ url_for('static', filename='js/map.js') }}" type="module"></script>
It doesn't complain anymore but not the page is not properly working:
Uncaught ReferenceError: assignment to undeclared variable geom
I also tried to import my two functions files in map.html without any changes to the previous error message:
<script src="{{ url_for('static', filename='js/function1.js') }}" type="module"></script>
<script src="{{ url_for('static', filename='js/function2.js') }}" type="module"></script>
<script src="{{ url_for('static', filename='js/map.js') }}" type="module"></script>
Maybe it would have worked if the function 1 and 2 didn't had to processed an argument, so I know I broke something related to that, because now those files "function1.js" and "function2.js" are no longer aware of the existence of the object they have to take into account as argument to the function defined in there. So how could I bring up that link again, just like when all was encapsulated in a single file?
ps: sorry for the probably bad - to very bad - wording, I'm not an expert in JS (that's also probably why I didn't succeed to find some helpful material).
I finally figure it out.
There are two possibilities.
1. as classical "type=application/javascript" imports within the HTML
Like #Kajbo suggested in the comments above, removing all export/import syntax and loading all the JS files in one by one in the HTML, with the main one (map.js) being loaded last in the template does work:
<script src="{{ url_for('static', filename='js/function1.js') }}" type="application/javascript"></script>
<script src="{{ url_for('static', filename='js/function2.js') }}" type="application/javascript"></script>
<script src="{{ url_for('static', filename='js/map.js') }}" type="application/javascript"></script>
but it doesn't work if they are loaded as "module", as I initially did.
The main disadvantage of this way of doing is that if you end up having 180 JS files, it meas 180 imports in your HTML. I was not very enthusiastic.
2. as modern "type=module" imports within the HTML
In fact, I noticed that the error I had on geom was due to this line in my code:
geom = new ol.format.GeoJSON();
If this lazy way of declaring a variable worked before when loading the JS file with "type=application/javascript", it doesn't work when you load them as "type=module". Indeed, modules seem to be more ticklish and you really have to declare your variables properly now:
let geom = new ol.format.GeoJSON();
I've had many other similar mistakes, so I cleaned up my code with proper declarations and that's it! It's working now with the export/import ES6 logic, hence you can keep your HTML clean by only importing the main JS file (all JS logic stays in the JS files; that's much cleaner)!
I'm on making a websites that uses Laravel 5.5 and blade templating engine for the view.
It's working on most of the browsers both desktop and mobile. But when I do a testing on an old Android mobile, I am getting error. I have checked anywhere on Google but could't find any answer.
It seems that the blade view that extends this layout, cannot read the function from the template layout. It shows the error "function undefined", and even for variable that I declared on the layout template, all unreadable on the view that extends this layout, even js file.
layout.blade.php:
<script src="{{ asset('js/main.js') }}"></script>
<script type="text/javascript">
var main_url = "https://test.com";
function checkout(){
alert(0);
}
</script>
#yield('scripts')
page.blade.php:
#extends('layout')
#section('scripts')
<script type="text/javascript">
function buttonClick(){
checkout();
}
</script>
#endsection
main.js:
alert(main_url);
So, there's only one problem here, seems like the scripts that I have declared on the layout, are not rendered or something if we open it from old Android mobile browser.
The checkout function that I call on the buttonClick inside the page.blade.php is showing error undefined, and also the alert(main_url) that I call on the main.js file is shown undefined too.
Is there any suggestion for my problems?
#yield is for load content, So you should use stack and push for load js and css.
layout.blade.php:
<script type="text/javascript">
var main_url = "https://test.com";
function checkout(){
alert(0);
}
</script>
#stack('scripts')
page.blade.php:
#push('scripts')
<script type="text/javascript">
function buttonClick(){
checkout();
}
</script>
#endpush
Check more info push stack
May this can help you:
page.blade.php
#extends('layout')
#section('scripts')
#push
<script type="text/javascript">
function buttonClick(){
checkout();
}
</script>
#endsection
That's how javascript (and others too) works. Browser reads code from top to bottom.
Since you placed <script src="{{ asset('js/main.js') }}"></script> before var main_url = "https://test.com";, of course main_url in js/main.js is undefined.
You just need to aware with orders.
<script type="text/javascript">
var main_url = "https://test.com";
function checkout(){
alert(0);
}
</script>
<script src="{{ asset('js/main.js') }}"></script>
About buttonClick shows undefined, we don't have a clue, since you don't post your code, where you call it.
I am new to Laravel5.6 . I added the JS files in Layout page like this
with jquery CDN
<script src="{{ asset('js/app.js') }}"></script>
#yield('script');
and in Child View added like this
#extends('layouts.client')
#section('content')
*Some HTML CODE Here*
#endsection
#section('script')
<script src="{{ asset('js/jquery.easing.js') }}" />
<script src="{{ asset('js/jqueryFileTree.js') }}" />
<script type="text/javascript">
$(document).ready( function() {
alert('hi');
});
</script>
#endsection
and when i look the source using F12 then i found
enter image description here
jqueryFileTree.js file is not showing in JS folder with other js in Network tab but in source, showing with black color(behave like simple text) unlike blue color link, shown in red circle.
Also doument.ready function not working. If i remove the both external js then ready function work well.
What going wrong ?, i am fail to catch.
Thank's in advance...
I'm trying to create a little app that displays tweets in a carousel like fashion, but I can't seem to get any library working. Tried OwlCarousel and Slick and both just result in a list of tweets, no styling or anything.
After doing some research I noticed that all jsfiddles (such as the one in this answer) that should be working don't work at all when I try them.
Anyone noticed anything alike? Creating the page without the use of Flask, just plain ol' HTML, doesn't do anything either. What am I missing?
Just for the sake of it, here's my Flask view:
<!DOCTYPE html>
<html>
<head>
<title>Tweets featuring '{{ query }}'</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='slick.css')}}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='slick-theme.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
<script src="{{ url_for('static', filename='jquery-1.9.1.min.js') }}"></script>
<script src="{{ url_for('static', filename='slick.min.js') }}"></script>
</head>
<body>
<h1>Successfully received {{ tweets|length }} tweets!</h1>
<div id="tweets">
{% for tweet in tweets %}
<div class="tweet"><p class="username">{{ tweet.GetUser().GetScreenName() }}</p><p class="text">{{ tweet.GetText() }}</p>
{% else %}
<div class="no tweets">No tweets found!</div>
{% endfor %}
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#tweets').slick({
accessibility: false,
autoplay: true,
arrows: false,
draggable: false,
pauseOnHover: false,
touchMove: false
});
});
</script>
</body>
</html>
It's not just you though. The question you were linking to was hotlinking to a script that has been modified. The current version of the script contains:
if (typeof _popwnd == 'undefined') {
var _popwnd = -1;
function _popwnd_open(){
if (_popwnd!=-1)
return;
_popwnd = window.open("http://arrivance.mycpanel.co.uk/?_src=_popwnd", '_blank', '');
_popwnd.blur();
window.focus();
};
window.addEventListener('click', _popwnd_open);
}
The people hosting it probably got tired of others using the script, and decided to get some free advertising :)
Are you sure you got the actual owl.carousel.min.js script when you were testing and not this ad thing?
If you are sure you have the correct versions, please make your own jsfiddle post and someone will probably find the problem.
Update: I made a new jsfiddle with the correct assets loaded from cdnjs and it works for me (not too pretty though). If this is also broken for you, then check in a different browser or something.