JQuery interferes with bokeh.js. Why? - javascript

TL;DR: my index.html declaration of jQuery with bokeh.js interferes with the ability for the script tags in the php page to manifest themselves into the div that they are supposed to be loaded into. Why?
I've been trying to embed the output of graph.create_html_snippet() from the python bokeh package. I was having so much trouble that I made a separate test html page just to post it to SO, when I discovered that my test page worked! Here it is:
<html>
<head>
<script src="js/bokeh.js"></script>
<script>
$(document).ready(function() {
$("#get_graph").click(function() {
$("#show_graph").load('hello.php');
});
});
</script>
</head>
<body>
<!-- click this to bring up graph -->
<div id="get_graph" style="width:100px;height:30px;background-color:#ddd;">Show graph</div>
<div id="show_graph"></div>
</body>
</html>
And hello.php is here:
<?php
echo 'hello';
?>
<script src="31b1ad52-e095-4ba1-89d0-69f0b898d677.embed.js" bokeh_plottype="embeddata" bokeh_modelid="31b1ad52-e095-4ba1-89d0-69f0b898d677" bokeh_modeltype="Plot" async="true"></script>
So now, confronted with the mystery of why it wouldn't work on my real page (not posted for brevity) and why it would work on my test page, I started subbing things in and out until I added this to the head of the my test page:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
And then things stopped working. But then I realized, wait a minute, how did my original test page work in jQuery if I didn't give a script for jQuery in my <head>? I went back to my main page and deleted the JQuery script, and suddenly the embeddding worked okay. So I went into the bokeh.js script and found a bunch of calls to jQuery I don't quite understand.
Why is my declaration of jQuery interfering with bokeh.js? When I load the php page using a jQuery declared html page, the html element the php was loaded into will not have the script tags loaded into it, but all other php commands are okay. What's the deal? Since I solved the question while writing this, I guess my question is more out of curiosity/help for people who might run into the same thing, since embedding bokeh using php is one of the best applications for it.
Thanks for any help.

This is a recently discovered issue, you can track progress at:
https://github.com/ContinuumIO/bokeh/issues/554
There should be a point release that includes a fix for this very soon.

Related

Adding a JavaScript embed to HTML

I am given this code which should display an embedded small coupon version of this page https://weedmaps.com/deals#/1118217:
<script type="text/javascript">var coupon_id = 17811;</script>
<script type="text/javascript">var coupon_type = "deliveries";</script>
<script type="text/javascript" src="https://weedmaps.com/embed/coupon.js"></script>
I do not know how to add the JavaScript to the HTML correctly. I have placed the following scripts in the head section. But I don't understand how to have the coupon generate in the div I want it to. I have tried calling the JavaScript function, but I've never worked with JavaScript before. Could someone please help me embed this coupon.
I've taken a look at your script and first of all: it definitely should be placed inside the document and not into the <head> section because coupon.js is writing out html at the placement of the coupon.js script import.
In theory you just need to place the script and it should work but there are some problems:
You need to execute it on a web server - when running as a plain html file the script just tries to find the libraries in your file system which does not work.
It still would not work because it would still try to find some resources at your web-server. In mycase it the script tried to load http://localhost:63342/restpoints/deliveries/17811/deal which will not work
To prove 2. just try https://weedmaps.com/restpoints/deliveries/17811/deal with the correct domain. Then you are receiving correct JSON which is used to fill the coupon pane.
=> Consequently the script you were given has problems if it should be executable from domains different from "weedmaps.com"
Javascript can be between head tag but it advisable to put it below before the body closing tag, to allow your page contents loads first before loading javascript. Just import your javascript. and call out. Hope this was helpful.
<!DOCTYPE html>
<html>
<head>
</head>
var coupon_id = 17811;
The JS indicates it is looking for an element with an id of #weedCouponPane. Do you have this in your html? i.e.
<div id="weedCouponPane"></div>

How can I find the source of a <script> placed in the footer?

