Develop Reference

Load jQuery in snippet and add elements to blank page

Disclaimer. I am fairly new to JavaScript so if my workflow does not make sense at all or my vocabulary is yet not precise enough, please advise me of how I should do it differently.
Current Approach
I want to learn more about Javascript and external libraries. Thus, I created a snippet under the DevTools sources panel in Chrome, opened about:blank and executed the following code (which I copied and paste from different sources):
Code
(function(head) {
var newscript = document.createElement('script');
newscript.type = 'text/javascript';
newscript.async = true;
newscript.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js";
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(newscript);
})(document.getElementsByTagName('head'));
function jQueryReady() {
if (window.jQuery) {
jQuery.noConflict();
my_code(jQuery);
} else {
setTimeout(jQueryReady, 100);
}
}
jQueryReady();
function my_code($) {
console.log("OK");
$('head').append($('script', {
type : 'text/javascript',
async: true,
src : 'https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.js'
}));
$('head').append($('link', {
rel : 'stylesheet',
href: 'https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.css'
}));
}
Results
When I then look at the source code of about:blank, I see that the jQuery script is correctly inserted into the head, I see that the console shows OK, but neither the spectrum JavaScript nor the CSS is inserted into the head.
Questions
Why is the code not added to the HTML file? What do I need to change to make it work?
If I run teh code from my_code directly in teh console everything seems to work fine? Why?
What is a proper way of playing around with JavaScript without writing an own html file? Does the approach via snippet and about:blank make sense? I need to reload about:blank whenever I make changes to the snippet, so I guess there is a more elegant way to do so. Any tipps on how to do that better?

I believe it is because in jQuery, when you want to create new elements, it is necessary to wrap tag name in "<>" signs like this:
$('head').append($('<script>', {
type: 'text/javascript',
async: true,
src: 'https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.js'
}));
In my opinion it is good idea to try sites like jsfiddle.net or codepen.io, where at least you can add libraries like jQuery easier without writing additional importing scripts and it is easier to maintain.

How do I load an external file and make sure that it runs first in JSFiddle?

I have a JsFiddle here, and added Microsoft AJAX to be loaded through external JS/resource section. How can I tell whether or not my JS code is run after the AJAX file has finished loading?
Seems that the AJAX does not load either. :(
Here is the code in the JSFiddle:
Type.registerNamespace("Tutorial.Chapter1");
Tutorial.Chapter1.Person = function(firstName, lastName) {
this._firstName = firstName;
this._lastName = lastName;
};
Tutorial.Chapter1.Person.prototype = {
set_firstName: function(value) {
this._firstName = value;
},
get_firstName: function() {
return this._firstName;
},
set_lastName: function(value) {
this._lastName = value;
},
get_lastName: function() {
return this._lastName;
},
_firstName: "",
_lastName: "",
displayName: function() {
alert("Hi! " + this._firstName + " " + this._lastName);
}
};
Tutorial.Chapter1.Person.registerClass("Tutorial.Chapter1.Person", null);

The External Resources tab of jsFiddle is currently somewhat tricky and unstable to use.
The resources defined here are often not correctly included into the code. There seems to be an issue with the automatic recognition of JS and CSS resources. If this happens, the external resource is simply not added to the head section of the resulting code. You can check that by reviewing the source code of the Result frame of your jsFiddle. You will find that your MS AJAX resource is simply NOT mentioned in the resulting HTML code.
The correct recognition can actually be forced by adding a dummy value to the resource's URL like this (see –>jsFiddle docs for more info):
...&dummy=.js
Here is an example that shows how to add the external Google Maps API resource to a jsFiddle (mind the dummy parameter at the very end!):
https://maps.googleapis.com/maps/api/js?sensor=false&dummy=.js
Unfortunately this won't work for you as the MS AJAX URL will fail when additional parameters are appended.
A solution (and currently the safest way to load external resources) is to avoid the External Resources tab altogether and load external code manually in the first line(s) of jsFiddle's HTML window like this:
<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/3.5/MicrosoftAjax.js"></script>
Here is your jsFiddle modified to use that method: http://jsfiddle.net/rEzW5/12/
It actually does not do a lot (I did not check what is wrong with the rest of your code), but at least it does not throw JavaScript errors anymore.

Open "Add Resources" section and add the url of your external script...

#Jpsy's approach no longer seems to work (see my comment under his answer).
For me, adding the resource under External Resources also didn't work. (According to the Firefox Debugger, it couldn't find the resource).
The only way I was able to get an external bit of JavaScript code (in my case jquery.backstretch.js) to work, was to use Google to find a Fiddle which used this resource (and worked), then Fork this Fiddle and copy/paste all my code into the HTML, CSS and JavaScript panels. Ugh!

#clayRay, You absolutely went thru a code surgery. Just resolved that by mentioning external source in plain html which in my case is
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Using External Resources tab didn't help a bit...

Is there a max no. of XFBML Tags (fb:profile-pic...)

