Leveraging ES6 with jQuery in Symfony 4

Question

Leveraging ES6 with jQuery in Symfony 4

Currently working on a simple app using Symfony 4 and trying to add custom triggers in JavaScript. Having trouble getting my additional code to work as expected, even though it's compiled by Webpack via encore. It seems like my event is not triggering no matter where I place it. Any guidance would be appreciated since I am not well-versed in ES6.

assets/js/app.js

import '../css/app.scss';
import $ from 'jquery';
import 'bootstrap';
import './checkLoan'; // This is my file

app/js/checkLoan.js

export default function() {
    console.log('Loaded successfully');
    $('#my-button').click(function (event) {
        event.preventDefault();
        console.log('Button clicked!');
    });
};

javascript ecmascript-6 symfony4 webpack-encore

Answer 1

Answer №1

Your click listener isn't being triggered because you import it, but forget to call the function.

To fix this issue, you could move your listener functions to a separate file called listener.js:

export default {
    clickListener(){
        console.log('Loaded successfully');
        $('#my-button').click(function (event) {
            event.preventDefault();
            console.log('Button clicked')
        });
    }
};

Then, you can call these functions in your main app.js once the page has fully loaded:

import $ from 'jquery';
import listeners from "./listeners"
$(document).ready(function () {
    listeners.clickListener();
    ...
});

Don't forget to ensure that the webpack.config.js file at the root of your project includes the following line uncommented:

.autoProvidejQuery()

Answer 2

Your click listener isn't being triggered because you import it, but forget to call the function.

To fix this issue, you could move your listener functions to a separate file called listener.js:

export default {
    clickListener(){
        console.log('Loaded successfully');
        $('#my-button').click(function (event) {
            event.preventDefault();
            console.log('Button clicked')
        });
    }
};

Then, you can call these functions in your main app.js once the page has fully loaded:

import $ from 'jquery';
import listeners from "./listeners"
$(document).ready(function () {
    listeners.clickListener();
    ...
});

Don't forget to ensure that the webpack.config.js file at the root of your project includes the following line uncommented:

.autoProvidejQuery()

Leveraging ES6 with jQuery in Symfony 4

Answer №1

Similar questions

What could be causing Wordpress Jquery to only function properly after a page refresh?

A method for categorizing every tier of JSON data based on a shared attribute

Arranging cards in a stack using VueJS

When executing code in React JS, I encountered no errors, but the output did not match my expectations

javascript Why isn't the initial click registering?

You can only use the angularjs http function once

AngularJs input field with a dynamic ng-model for real-time data binding

Seeking assistance with downloading a collection of images as a zipped file using AngularJS

Sharing data between two Angular 2 component TypeScript files

Sliding the container with a width adjustment and left margin fails to display all images

Integrating a fresh element into the carousel structure will automatically generate a new row within Angular

Enhance the functionality of your current JavaScript code by adding value during the change event

Why does AngularJS treat $http response.data as an object, even though PHP sends back a JSON string?

Next.js Page is failing to render React component props

Is there a substitute for AngularJS $watch in Aurelia?

Try utilizing querySelectorAll() to target the second item in the list

The "Splash Screen Div" page displayed during transitions and page loading

Tips for adjusting the text color of input fields while scrolling down

Managing multiple changes in input values within an object

Prevent a link from loading twice in jQuery's load() function if the parent page already