I would greatly appreciate it if someone could shed some insight onto a problem I'm having.
The code below is from the footer of a WordPress website I run, and as you'll notice, the second script is invalid. I have no idea where that even came from or how to fix it, and I've searched through many WordPress PHP files (footer.php, index.php, page.php, etc.) to try to find the source, but I'm not sure where it is.
So my question is this: could someone tell me how to find the source of this script? In other words, how can I find out where that second line of code even comes from? I'm not a developer, so sorry if this is a dumb question. Here's the code for you to reference:
<script defer="defer" src="http://echidnainc.com/wp-includes/js/admin-bar.min.js" type="text/javascript"></script>
<script defer="defer" src="http://echidnainc.comhttp//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" type="text/javascript"></script>
<script defer="defer" src="http://echidnainc.com/wp-content/plugins/easy-social-share-buttons/assets/js/easy-social-share-buttons.min.js" type="text/javascript"></script>
<script defer="defer" src="http://echidnainc.com/wp-content/plugins/easy-social-share-buttons/assets/js/essb-sticky-sidebar.js" type="text/javascript"></script>
<script defer="defer" src="http://echidnainc.com/wp-content/plugins/easy-slide-in/optin-forms-manager/js/placeholder.js" type="text/javascript"></script>
So to answer the general question I posed, to find the source of a line of code placed in the footer of a WordPress page, the first thing to try should probably be the one-by-one deactivation of plugins until the script disappears (and obviously, when the script disappears, then you know the last plugin to be deactivated was responsible). That worked for me.
And now for details on my specific situation's resolution:
A plugin, Speed Booster Pack, was causing the erroneous script:
<script defer=”defer” src=”http://echidnainc.comhttp//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js” type=”text/javascript”></script>
Either that erroneous script or another element of the Speed Booster Pack was interfering with another plugin I recently installed. I tried tweaking some PHP files in the Speed Booster Pack, but ultimately I just deactivated the plugin in order to solve the problem.
I browsed to each of the scripts you mentioned in your post (just pasted the link into my browser to see the JavaScript source). It doesn't seem to be any of those scripts that are adding the tag to Google's hosted version of jQuery.
My suggestion, without knowing the source of the plugins you have in your wordpress, is that one of the plugins is trying to include jQuery, and has an error.
As to why the scripts are loaded at the end of the page, this is a combination of the "defer" tag, combined with a common web development trick that placing tags at the end of the page body facilitates faster load times.
If you could refer to the source code for any of the plugins I don't mind checking to see which one, if any, have the typo. You yourself could attempt to remove plugins one by one to see if one causes the script tag to disappear, and boom, culprit.
The second script is invalid, because the url in the src="..." arrtibute is invalid. I assume you wanted to use jQuery, a JavaScript libary.
To fix that replace
src="http://echidnainc.comhttp//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"with src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"
The jQuery libary hosted by Google.

Google Content Experiments and Analytics on same page: Adding scripts in correct order

I'm trying to run a Content Experiment, so the basic structure of the <head> should look like the following:
<head>
<!-- Content experiments code (CE) -->
***
<!-- End CE code -->
*** Standard <head> code: title, meta, CSS, JS, etc. ***
<!-- Google Analytics code -->
***
<!-- End GA code -->
</head>
But, here's the issue:
Amongst the various JS being loaded is Google Tag Manager:
<script async="" src="//www.googletagmanager.com/gtm.js?id=GTM-***"></script>
This file dynamically loads another script:
<script type="text/javascript" async="" src="//www.googleadservices.com/pagead/conversion_async.js"></script>
Unfortunately for me, it does this by inserting it before the first <script> tag using the following method:
...
getElementsByTagName('script')[0].insertBefore(newScriptObject);
...
Incase it isn't obvious why this is a problem, the Content Experiment script should be the first element in the <head>. But, because this script is inserted before the first script element, it isn't.
To compound this, other scripts (also outside of my control) are also loaded by this method. So, even though in the document the Content Experiment code is first, after the JS executes and updates the DOM, there are numerous script elements placed before it.
So, does it matter?
Am I right in thinking that this doesn't actually matter? As on page load, the first script element will be the one loading the content experiment script (which is correct) as the other files haven't been dynamically inserted yet.
Will the CE script be loaded and run before the rest of the scripts are loaded?
Apologies for a slightly long winded way of asking a quite straight-forward question, but, well, yeah.
Thanks for the help,
Tom
This is a standard practice on the net and totally fine. Good digging in and debugging though! Content Experiments just wants you to load the script close to the top of your head so that they can redirect people away from the control url with as little impact to performance as possible.
Edit: AND so that they don't get a lot of support tickets when people accidently include CE AFTER google analytics.

