Refreshing jQuery plugins using ES6 JavaScript following an ajax page refresh

I recently created a website that utilizes a router system for ajax page loading. The site is built with webpack and organized as ES6 JavaScript modules. Although I have integrated some third-party jQuery plugins, they seem to only work properly when the page is refreshed.

My main concern is how to reload or reinitialize these third-party jQuery plugins and scripts using ES6 JS after an ajax page load.

One specific example is the Elevate Zoom plugin which I use for image zoom functionality. Upon navigating to another page on the site that uses this plugin, the zoom feature malfunctions and requires a page refresh to work again.

$("#img_01").elevateZoom();

Is there a solution similar to the one outlined below?

import { component } from 'picoapp';
// import elevate zoom  
// import jQuery 


export default component(() => {

  // reinitialize plugin here?
  //$("#img_01").elevateZoom();

})
javascriptajaxwebpackecmascript-6

Answer №1

Indeed, it appears that my attempt was successful. Oh well, I was a bit hesitant about using jQuery within ES6 so your encouragement really helped!

I must admit, I am fairly new to the realm of ES6 and Webpack.

import { component } from 'picoapp';
import $ from "jquery";
import zoom from '../lib/elevatezoom.js'


export default component(() => {

    $(".zoom").elevateZoom({
      zoomType: "inner",
      cursor: "zoom-in"
    }); 

})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looping through items using v-model value in v-for

My website features a small form that allows users to submit new photos and view previously submitted photos. Users begin by selecting an album for the photo and then uploading it. Currently, I am encountering an issue in retrieving photos based on the sel ...

javascriptvue.jsvuejs2

What is the best way to retrieve information from two tables in SQL server with the help of AngularJS?

Seeking assistance as I navigate the process of extracting data from two tables within the same SQL Server database. My goal is to incorporate this data into an HTML table, utilizing a JavaScript script to access information from one table (Table1). Below ...

javascriptc#angularjsajax

"AngularJS fails to pass the value of a checkbox within ng-repeat and

I have already asked this question, but the previous solutions did not resolve my issue. I am attempting to pass the value of a checkbox to a controller in AngularJS, but I keep getting an 'undefined' message. I am new to AngularJS. Here is the ...

javascriptangularjsselectcheckboxundefined

Locating a specific element in javascript using its id

I'm struggling to automate the process of downloading a CSV file from a website using Selenium. Specifically, I'm having trouble selecting the format of the file and clicking on export. Does anyone have any ideas on how to accomplish this? To acc ...

javascriptpythonselenium

What could be the reason for it allowing access with any password after correctly entering it once?

My issue involves two HTML files - one with a form for entering a password and another containing secrets. I've written some JavaScript code that seems to be causing problems. It refuses every incorrect password until the correct one is entered once, ...

javascriptnode.jsexpress

Tips on arranging JSON elements based on the sequence of another JSON

Currently, I am facing a challenge with sorting a list of parks (park_list) based on both distance and area. The code snippet below successfully sorts the list by distance: sortList(index){ return function(a, b){ return (a[index] === b[index] ? 0 : ...

javascriptarraysjsonangularionic3

Utilize the lodash times method for indexing

I have a requirement to duplicate a component "n" number of times. I achieved this by utilizing the lodash method called "times". However, I encountered an issue with assigning an index as a key for the generated components. Below is the snippet of code t ...

javascriptnode.jslodash

`Achieving object placement on top of another object in ThreeJS`

Being new to ThreeJS, I am seeking help with a basic question. I have loaded multiple GLTF files into my scene and I need to position one object on top of another (but the position should be adjustable later on) For instance: https://i.sstatic.net/oJq1BIi ...

javascriptthree.jsgltf

PhantomJs is only providing partial responses

I have been attempting to retrieve a response from the following URL using PhantomJS:- https://www.trivago.com/api/v1/bin/accommodation/2891353/deals?iPathId=34812&iRoomType=1&aRooms=&aDateRange%5Barr%5D=2017-05-24&aDateRange%5Bdep%5D=2017 ...

javascriptphantomjs

Tips for effectively utilizing the overflow:auto property to maintain focus on the final

I am working on a Todo App and facing an issue where the scrollbars don't focus on the bottom of the page when adding a new element. How can this problem be resolved? https://i.stack.imgur.com/IzyUQ.png ...

javascriptcsselectronstyles

developing a shader that transitions between day and night based on the movement of a light source

I've set up a scene with a sphere illuminated by a DirectionalLight to simulate the sun shining on Earth. My goal is to incorporate a shader that displays the earth at night on the unlit portions of the globe and during the day on the lit areas. Event ...

javascriptthree.jsglslshader

PHP and AJAX enable the seamless transfer of large files to a server in chunks via remote upload. This process includes a time limit setting to ensure efficient

Over on StackOverflow, there's a thread dedicated to the topic of streaming large files to users in chunks. The answer provided includes code that demonstrates how to accomplish this. However, my focus is on figuring out a way to simply save the file ...

javascriptphpajax

Run JavaScript code before finalizing the "submit" action within a Ruby on Rails application

Having trouble with utilizing old JS scripts found on Stack Overflow. <div class="form-actions"> <%= f.button :submit, class:"btn btn-success create-campaign" %> </div> The submit button is causing an issue for me. <div clas ...

javascriptjqueryhtmlruby-on-railsruby

Exploring the World of Background Processes in Meteor

Is there a way to incorporate background tasks, possibly using a workers pool? I'm interested in exploring this concept further and potentially developing a package for it. Can you point me in the right direction? ...

javascriptmeteornpm

Python/Selenium Issue: JS/AJAX Content Fails to Load when URL is Accessed

Currently, I am attempting to gather data from the following URL: The data that I am looking to extract is loaded dynamically, such as the Center Bore information. When accessing the link through a standard web browser, the content loads without any issue ...

javascriptpythonajaxseleniumweb-scraping

Ways to verify the identity of a user using an external authentication service

One of my microservices deals with user login and registration. Upon making a request to localhost:8080 with the body { "username": "test", "password":"test"}, I receive an authentication token like this: { "tok ...

javascripttypescriptnestjs

Using Rails to Send ActiveRecord::Relations as JSON to an AJAX Request

I have been searching extensively but haven't found a simple solution to my problem yet. This is the ajax call I am using: $.get(path,{ section_id: "a", field_id: "b"}) .done(function(data) {alert(data);}) .fail(function() { alert("error"); }); T ...

ruby-on-railsajaxjsonactiverecord

Use angular-resource to add a new entry to the db.json file

I have a JSON file called db.json with the following structure: { "menu":[ { "id":0, "item":"item1" },{ "id":1, "item":"item2" },{ "id":2, "item":"item3" } ], "feedback":[] } Currently, I am using Angular's $resource to send a Jav ...

javascriptangularjsjsonrestangular-resource

Can one iterate over a JavaScript object using forEach() even if the keys are undefined?

During a code review, I came across the following code: var a = { ... }; // an object filled with key-value pairs for (var key in a) { if (!angular.isUndefined(key)) { do.stuff(); } } I am questioning whether key can ever be undefined or ...

javascriptundefined

JavaScript events for scrolling horizontally and vertically across multiple browsers

Is there a way to capture mousewheel and touchpad events, including on Mac, using JavaScript? Ideally, I want to get deltaX and deltaY values for both horizontal and vertical movements. I came across a website - - that appears to handle touchpad events ho ...

javascriptjquery