I have a 3rd party script that displays some data on my site. When the script loads it breaks all of the JS on any page the script is in. I remove the script and my page works without issue.
Are there ways to prevent 3rd party scripts from interacting with my page in a way the breaks the page?
Notes:
I have no access to the 3rd party script to edit.
I am using jQuery for the scripts that are breaking. I have in place jQuery.noConflict yet it still breaks the page.
I have attempted to load the script in an iframe to see if that made a difference. It did not.
The script does write data to the page, mainly CSS and HTML
Note: The below code may contain references/links to drug content, mainly marijuana.
I am building a site for a medical marijuana dispensary. I am importing the menu of the dispensary from a site called WeedMaps. Their embed code looks like this:
<script type="text/javascript">var wmenu_id = 1111;</script> //The number correlates to the menu I need to pull, I have changed it in this question
<script type="text/javascript" src="http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu-widget.js"></script>
When I use the above code the JS of my site breaks. How to I prevent my code from breaking when using 3rd party scripts over which I have no control.
UPDATE
Here is a JS Fiddle. The menu opens but doesn't close properly. Remove the script that is generating the menu from weedmaps and the menu works correctly. (The weedmaps menu script is in the bottom of the HTML panel.)
Hmm, not having much luck. I'll add what I have, since it may trigger further ideas from you. However, in short, I think their script isn't written particularly well, and that they really do need to fix it on their end.
As it stands, Firefox shows this error when animating the menus:
TypeError: jQuery.easing[jQuery.easing.def] is not a function
This blog suggests that this occurs when the Easing plugin is loaded before jQuery. Fine, I thought - we just need to load the WeedMenu script after our jQuery has loaded. So I tried the following (with help from here):
$j.getScript('http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu-widget.js');
That gave me this error:
A call to document.write() from an asynchronously-loaded external script was ignored.
Turns out that occurs as a result of the WM script using document.write, which is desperately out of date. So that lead me on to find crapLoader, which is meant to handle this sort of thing:
crapLoader.loadScript("http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu-widget.js", "menu-script");
Unfortunately that brings me back to the original Easing error.
Here's my fork - let me know if you find anything!
The script is not well written, I was able to solve my issue by removing a line of code from the script. The link I provided list to a longer script. The script had this line of code:
try {
b("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), "function" != typeof wmenu_strains_callback && b("http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu.js", !0)
}
if I remove b("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), then the script works and my page works. What was happening was the script was inserting jQuery into the bottom of my head and breaking the rest of my javascript.
Related
I want to edit some images which can only be done in WPBakery Page Builder. So, when I try to edit the page with it, the frontend editor (page builder) doesn't loads. Console shows the following error:
Although, the library script tag is added before the tag which is using this library:
I don't know if any of this makes sense, but, yeah, I have tried these solutions because they were mentioned on different forums:
Adding charset="utf-8" to external script tag.
Moving the script tag inside Raw HTML element.
Using $(document).ready(function(){}) to enclose the whole of second
script. So, that it loads after everything is loaded.
Unfortunately, none of these worked for me.
The page builder works fine on pages where I don't use the d3.js library. And, the visualization works fine WHEN NOT IN PAGE BUILDER - the library loads up and the visualization is displayed. You can check it out here:
https://conductscience.com/age-when-charles-darwin/
Also, please note that I don't have access to any of the theme files. So, I can't make any changes to functions.php or any other file.
Your question is related to the WPBakery, not Visual Composer plugin. You need to have the latest version 5.7 in order to fix this issue. More information, contact support.wpbakery.com if you have a valid license.
I am adding an html file to my GWT page like so:
HTML htmlPanel = new HTML();
String html = MyHtml.INSTANCE.getHtml().getText();
htmlPanel.setHTML(html);
RootPanel.get().add(htmlPanel);
and that works ... but the embedded script files don't run. I see the line in Chrome's Elements tab where the script should be loaded, but apparently it is not (doesn't show up in the Scripts tab, and debugger lines are not hit).
As a test, I loaded the html file straight into my browser (not via GWT), and the script does show up in the Scripts tab and it does run the code (so it's not an issue with the script tag itself).
So ... why/how do the scripts not run when embedded by GWT? (I wouldn't know how to keep an embedded script from running if I tried!) ;o)
Do I have to use the ScriptInjector to make this work (I'm having my own problems with getting that working, which is a subject for another thread)? If so ... why?
Thanks for your help!
Creating the script by adding it to an HTML widget and appending it to the page will not work, this is not supported by the browser. GWT isn't doing this, the browser is, or rather, the browser is doing it because of how the HTML widget works. For specifics on why this is the case, see the great answer at https://stackoverflow.com/a/13392818/860630 that digs into the details.
There are several other ways you can do this, but they all boil down to the work that the ScriptInjector is already doing - if ScriptInjector doesn't work for you, it seems unlikely that the other options will behave either. Maybe edit your question to use ScriptInjector and describe your issues, or ask a new question with it? The only cases where I've seen ScriptInjector not work is related to $wnd, or which page the script is appended to (see com.google.gwt.core.client.ScriptInjector#TOP_WINDOW).
I'm currently working on converting an HTML5 template called Rekreato into a wordpress theme. I've managed to set up a bare-bones theme, but whenever I activate any plugins with jQuery scripts, a few of my jQuery effects are broken. Specifically, in Firefox debugger I get --
TypeError: jQuery.easing[jQuery.easing.def] is not a function #
jquery.easing.1.3.js:46
Here is the page in question. You can see about halfway down there is an image slider that is not functional. I have left one plugin active, called WP eMember.
I've tried a number of things like configuring my theme as a child theme, wrapping jquery.easing.1.3 in a document ready function, and moving the script call around in the code, but to no avail. I'm not even sure that the easing script is at fault. The answer is probably staring me in the face, but I can't seem to figure it out. Many thanks in advance.
EDIT: Excellent suggestion from markratledge. I put the scripts in functions.php with wp_register_script() and wp_enqueue_script(). At first I was very confused that even more things were broken. Reading further, I saw that since Wordpress uses a noConflict wrapper around its built-in jQuery library, the $ shortcut is unavailable. So, I went through all of my scripts that were showing errors in the inspector and swapped '$' with 'jQuery'. Voila! Everything jives. Thanks again!
Check out Function Reference/wp enqueue script « WordPress Codex on how to load JS in WordPress themes and avoid jQuery errors, with examples shown.
You're loading a bunch of jQuery by direct link, but then wp_head comes in and loads more jQuery for the plugins, and collisions occur. I.e., the two different main jQuery libraries; check in the Firefox console to get a list of all the JS that is loading.
From that doc:
wp_enqueue_script links a script file to the generated page at the right time according
to the script dependencies, if the script has not been already
included and if all the dependencies have been registered. You could
either link a script with a handle previously registered using the
wp_register_script() function, or provide this function with all the
parameters necessary to link a script.
This is the recommended method of linking JavaScript to a WordPress
generated page.
I have no idea how to describe this accurately/intelligently because it seems to be completely impossible, yet there must some reason for it.
I am trying to leverage jquery, jquery-ui, qtip (tooltip for jquery) and highcharts (javascript charting), but for purpose of post I could just as easily been only using jQuery and jQuery-UI.
If I include my <script/> tags at the bottom of my <head/> element I get an error trying to call the .slider() extension to configure my sliders. But if I put the <script/> tags right before the closing of my <body/> element then everything works. To illustrate, the following will not work (obviously some pseudo code below):
<head>
<script jquery.js/>
<script jquery-ui.js/>
</head>
<body>
... html ...
<script type="text/javascript">
$(document).ready(function () {
$(".slider").slider( { .. options .. } );
} )
</script>
... more html *including* the .slider elements
</body>
However, if I move the two jQuery script tags to be right above the </body> closing element things work. When the script tags are in the head element and I debug my application, basically the page does appear to have completely loaded and Visual Studio highlights the line calling the .slider() function saying it doesn't know what slider() is. Looking at the call stack, it appears to be correctly calling it from the document ready function...the mark up all appears to be there as well, making me believe the document truly is ready.
Now I didn't include things that are required by asp.net 1.1/2.0 site in my pseudo code, namely a <form/> element with runat="server' and the use of a <asp:ScriptManager/> tag (we needed that for parsing monetary values from different cultures leveraging Microsoft Ajax). I can't believe they would be causing the problem, but maybe they are. Additionally, asp.net injects several of its own script sections (i.e. for validation, post back, etc.)
Regarding the form tag...all the html and document.ready markup would be inside the form tag, while the script tags are always outside of the form tag (either above it, in the head or below it at the bottom of the body).
Obviously I could leave the script tags at the bottom, and I very well may end up doing that, but I am trying to get a clean 'template site' of which to use when creating new client sites and it just feels wrong that I have a restriction forcing me to put those tags at the bottom of the html. I'm sure our framework code (or maybe asp.net's) is simply inserting something that is causing problems/conflicts with jQuery, but I don't really know how to go about debugging/diagnosing what that problem is. So if anyone has any suggestions I'd greatly appreciate it.
It looks like jQuery 1.3.2 is being loaded by ASP.NET (see your second WebResource.axd). The two library versions are overwriting each other. Thus the reason it works when you load 1.6.2 at the end of the page.
Interesting problem here from some inherited code I recently looked at. I'm trying to add a compression module to a project. It is loading all the JS and CSS files, combining them, minifying them, and compressing them. I've tried a number of solutions, but all of them have one fatal problem.
I have some javascript that is being loaded via Page.ClientScript.RegisterClientScriptBlock in the PreRender of the MasterPage. The compression module is loading as a Script Tag link in the MasterPage, but when I run the page... the code from the PreRender is lopped on top and is giving me a '$ is undefined' error, telling me jQuery isn't loaded yet.
Furthermore, I can't seem to get past the same problem when it comes to inline javascript on content pages.
Any ideas as to what is causing this? Enlighten me as I have no clue.
If have done this before with RegisterStartupScript (instead of RegisterClientScriptBlock) and called the $(document).ready(function() from WITHIN that script.
If the script tag link that eventually expands out to jquery is not in the head, but in the body of the page, then $ will be undefined when the script block executes, unless it is included in the html before the opening <form /> tag in the rendered html, which I understand is where RegisterClientScriptBlock spits out its script (just after that opening tag).
If this is not the case, and the joined/minified script is in the head, then I'd use a browser debugger such as Firebug or IE Dev Tools to verify that the jquery script is being correctly included in your combined script.
I know this answer is late to the party, but try calling ClientScript.RegisterClientScriptBlock in your OnPreRenderComplete (rather than OnPreRender) handler. This inserts the code later in the page rendering process.
All your jQuery code should be written inside the DOM-ready function:
$(function() {
// your code here
});
indipendently from where you place it in the page, 'cause the jQuery() function isn't avalaible before.