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 the reason behind Typescript's unexpected behavior when handling the severity prop in Material UI Alerts?

Select a single option from the group to include in the array

Transforming ajax code into node.js

Issue with passing props to screen not displaying on initial load

Unable to establish a local dependency link with npm

Ways to terminate a looping function in jquery

The compatibility between JSON and the CORS header 'Access-Control-Allow-Origin' is crucial

Steps to successfully retrieve an image using JavaScript on the client side while circumventing any CORS errors

Node.js encountered an error: TypeError - req.end does not have a function

What is the process for submitting a form in Laravel 5 with ajax?

Tips to center a circular progress bar in Material UI

Attempting to retrieve currentScript is causing a typeError to be thrown

Exploring the functionality of a personalized hook using the useSelector method

I am experiencing issues with the jQuery function within my MVC Application

Troubleshooting the Issue of PHP Variables Not Being Assigned to Javascript Variables

Could anyone provide recommendations on how to globally declare jQuery in a Vue-CLI 3 project?

Transmit the data.json file to a node.js server using Postman

Button with a Jquery icon design

Looking for a Javascript tool to select provinces graphically?

Displaying Title and Description Dynamically on Markers in Angular Google Maps