Django Bokeh - Uncaught TypeError: Bokeh.$ is not a function

Question

Bokeh version: bokeh==0.12.3

CDN_Js version: https://cdn.bokeh.org/bokeh/release/bokeh-0.12.3.min.js

the Bokeh Script JS that gets embedded into the HTML template of Django as below :-

Bokeh.$(function(){
Bokeh.safely(function(){
....

I can get the CDN_js and CDN_css to the DOM , but cant seem to get them into the innerHtml / Html of the correct DIV.

Rest of the code as below :-

<script>
var call_bokehBar = "{% url 'call_bokehBar' %}" //
var bokeh_text = document.getElementById('dynamic_bokeh_body_text1');
bokeh_text.onclick = function() {
      $.ajax({
         url: call_bokehBar,
         type: 'GET',      
         dataType: 'json', 
         success: function(resultJSON) {
            console.log(resultJSON) //  -- YES OK 
            console.log(resultJSON.div_bokeh) //  -- YES OK 
            console.log(resultJSON.cdn_js) //  -- YES OK
            $('#second_bokehDiv').html(resultJSON.div_bokeh);
            $('#second_bokehDiv').html(resultJSON.js_bokeh);
        }, 
      })   
  };
</script>

Code for the Modal that i need to have the Bokeh bar Chart in :-

<div id="modal_bokeh_main" class="modal_bokeh_backdrop"> 
     <div class="modal_bokeh_content">
     <div class="modal_bokeh_header">
     <span class="modal_bokeh_close">&times;</span> 
     <h2 id = "dynamic_bokeh_header_text"> BOKEH BAR CHART </h2>
     </div>                                         
     <div class="modal_bokeh_body">
     <p id = "dynamic_bokeh_body_text1"> BOKEH BAR CHART </p>
     <div id ="first_bokehDiv">
      </div>
     <div id ="second_bokehDiv">
      </div>
   </div> 
 </div>
 </div>

https://cdn.bokeh.org/bokeh/release/bokeh-0.12.3.min.js

This is really old Bokeh version. You could have more luck getting support if you updated to the latest 1.1.0 version. Apparently this Bokeh version doesn't embed jQuery so I don't understand the first line Bokeh.$(function(){ and hence the cause of your error. I would remove it. — Tony

Rohit Dhankar Rohit Dhankar · Accepted Answer · 2019-04-19T08:48:56

The ERROR - "Uncaught TypeError: Bokeh.$ is not a function" .

Got resolved by embedding - bokeh-0.12.3.min.css and bokeh-0.12.3.min.js , within the First Bokeh DIV as seen below - this is not an ideal solution but works for now .

<div id ="first_bokehDiv">
<link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.3.min.css" type="text/css" />
<script type="text/javascript" src="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.3.min.js"></script>
 </div>

Also this error did not occur due to using an older version of Bokeh.

Django Bokeh - Uncaught TypeError: Bokeh.$ is not a function

1 Answers