Develop Reference

webpack encore / symfony 5 scripts loading order

I have a problem on the script loading order in symfony 5 / webpack encore.
The scripts doesn't load in the right order...
For the exemple i have made this simple test : two documents ready fonction with Jquery Version :
$(document).ready(function() {
alert($().jquery);
});
one in my app.js call in my base.html.twig (call first normally)
and another in my page.
When you run the page, the alert version in my page show first with a 'undefined version" and then the alert in app.js work correctly.
Normally app.js is call first so i don't understand why the second document ready is call first.
thanks for you help !
App.js
/*
* Welcome to your app's main JavaScript file!
*
* We recommend including the built version of this JavaScript file
* (and its CSS file) in your base layout (base.html.twig).
*/
// any CSS you import will output into a single css file (app.css in this case)
import '../css/app.css';
// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
import $ from 'jquery';
// uncomment if you have legacy code that needs global variables
// global.$ = $;
import 'bootstrap';
require('../css/global.scss');
$(document).ready(function() {
alert($().jquery);
console.log('Version')
});
Webpack config
var Encore = require('#symfony/webpack-encore');
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
// this is your *true* public path
.setPublicPath('/athena/build')
// this is now needed so that your manifest.json keys are still `build/foo.js`
// (which is a file that's used by Symfony's `asset()` function)
.setManifestKeyPrefix('build')
/*
* ENTRY CONFIG
*
* Add 1 entry for each "page" of your app
* (including one that's included on every page - e.g. "app")
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
*/
.addEntry('app', './assets/js/app.js')
//Datagrid
.addEntry('jqwidgetsDataGrid', './assets/js/jqwidgetsDataGrid.js')
//.addEntry('page2', './assets/js/page2.js')
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
// .disableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
//enables hashed filenames (e.g. app.abc123.css)
//.enableVersioning(Encore.isProduction())
.enableVersioning()
// enables #babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
// enables Sass/SCSS support
.enableSassLoader()
// Intégration des fichiers et images statiques
// .copyFiles({
// from: './assets/md',
// to: './md/[name].[ext]'
// })
.copyFiles({
from: './assets/images',
to: 'images/[path][name].[hash:8].[ext]'
})
//
// Transformation du css pour l'ensemble des navigateurs
// .enablePostCssLoader((options) => {
// options.config = {
// path: 'config/postcss.config.js'
// };
// })
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment to get integrity="..." attributes on your script & link tags
// requires WebpackEncoreBundle 1.4 or higher
//.enableIntegrityHashes(Encore.isProduction())
// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()
// uncomment if you use API Platform Admin (composer req api-admin)
//.enableReactPreset()
//.addEntry('admin', './assets/js/admin.js')
;
module.exports = Encore.getWebpackConfig();
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Athena{% endblock %}</title>
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
</head>
<body>
{# Zone menu #}
{% include("partials/navbar.html.twig") %}
{# Corps de la page #}
<div class="mx-3">
{% block body %}{% endblock %}
</div>
{# Javascript #}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
</body>
</html>
My page :
{% extends 'base.html.twig' %}
{% block stylesheets %}
{{ parent() }}
{{ encore_entry_link_tags('jqwidgetsDataGrid') }}
{% endblock %}
{% block title %}Permissions de l'application{% endblock %}
{# Ajout des Popups et modals #}
{% use 'permissions/modalform.html.twig' with global as addPerm_global %}
{% block body %}
<div class="spacer-orange rounded-top mt-3"></div>
<div class="container-fluid parker-fond-page rounded-bottom ">
<h1>Liste des Permissions</h1>
{{ dump(permissions) }}
{% for permission in permissions %}
<H2>{{ permission.Name }}</H2>
{% endfor %}
</div>
<div class="spacer-orange rounded-top mt-3"></div>
<div class="container-fluid parker-fond-page rounded-bottom ">
<div id="jqxgrid">
</div>
</div>
{# Ajout modals #}
{% set form_id = "formAjoutPerm" %}
{% set modal_id = "modalAjoutPerm" %}
{% set modal_title = "Ajout d'une permission" %}
{% set form_action = path('permissions_ajaxadd') %}
{% set namespace = "addForm" %}
{{ block('addPerm_global') }}
{% endblock %}
{% block javascripts %}
{{ parent() }}
{{ encore_entry_script_tags('jqwidgetsDataGrid') }}
<script type="text/javascript">
$(document).ready(function () {
alert($().jquery);
// show first but doesn't work ????
}); //fin documentready function
</script>
{% endblock %}

How to Embed multiple tweets of various users into HTML in django framework?

I am passing a data in the form of a dictionary from views.py to results.html in Django framework. The dictionary has the following format
'tweet': (tweet_analysis, tweet_id)
now in results.html, called by the views.py,
I am trying to Embed all the tweets that are passed to results.html, but the following code only displays one embedded tweet.
dicPositive: This is the dictionary containing all the tweets data
{% for tweet, tweet_feel in dicPositive.items %}
<div id="tweet" tweetID="{{tweet_feel.1}}"></div>
<script sync src="https://platform.twitter.com/widgets.js"></script>
<script>
window.onload = (function(){
var tweet = document.getElementById("tweet");
var id = tweet.getAttribute("tweetID");
twttr.widgets.createTweet(
id, tweet,
{
conversation : 'none', // or all
cards : 'hidden', // or visible
linkColor : '#cc0000', // default is blue
theme : 'light' // or dark
})
.then (function (el) {
el.contentDocument.querySelector(".footer").style.display = "none";
});
});
</script>
<!-- <li>{{tweet}} –> {{tweet_feel.0}} –> {{tweet_feel.1}}</li> -->
{% endfor %}

It is because you have used same id for multiple HTMLElements created while looping.
You must add loop counter to id attribute of div and also when
you are fetching it using getElementById inside script tag
{% for tweet, tweet_feel in dicPositive.items %}
<div id="tweet_{{forloop.counter}}" tweetID="{{tweet_feel.1}}"></div>
<script sync src="https://platform.twitter.com/widgets.js"></script>
<script>
window.onload = (function(){
var tweet = document.getElementById("tweet_{{forloop.counter}}");
# Rest of your code
...
</script>
{% endfor %}

How to replace string in Gulp?

I'm trying to replace the default pug tag to october cms partial. I can't replace string in file. Pug file for example:
include frames/header.pug
img(src="img/123123.jpg", alt="")
img(src="img/1.jpg", alt="")
include frames/footer.pug
How I can replace:
include frames/footer.pug
on
{% partial 'frames/footer' %}
but the name of included file (footer in this example) can't be known.
I have a function for this, but it's not working.
.pipe(replace(/include frames\/{1}\/.pug/g, "{% partial 'frames/$1' %}"))

Try :
// .pipe(replace(/frames/(.*).pug/g, "{% partial 'frames/$1' %}"))
var gulp = require("gulp");
var  replace  =  require('gulp-replace');
gulp.task('replace', function () {
return gulp.src(['app.pug'])
.pipe(replace(/frames\/(.*)\.pug/g, "{% partial 'frames/$1' %}"))
    .pipe(gulp.dest('dist'));
});
app.pug (before):
include frames/header.pug
img(src="img/123123.jpg", alt="")
img(src="img/1.jpg", alt="")
include frames/footer.pug
dist/app.pug (after):
include {% partial 'frames/header' %}
img(src="img/123123.jpg", alt="")
img(src="img/1.jpg", alt="")
include {% partial 'frames/footer' %}

symfony twig javascript function undefined

I'm trying to use an external JS file in my twig. The goal is just to verify client's input.
When I put directly my script in my Transfert.html.twig , my script is well executed but when I used an external file with assetic nothing happen. The link created by assetic is good(I can see my script when i click on it in my web page source code).but firebug says
"SyntaxError: expected expression, got '<'
<script type="text/javascript">" "ReferenceError: verifyMontant is not defined"
I registred my bundle into app/config/config.yml:
" bundles: [FASTTransfertBundle]", so I guess no problem form here
Now this is my code: Transfert.html.twig:
{# src/FAST/TransfertBundle/Resources/views/Default/Transfert.html.twig #}
{% extends "FASTTransfertBundle::layout.html.twig" %}
{% block title %}{{ parent() }} - Index{% endblock %}
{% block body %}
{{ form_label(form.montant) }} {{ form_widget(form.montant,{'attr':{'onblur':'verifyMontant(this)'}}) }}
{% javascripts '#FASTTransfertBundle/Resources/public/javascript/verifyTransfert.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
And this is my javascript file :
<script type="text/javascript">
//color if wrong
function changeColor(field,error)
{
if(error)
field.style.backgroundColor = "#fba";
else
field.style.backgroundColor = "";
}
function verifyMontant(field)
{
var montant= field.value.replace(/\D+/g,'');
var regex = /^\-?[0-9]*\.?[0-9]+$/;
if(!regex.test(field.value)){
changeColor(field, true);
return false;
}
else if(montant.length != 11){
changeColor(field, true);
return false;
}
else{
changeColor(field,false);
return true;
}
}
</script>

You must remove
<script type="text/javascript">
from your javascript file.

Using Django Templates, how can I access values from my model in the JavaScript header?

Using Django, I can successfully read and display values from my model in the content segment of my template, but I can't get the values from my model in the head segment of my template.
Here's the code -->
view.py:
from django.shortcuts import render_to_response
from django.template import RequestContext
from host.models import Event
def EventSingle(request, slug):
return render_to_response('event.html', {'eventobject': Event.objects.get(slug=slug)})
event.html:
{% extends "base.html" %}
{% block extrahead %}
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var variable1;
variable1="click worked";
//variable1={{ eventobject.datetime }};
$(document).ready(function () {
$("#pic").click(function (b) {
alert(variable1);
});
});
</script>
{% endblock %}
{% block content %}
<div id="eventobject">
<p>{{ eventobject }}</p>
<p>{{ eventobject.location }}</p>
<p>{{ eventobject.datetime }}</p>
<img id="pic" src="{{ eventobject.image1.url }}" />
</div>
{% endblock %}
When clicking on the image, an alert box pops up with the text "click worked", but if I comment out variable1="click worked"; and un-comment variable1={{ eventobject.datetime }}; nothing happens when I click on the image. Can I not use model references in the head section of django template? All other references to the model in the content block display the values from the DB properly.

I guess eventobject.datetime must be a string or python datetime object.
If it is a string, change your code to :
variable1= "{{ eventobject.datetime }}" ;
If it is a datetime object, use django template filter :
variable1= "{{ eventobject.datetime|date:"D d M Y" }}"
https://docs.djangoproject.com/en/dev/ref/templates/builtins/#date
If you do not put the quotes, the javascript statement looks like:
variable1 = 2013-05-30 ;
which is INCORRECT javascript syntax, the quotes are needed.

Per Django docs, you can use a date filter to format date:
variable1= '{{ eventobject.datetime|date:"d-m-Y" }}';
Additionally, you can also set DATE_FORMAT (or DATETIME_FORMAT) setting to set a project-wide default for displaying such values.