CODEWITHSUNDEEP
clojurescript
RStrad
RStrad

Reputation: 162

clojurescript dynamic script loading

I am relatively new to Clojurescript and have run into something that I am not quite sure what the problem is. I have a function in my clojurescript that adds a new script element to the document for loading the FB API for which the script never tries to even load. There is no activity for that resource. I have rewritten the example in javascript and it works. I have looked at the generated clojurescript code and it looks basically the same as the javascript code that I wrote. I have tried a few things but in the end nothing will get the browser to load the dynamic script via using ClojureScript.

My code is 

(ns wearthisorthat.client.fblogin
  (:require  [goog.net.XhrIo :as xhr]
             [cljs.reader :as cljrdr]
             [clojure.browser.repl :as repl]
             [domina.events :as ev]
             [domina :as d]
             [domina.css :as css]))

(defn load-fb-sdk [debug?]
  (let [ id "facebook-jssdk"
        debug-str (if debug? "/debug" "")
        ref (d/by-id "fb-script")
        _ (.log js/console "ref = " ref)
        parent (.-parent ref)
        el-id (d/by-id id)
        element (d/string-to-dom (str "<script id=" id " async"
                                      " src=//connect.facebook.net/en_US/all"
                                      debug-str ".js></script>"))
        _ (.log js/console element)]
    (when-not el-id (d/insert-before! ref element))))

(defn ^:export fbcb []
  (let [data {:appId "<myappid>",
              :channelUrl "<my-channel>",
              :status true,
              :cookie true,
              :xfbml true}]
    (.log js/console "RRRRRRRRRRR")
    (js/FB.init (clj->js data))))

;; Load the SDK's source Asynchronously
(.log js/console "RIGHT HERE")
(aset js/window "fbAsyncInit" fbcb)

(load-fb-sdk true)

My index.html (before the update from my cljs above)

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div id="fb-root"></div>
  <script id="fb-script"></script>
  <script type="text/javascript" src="js/wtot.js"></script>
</body>
</html>

After my cljs runs my document looks like this...

<!DOCTYPE html>
<!-- saved from url=(0037)http://localhost:3000/wtot/index.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
  <div id="fb-root"></div>
  <script id="facebook-jssdk" async src="//connect.facebook.net/en_US/all/debug.js"></script>
  <script id="fb-script"></script>
  <script type="text/javascript" src="./index_files/wtot.js"></script>

</body>
</html>

Google network traffic shows only the index.html and the wtot.js being loaded and not the debug.js (there are not error but no references in the log to try and load debug.js). If I make the dynamic script element to be static by copying and pasting the dynamic element above into my index.html, then the code works as expected. And as stated earlier, if I make this all in javascript including the dynamic addition of the script element, it all works. What am I missing?

Upvotes: 3

Views: 1501

Answers (1)

Denis Fuenzalida
Denis Fuenzalida

Reputation: 3346

Just an idea: I've seen a couple pages about adding scripts dynamically and they all create a new script and append it as a child of the <HEAD>, not the <BODY>:

  var head= document.getElementsByTagName('head')[0];
  var script= document.createElement('script');
  script.type= 'text/javascript';
  script.src= 'helper.js';
  head.appendChild(script);

Upvotes: 3

Related Questions