Comments (6)
Hi @sidjustsid,
This can happened when you are using two different WebParts on the same page that include a JQuery plugin. In fact the SPFx will reload JQuery and randomly the JQuery plugin will fail to load.
Today the only dirty fix that I found is to use the custom version of JQuery included in the latest 1.0.3 package or at this address: http://spfx40fantastics.azureedge.net/spfx40fantastics/jquery_510295b52d8a7cc774bf4fb013893d1e.js
Regards,
Olivier
from spfx-40-fantastics.
Hi @OlivierCC
would you please tell us what's the prob with Jquery and it's plugins in those webparts ?
I'm cloning your webparts and facing same problems with jquery
merci
from spfx-40-fantastics.
I see the diff with jquery
you added
if (window.jQuery)
return;
that correct the behavior of jquery plugins ?
from spfx-40-fantastics.
I followed @OlivierCC advice, and replaced the jquery minified file at node_modules/jquery/dist/jquery.min.js - which solved the loading issue.
However, this exposed a different (unrelated?) issue, unitegallery does not seem to handle loading different themes on the same page.
To reproduce:
- Replace the jQuery file
- Add two web parts using the unitegallery library (I used Grid gallery and Tiles Menu)
- First load might seem OK:
- Subsequent reload of the page exposes the issue:
Fix:
- Replace the jQuery file per @OlivierCC instructions
- Set the theme in the unitegallery options, for my use case, that meant modifying the options (line 114) of TilesMenuWebPart.ts:
private renderContents(): void {
($ as any)("#" + this.guid + "-gallery").unitegallery({
gallery_theme: "tiles",
tile_as_link: true,
tiles_type: this.properties.justified === true ? "justified": '',
tile_enable_icons: this.properties.enableIcons,
tile_enable_textpanel: this.properties.textPanelEnable,
tile_textpanel_always_on: this.properties.textPanelAlwaysOnTop,
tile_textpanel_position: this.properties.textPanelPosition,
tile_textpanel_bg_opacity: this.properties.textPanelOpacity,
tile_textpanel_bg_color: this.properties.textPanelBackgroundColor,
tile_textpanel_title_font_family: this.properties.textPanelFont,
tile_textpanel_title_font_size: this.properties.textPanelFontSize != null ? this.properties.textPanelFontSize.replace("px", "") : '',
tile_textpanel_title_text_align: this.properties.textPanelAlign,
tile_textpanel_title_color: this.properties.textPanelFontColor,
tiles_space_between_cols: this.properties.spaceBetweenCols,
tile_enable_border: this.properties.enableBorder,
tile_border_width: this.properties.border,
tile_border_color: this.properties.borderColor,
tile_enable_shadow: this.properties.enableShadow
});
}
from spfx-40-fantastics.
Hi @kmosti
try adding another webparts (tiles, animated text, ...) and reload many times the page you'll see js errors in console
till today I don't understand the cause of this issue with jquery
from spfx-40-fantastics.
I'll give it a try, but for now my web parts are a little bit healthier so that makes me happy :)
What kinds of errors are you seeing in the console?
from spfx-40-fantastics.
Related Issues (20)
- Fixed Build & made full width HOT 5
- News Carousel issue HOT 1
- Slider Gallery - List Dropdown is not coming. HOT 2
- Accordion web part: first tab expanded by default HOT 1
- Accordion web part: messes up formatting/editing in other text web parts
- Tabs Webpart: Editor not available in the webpart and options are missing in webpart settings HOT 5
- Images Appearing and Disappearing After a While
- jQuery on Azure CDN certificate is missing or expired
- Unable to run serve HOT 2
- SimplePoll, unable to View Results in loadChart() for a Pie Chart HOT 1
- crossorigin attribute? and other issues... HOT 1
- Accordion webpart : Editor not working on Edge browser
- spfx-40-fantastics error HOT 3
- News Ticker Dialog box wont't close after hitting add/edit/delete for news items HOT 1
- Acordian webpart 'manage tabs' window does not close HOT 2
- Is SPFX40 available for Sharepoint 2019 On-Prem?
- NPM Install Issue
- What version Node for install ?
- Stock Web Part Not Pulling Data
- Ribbon not responding and now unable to edit page
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from spfx-40-fantastics.