Develop Reference

Moving Embedded JS to Separate File

I want the embedded script in my page footer to be combined with other JS in a bundle.js file.
When I successfully add it to the file - the function below doesn't add the attributes to my external links as it before.
How do I adjust the code to make it work?
Combined JS
Placed in the footer
<script src="{{ '/assets/js/bundle.js' | url }}"></script>
Embedded Script
Placed in the footer - want to add to bundle.js
<script>
(function () {
const links = document.querySelectorAll("a[href^='https://'], a[href^='http://']")
const host = window.location.hostname
const isInternalLink = link => new URL(link).hostname === host
links.forEach(link => {
if (isInternalLink(link)) return
link.setAttribute("target", "_blank")
link.setAttribute("rel", "noopener")
link.setAttribute("data-splitbee-event", "External Link")
link.setAttribute("data-splitbee-event-type", link.hostname)
})
})()
</script>
Bundle File
---
permalink: "/assets/js/bundle.js.njk"
---
{% set js %}
{% include "../assets/js/main.js" %}
{% include "../assets/js/search.js" %}
// place embedded scrip in external-links.js
{% include "../assets/js/external-links.js" %}
{% endset %}
{{ js | minifyJs | safe }}

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 %}

Using javascript to include tables in html

I want to use javascript to create some color picker in a html page.
Until now I was using .hide/.show but I think is better to create only the tables that I need, right?
Also I have the tables in another html file, so I use the {% include %} TAG but I don't need to.
My html template:
...
<div id='color_table'>
</div>
...
My script-jquery.js:
function show_color_tables(num, colors) {
for (var i=0; i<num; i++) {
//var node = document.createTextNode("{% include 'banner/_colortable.html' with table='"+i+"' color='"+colors+"' %}");
//document.getElementById('color_table').appendChild(node);
//document.getElementById('color_table').innerHTML = "<iframe></iframe>";
//document.getElementById('color_table').firstChild.contentWindow.document.write("{% include 'banner/_colortable.html' with table='"+i+"' color='"+colors+"' %}");
var node = "{% include 'banner/_colortable.html' with table='"+i+"' color='"+colors+"' %}";
$('#color_table').html(node);
};
};
This writes on the screen:
{% include 'banner/_colortable.html' with table='0' color='Tutti' %}
but don't import the tables from _colortable.html
Thanks in advance

Symfony2: AJAX request returns full page html

I'm trying to get a simple AJAX request to work in Symfony2. It seems that the request is never reaching the controller. Instead of alerting the number '123', the AJAX request returns the HTML of the current page (index.html.twig). I have a feeling that since the pattern of the AJAX route is pointing to the current page I am on, the AJAX response is being filled with the output of the current page rather than getting the response from the Controller. Is there any way that I can get just the value from the Controller? Any help would be greatly appreciated.
Here is my Twig template (index.html.twig):
{% extends 'base.html.twig' %}
{% block body %}
<a href="123" class="test">Test</div>
{% endblock %}
{% block javascripts %}
{% javascripts '#AppBundle/js/jquery.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.test').on('click', function(){
var id = jQuery(this).attr('href');
jQuery.post('{{path('task_ajax')}}',
{data: id},
function(response){
alert(response);
}
);
return false;
});
});
</script>
{% endblock %}
Here is my routing.yml file:
task_ajax:
pattern: /jobs
defaults: { _controller: AppBundle:Ajax:task }
requirements:
_method: POST
Here is my controller:
namespace AppBundle\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
class AjaxController extends Controller
{
public function taskAction() {
$request = $this->container->get('request');
$data = $request->query->get('data');
return new Response($data);
}
}

check routing order. Move Ajax route to first place.

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.