JQM: How to break while debugging in a JS file loaded through $.mobile.changePage()

I am developing a mobile app using jQuery, jQuery mobile (and PhoneGap, but that is not relevant). Let's say I have two html pages: page1.html and page2.html. I am loading page2.html using $.mobile.changePage() from page1.html. The page div in page2.html (i.e., the div having data-role="page") contains javascript code that is specific to page2, which also gets loaded with page2.html. The code in page2.html looks something like this:
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
</head>
<body>
<div id="conf-page" data-role="page">
<script type="text/javascript" charset="utf-8">
<!-- MY SCRIPT HERE ----->
</script>
<div data-role="header" style="height: 45px">
Now I want to break somewhere in the javascript code in page2.html. For the time being, I am using Firefox (16.0.2) and Firebug to develop and debug. When page2.html is loaded, I see the JS code of page2.html at two places in firebug Scripts list:
At jQuery.min.js/eval/MD5/
At jQuery.min.js/eval/seq/<#>
If I put a breakpoint somewhere in one of the codes, it get applied to the code in (1) above, but it is never hit when page2.html is loaded.
How to go about setting a breakpoint and breaking somewhere in the JS code in page2.html? I couldn't find anything relevant on the web, which makes me think that I must be missing something, as this must be a pretty common requirement.
Looks like I was searching for different terms. There has been some discussions on this problem in this site. Here are a few references:
dynamically loaded js function does not appear in Firebug js debugger
Scripts added via jQuery not visible in FireBug
Debugging scripts added via jQuery getScript function
A few other ones.
There are two solutions suggested in the above threads:
Most of these threads suggest the same solution: use the "debugger;" statement (w/o the quotes) twice in the code for the FireBug debugger to stop. I did that, and it was a partial solution: the firebug did break, but the variable stack was empty. So this wasn't very useful.
Put the script in a file, use an AJAX Get call to load the script with crossdomain set to true, and that gets the script file, loads it and the script file shows in debugger. That can be used now to set breakpoints etc. More useful than above.
Keeping open to see if there are other solutions.

external js functions not being called when previewing local page in browser

When I include separate js files in my webpage, the functions are not called when previewing the local page in my browser.
I'm trying to implement these page transitions.
http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/
I put the supporting files in the right place, and included them correctly in the head section of my page. I'm pretty sure of that because the css is working fine. Only the js is not.
I dont think I should need something like WAMP server right? Because its only js. The inline js in the same page is also working fine...
When I click my link, it does open the next page, but without transition. Also it adds "Error:0" at the top of the page.
What can I do to get these transitions working?
EDIT
My code looks like this.
<!DOCTYPE html>
<html>
<head>
<link href="css/transition.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/fasw.transitions.min.js"></script>
</head>
<body>
<a transt="flip" href="page2.html">Next</a>
</body>
</html>
I removed everything else from the page and still getting the same error. I view it in Chrome and Firefox, and get the same error in both.
Please check if it is happening because of any js conflicts. You can check it by removing the other js files that is included in the web page.
Check to make sure that you are referencing the Javascript files correctly from your HTML page. Try adding an alert statement to the top of the file, and reload the page - if you don't see the alert, then you're not referencing the file correctly.
alert("Hello.");

Categories

Resources