jQuery Plugins / Bootstrap

Hello!
Thank you for the tutorial!

I've some error when tried to using jquery.masked input plugin. (https://yarn.pm/jquery.mask...

I did
> yarn add jquery.maskedinput

Then required it in app.js file

const $ = require('jquery');
require('jquery.maskedinput');

But when I tried to use it got error
Uncaught TypeError: $(...).mask is not a function

Is there any ideas how to fix it?

Hi there!

Firstly great article, thanks to author.
As I am new to symfony 4.x with encore. From beginning of this tutorial all went smooth. But got struck in the following issue.

/**
 * add js libs
 */
require('bootstrap');

/**
 * add css files
 */
require('bootstrap/dist/css/bootstrap.css');
require('../css/carousel.css');

$(document).ready(function() {
    console.log('Test loading...!');
});

in the file named home.js

yarn encore dev works fine build the files.

But when I include them in the twig file. It is not able to run the javascript.

{% block javascripts %}

            {#
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js" type="text/javascript"></script>
            <script src="https://getbootstrap.com/docs/4.1/dist/js/bootstrap.min.js" type="text/javascript"></script>
            #}

            {#
            #}
            <script src="{{ asset('build/home.js') }}"></script>
        {% endblock %}

in the base.html.twig

to resolve javascript issue, as mentioned in the tutorial, I changed webpack.config.js file as below.

var Encore = require('@symfony/webpack-encore');

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    //.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 you JavaScript imports CSS.
     */
    .addEntry('home', './assets/js/home.js')
    //.addEntry('page1', './assets/js/page1.js')
    //.addEntry('page2', './assets/js/page2.js')

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    /*
     * 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())

    // enables Sass/SCSS support
    //.enableSassLoader()

    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()

    // uncomment if you're having problems with a jQuery plugin
    .autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

Any clue would be helpful.

Awesome tutorial.... I have one question, if I have two different files to be included in the same page, and each file use internally jquery, after webpack encore this files, each file will included jquery?

Hey guys?

Is it possible to call a Javascript function from a twig template?

This is my twig template:

{% extends 'base.html.twig' %}

{% block body %}
<div class="row">
<div class="col-12 col-md-8 js-post-show" data-post-id="{{ id }}"></div>
<div class="col-12 col-md-4 js-post-sidebar"></div>
</div>
<script>
$(document).ready(function(){
loadPost();
});
</script>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="{{ asset('build/js/post_show.js') }}"></script>
<script src="{{ asset('build/js/following.js') }}"></script>
{% endblock %}

This is my webpack.config.js

// webpack.config.js
var Encore = require('@symfony/webpack-encore');

Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.autoProvidejQuery()
.addEntry('js/app', [
'./assets/js/app.js',
'./node_modules/jquery/dist/jquery.slim.js',
'./node_modules/popper.js/dist/popper.min.js',
'./node_modules/bootstrap/dist/js/bootstrap.min.js',
'./node_modules/underscore/underscore-min.js',
])
.addEntry('js/header', './assets/js/header.js')
.addEntry('js/login', './assets/js/login.js')
.addEntry('js/post_list', './assets/js/post_list.js')
.addEntry('js/post_show', './assets/js/post_show.js')
.addEntry('js/following', './assets/js/following.js')
.addEntry('js/home', './assets/js/home.js')
.addEntry('js/notification_list', './assets/js/notification_list.js')
.addStyleEntry('css/app', [
'./node_modules/bootstrap/dist/css/bootstrap.min.css',
'./assets/css/app.css',
])
;

module.exports = Encore.getWebpackConfig();

And this is my assets/js/app.js

require('../css/app.css');
require('@fortawesome/fontawesome-free/css/all.min.css');
require('@fortawesome/fontawesome-free/js/all.min.js');

const $ = require('jquery');

// create global $ and jQuery variables
global.$ = global.jQuery = $;

global.userId = '';

However I try to load the twig template, I get the following error message:

Uncaught ReferenceError: $ is not defined

👍 on these tutorials. They're the best I've found on Symfony anywhere on the web.

However, I have this issue I was hoping you'd be able to help with, Ryan.

I hate to think how long I've spent on trying to fix an issue with another jQuery plugin - in this case, jqgrid (http://www.trirand.com/blog/ and http://www.trirand.com/jqgridwiki/doku.php). Still no joy. 😣

#webpack.config.js

const Encore = require('@symfony/webpack-encore');

// const isProduction = process.env.NODE_ENV === 'production';
const CopyWebpackPlugin = require('copy-webpack-plugin');

Encore
    // the project directory where all compiled assets will be stored
    .setOutputPath('public/build/')

    // the public path used by the web server to access the previous directory
    .setPublicPath('/build')

    .createSharedEntry('layout', './assets/js/layout.js')
    .addEntry('app', './assets/js/app.js')
    .addEntry('tables', './assets/js/tables.js')

    .enableBuildNotifications()

    // fixes modules that expect jQuery to be global
    .autoProvidejQuery()

    .addPlugin(new CopyWebpackPlugin([
        // copies to {output}/static
        { from: './assets/static', to: 'static' }
    ]))

    .autoProvideVariables({
        $: "jquery",
        jQuery: "jquery",
        jqGrid: "jqGrid",
        jqgrid: "jqgrid"
    })

    .enableSassLoader()

    .enableSourceMaps(!Encore.isProduction())

    .cleanupOutputBeforeBuild()

    .enableVersioning()
;

// export the final configuration
module.exports = Encore.getWebpackConfig();

'use strict';

...

// $ = window.$ = window.jQuery = require("jquery");
global.$ = global.jQuery = require('jquery');
require('jquery-ui');
...

window.$.jqgrid = window.$.jqGrid = require('jqgrid/js/jquery.jqGrid.src.js');

In Chrome Dev Tools' console, I get the following:

$.jqGrid
ƒ (jQuery) {
//@add
(function ($) {
"use strict";
$.jgrid = $.jgrid || {};
$.extend($.jgrid,{

version : "4.6.0",
htmlDecode : function(value){
	if(value && (value===' ' || value==='&#16…

$.jqgrid
ƒ (jQuery) {
//@add
(function ($) {
"use strict";
$.jgrid = $.jgrid || {};
$.extend($.jgrid,{

version : "4.6.0",
htmlDecode : function(value){
	if(value && (value===' ' || value==='&#16…

However, when I then try to call jqGrid on the same page:

$("#table").jqGrid({....

I get:

Uncaught TypeError: jQuery(...).jqGrid is not a function

If I click through to the actual part of the jQuery library throwing the error, it appears to be coming from:

jQuery.readyException = function( error ) {

window.setTimeout( function() {
	throw error;
} );

};

🤔

So it's saying jQuery isn't ready, but it certainly is:

jQuery
ƒ ( selector, context ) {

	// The jQuery object is actually just the init constructor 'enhanced'
	// Need init if jQuery is called (just allow error to be thrown if not included)
	return new jQuery…

So it's the same as if it returned 'undefined'?

Any idea what is going wrong here? 

Presumably it's something to do with what you mentioned about jQuery plugins expecting a global jQuery object?

Pls help, if you can. This has been driving me nuts! 🤯

A nice one! https://bossanova.uk/jexcel and more bootstrap-like https://bossanova.uk/jexcel...

I just finished the tutorial and my encore it's working great in my symfony app. However, I haver returned to the chapter 6 because I was wondering if keeping the CDN link for bootstrap it's better for a faster page speed. In theory, a CDN helps with that. I would like to know your opinion only to be sure. What can you recommend me?