{"id":2826,"date":"2019-06-25T12:30:26","date_gmt":"2019-06-25T17:30:26","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=2826"},"modified":"2019-06-28T08:05:37","modified_gmt":"2019-06-28T13:05:37","slug":"jquery-how-to-detect-if-javascript-and-jquery-are-working-in-a-sandbox-environment","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2019\/06\/25\/jquery-how-to-detect-if-javascript-and-jquery-are-working-in-a-sandbox-environment\/","title":{"rendered":"jQuery: How to detect if JavaScript and jQuery are working in a sandbox environment"},"content":{"rendered":"\n<p>Recently I was working in a Piano template sandbox environment where I could edit HTML and CSS code to build a Piano template. This sandbox uses AngularJS, HTML, and CSS, but I wanted to see if it provided JavaScript and jQuery functionality so that I could enhance the template I was working on with some clickable animation.<\/p>\n\n\n\n<p>I found out that JavaScripts would work in most templates by placing it in a div called &#8220;custom-script&#8221;. For example: <code>&lt;div custom-script&gt;<\/code><\/p>\n\n\n\n<p>Then to confirm whether or not JavaScript is enabled, I added a <code>console.log()<\/code> to the top: <\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">console.log(\"JS enabled\")<\/pre>\n\n\n\n<p>Then I used this code to test whether jQuery is also installed. This not only confirms if jQuery is installed, it also tells me the version:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ Test to see if jQuery is enabled\nif (typeof(jQuery) == 'undefined') {\n   console.log(\"jQuery not enabled\")\n} else {\n   console.log(\"jQuery enabled!\", jQuery.fn.jquery)\n}<\/pre>\n\n\n\n<p>This is the code that tells me the actual jQuery version number: <code>jQuery.fn.jquery<\/code><\/p>\n\n\n\n<p>The complete code is:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div custom-script>\n    console.log(\"JS enabled\")\n\n    &lt;!-- Test to see if jQuery is enabled -->\n    if (typeof(jQuery) == 'undefined') {\n        console.log(\"jQuery not enabled\")\n    } else {\n        console.log(\"jQuery enabled!\", jQuery.fn.jquery)\n    }\n&lt;\/div><\/pre>\n\n\n\n<p>Which yields this in the console:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"186\" height=\"41\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/image-11.png\" alt=\"\" class=\"wp-image-2831\"\/><\/figure>\n\n\n\n<p><br>For more about piano see:<br><a href=\"https:\/\/docs.piano.io\/\">https:\/\/docs.piano.io\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Recently I was working in a Piano template sandbox environment where I could edit HTML and CSS code to build a Piano template. This sandbox uses AngularJS, HTML, and CSS, but I wanted to see if it provided JavaScript and jQuery functionality so that I could enhance the template I was working on with some &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2019\/06\/25\/jquery-how-to-detect-if-javascript-and-jquery-are-working-in-a-sandbox-environment\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">jQuery: How to detect if JavaScript and jQuery are working in a sandbox environment<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,128],"tags":[45,123,201],"class_list":["post-2826","post","type-post","status-publish","format-standard","hentry","category-javascript-language","category-jquery","tag-javascript","tag-jquery","tag-piano"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2826","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=2826"}],"version-history":[{"count":7,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2826\/revisions"}],"predecessor-version":[{"id":2835,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2826\/revisions\/2835"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=2826"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=2826"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=2826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}