I recently seem to have reached a limit regarding the no. of XFBML-tags which are allowed per document/page. In particular, I had a page with 100+ fb:profile-pic elements:
<fb:profile-pic uid="..."/>
<fb:profile-pic uid="..."/>
...
When rendered & parsed, all fb-profile-pic's remain empty, no javascript errors whatsoever etc. If I reduce the XFBML elements to 66, everything works fine and the profile-images are rendered. On more XFBML-tag (67), and everything is gone. It's also not about the particular User-IDs (I've tried a different set, same result).
I'm using the latest JS SDK (http://connect.facebook.net/de_DE/all.js), obviously with xfbml:true on fbAsyncInit.
Do you have experienced similar limits, and is there a way around this?

Why not render img tags directly? I have a wonderful little php-helper for the profile-pic url:
public function profileImage($fbUid = 1, $type = "square") {
if (!in_array($type, array("square", "small", "normal", "large"))) {
$type = "square";
}
return "https://graph.facebook.com/$fbUid/picture?type=$type";
}
Call it directly with
<img src="<?=profileImage("100002012872577")?>" ...>

SWFObject fails to embed flash in IE

Been trying 4 hours to solve this out.
I've a really strange problem: SWFObject embeds flash good in all browsers except IE.
I printed the HTML of each outputted div into a textarea, and found out that in IE, SWFObject embeds the root "object" tag only, without any inner tags (such a param name="movie" value="myVal"), so I guess this is why I get "movie not loaded" in IE.
My code as follows:
window.embedFlash=function (properties)
{
swfobject.addDomLoadEvent(function ()
{
swfobject.createSWF(
{
data: properties.data,
width: properties.width||'100%',
height: properties.height||'100%'
},
{
allowScriptAccess: 'always',
allowFullScreen: 'true',
allowNetworking: properties.allowNetworking||'all',
flashvars: properties.flashvars||null,
wmode: properties.wmode||null,
menu: properties.menu||'false'
},properties.id);
});
};

Usually "movie not loaded" means Flash Player AVM instance has started, but the URL you provided can't be found.
Also, your SWF version may be out of sync with the Flash Player version in IE.
Check if you get any 404s and check if the compiled SWF version is runnable in the FP version installed to IE.

You're basically recreating the swfobject.embedSWF method, so I suggest reformatting your code to use swfobject.embedSWF, as it is widely supported and heavily tested. The only differences I see between your code and embedSWF are:
lack of version detection in your
code (embedSWF requires you to
specify a minimum version of Flash
Player
lack of expressinstall in your
code (this can be set to false in
embedSWF if you're not interested
your flashvars variable is probably
formatted as a string, whereas embedSWF
expects an object containing key/value pairs
swfobject.embedSWF gets invoked on domload by default, so you wouldn't need to write an ondomload handler
Here's a quickie reformat of your code. It will fail if your flashvars are sent as a string:
window.embedFlash=function (properties)
{
var flashvars = properties.flashvars||false;
var params = {
allowFullScreen: 'true',
allowNetworking: properties.allowNetworking||'all',
allowScriptAccess: 'always',
menu: properties.menu||'false',
wmode: properties.wmode||"window"
};
var attributes = {};
swfobject.embedSWF(properties.data,
properties.id,
properties.width||'100%',
properties.height||'100%',
"9",
false,//URL for expressinstall, if available
flashvars,
params,
attributes);
};

Javascript namespace and problem with IE7

I implemented a Javascript namespacing solution based on this answer to another stack overflow question: How do I declare a namespace in JavaScript?
Let's call this isigma-ns.js:
var ISIGMA = {
messages: {
noValidId: "No valid ID found",
reason: "Reason",
// etc...
},
language: "ca",
SIGN: 2,
PAUSE: 400,
params: {},
init: function(params) {
// etc...
},
delay: function(callback) {
// etc...
},
// etc...
signURL: function(cert, url) {
// etc...
}
};
I include this script in my page, plus other stuff:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Isigma Signature Widget</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<!-- Required javascript and styles for isigma widget-->
<script type="text/javascript" src="/isme/media/signwidget/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/isme/media/signwidget/isigma-ns.js"></script>
<script type="text/javascript">
$(function(){
$("#applet").isigmaSignatureApplet({
purpose: ISIGMA.SIGN,
url: the_url,
language: 'es'
});
});
</script>
...etc...
It works fine in Firefox, IE8, Chrome, Opera... but fails in IE7 with the message "ISIGMA is not defined" - referring to the line where I make a reference to ISIGMA.SIGN.
Any hints about what can be wrong here? Is there anything wrong with IE7 processing order of Javascript files? Any other guess?
Note: for a full reference, the whole thing is running in http://app.portasigma.com/isme/signwidget/iframe/ and the namespace JS file is really named http://app.portasigma.com/isme/media/signwidget/jquery-isigmaWidget.js

It is the comma after "Reason". See: http://jsbin.com/upiba5/2/edit
Edit: on your live site, the extra comma I see is after:
documentLockedByAnother: "This
document is currently locked by
another user, try again later",
var ISIGMA = {
messages: {
noValidId: "No valid ID found",
reason: "Reason"
// etc...
},
language: "ca",
SIGN: 2,
PAUSE: 400,
params: {},
init: function(params) {
// etc...
},
delay: function(callback) {
// etc...
},
// etc...
signURL: function(cert, url) {
// etc...
}
};

You need to remove the last comma after all the properties/methods you have defined.
older versions of IE choked on this.
var ISIGMA = {
messages: {
noValidId: "No valid ID found",
reason: "Reason",
// etc...
},
language: "ca",
SIGN: 2,
PAUSE: 400,
params: {},
init: function(params) {
// etc...
},
delay: function(callback) {
// etc...
},<====-- if this is the LAST property/method, you need to omit the comma.
// etc...
};
Update: another potential issue can arise from "self-closing" script tags. Be sure you have no external scripts referenced like this:
<script src="..."/><!--prone to parsing bugs/errors-->
vs.
<script src="..."></script><!--correct-->

You have two external scripts loading and then immediately run an inline script. Scripts can load asynchronously or even fail to load at all. It is possible for browsers to single task and complete loading one script before moving on to the next script and it is possible for them to run multiple concurrent requests and it is possible for them to wait until all external requests have completed before continuing parsing inline scripts; but you have little (if any) control over which of those options any specific browser decides to implement. I don't have IE7, so I cannot experiment to see if its action differs from IE8's. You should ensure that the 2nd script has fully loaded before running the inline script.