Develop Reference

Not able to load dynamically the CDN of jquery, bootstrap, D3.js, knockout.js using jquery

Not able to load dynamically the CDN of jquery, bootstrap, D3.js, knockout.js using jquery. i am using jquerycdn variable to pass to the loadscript() when checkjquery() is false. But when i am passing still the jquery CDN is not loading. Same issue facing with the remaining files like bootstrap, D3.js, knockout.js etc. All these file CDN's are kept in one js file.
Please check the below code:-
this.jqueryCDN = "https://code.jquery.com/jquery-1.11.3.min.js"
Initialize.prototype.checkJQuery = function () {
if (window.jQuery) {
return true;
} else {
return false;
}
};
if (!this.checkJQuery ()) {
console.log("jquerynot available")
this.loadJQuery ();
if (!this.checkJQuery ()) {
throw "Error loading jquery"
}
} else {
console.log("jquery available")
}
Initialize.prototype.loadJQuery = function () {
// var js_code = atob(this.jqueryStr);
// eval(js_code);
this.loadScript(this.jqueryCDN);
};
Initialize.prototype.loadScript = function (src) {
var my_awesome_script = document.createElement('script');
my_awesome_script.setAttribute('src', src);
document.head.appendChild(my_awesome_script);
}

You need to give jQuery time to load before checking to see that it's loaded. An onload trigger would be better than timeout, but here's your code working.
function Initialize() {
var self = this;
this.jqueryCDN = "https://code.jquery.com/jquery-1.11.3.min.js"
if (!this.checkJQuery()) {
console.log("jquery not available")
this.loadJQuery();
setTimeout(function() {
if (!self.checkJQuery()) {
throw "Error loading jquery"
} else {
alert("jQuery loaded!");
}
}, 2500);
} else {
console.log("jquery available")
}
}
Initialize.prototype.checkJQuery = function() {
if (window.jQuery) {
return true;
} else {
return false;
}
};
Initialize.prototype.loadJQuery = function() {
// var js_code = atob(this.jqueryStr);
// eval(js_code);
this.loadScript(this.jqueryCDN);
};
Initialize.prototype.loadScript = function(src) {
var my_awesome_script = document.createElement('script');
my_awesome_script.setAttribute('src', src);
document.body.appendChild(my_awesome_script);
}
var i = new Initialize();
You might also look at this approach.

Function being used, when it isn't a function?

Battle.CreateInputs = function(json) {
if (json.Battle.Continue !== undefined) {
$('#attackBox').css('display', 'none');
$('#Continue').mousedown(function(e) {
Battle.PlaySound('die')
Battle.Continue($(this).attr('continue'), e);
return false;
});
} else if (json.Battle.Captcha !== undefined) {
$('#attackBox').css('display', 'none');
$('#CaptchaForm').submit(function(e) {
Battle.PlaySound('captcha')
Battle.SubmitCaptcha($('#Captcha').val(), e);
return false;
});
} else if (json.Battle.Restart !== undefined) {
$('#attackBox').css('display', 'none');
$('#Restart').click(function(e) {
Battle.PlaySound('coin')
Battle.Restart($(this).attr('restart'), e);
return false;
});
} else {
$('#attackBox').css('display', 'inline-block');
$('input').mousedown(function(e) {
Battle.PlaySound('hit')
Battle.Move($(this).attr('post_code'), e);
return false;
});
}};
So, this is the code that I'm having problems with. I always receive the error "Battle.PlaySound is not a function". Here is a link to the Javascript and the code snippet that I was using.
My Code - http://pastebin.com/BnHLaYN3
Site Javascript - http://pastebin.com/0NcyWvGn

Battle.PlaySound is indeed not a function. As per your code:
Battle.PlaySound = {};
You are defining it as an object.
Should be something like this instead:
Battle.PlaySound = function(sound) {
//Do something with sound here.
};

window.document in IE

I have this js to show a popup:
oauthpopup.js:
popup.show = function(options) {
this.destination_ = options.destination;
this.windowOptions_ = options.windowOptions;
this.closeCallback_ = options.closeCallback;
this.win_ = null;
this.win_ = window.open(this.destination_, "_blank", this.windowOptions_);
if (this.win_) {
// Poll every 100ms to check if the window has been closed
var self = this;
var closure = function() {
self.checkClosed_();
};
this.timer_ = window.setInterval(closure, 100);
}
return false;
};
popup.checkClosed_ = function() {
if ((!this.win_) || this.win_.closed) {
this.handleApproval_();
}
};
popup.handleApproval_ = function() {
if (this.timer_) {
window.clearInterval(this.timer_);
this.timer_ = null;
}
if (this.win_) {
this.win_.close();
//this.win_ = null;
}
try {
console.log(this.win_.document);
if (this.win_.document.scripts[0].innerHTML === 'window.close();') {
this.closeCallback_();
};
} catch (ex) { }
this.win_ = null;
return false;
};
page script
popup.show({destination: '/auth/' + channel, windowOptions: 'location=0,status=0',
closeCallback:function() {
switchView(divToShow);
}
});
function switchView(divtoShow) {
$("#" + divtoShow).addClass("hidden");
$("#" + divtoShow).removeClass("hidden");
};
It works perfectly in Chrome and Firefox, but in IE this line: this.win_.document.scripts[0].innerHTML doesn't works, I put this in a alert() but nothing happens.
EDIT:
The script tag 'window.close();' is rendered from rails controller in a html page.
The html page close the popup when is rendered, the popup is for twitter and google authentication.
How I can execute the callback after the page is rendered and it is closed?

Error: 'History.Adapter' is null or not an object

js and all works fine in all browsers except IE8.
I've next error
Error: 'History.Adapter' is null or not an object
My code:
#Scripts.Render("~/bundles/history")
<script type="text/javascript">
var History = window.History;
$(document).ready(function () {
change(1, '#catalog');
History.Adapter.bind(window, 'statechange', function () {
try {
var State = History.getState();
$('#Products').load(State.url);
} catch (e) {
}
});
function change(id, ItemMenu) {
var url = $('#' + id).val();
try
{
History.pushState({}, null, url);
}
catch(e)
{
}
}
</script>
and scripts:
bundles.Add(new ScriptBundle("~/bundles/history").Include(
"~/Scripts/History/history.adapter.jquery.js",
"~/Scripts/History/history.html4.js",
"~/Scripts/History/history.js",
"~/Scripts/History/json2.js"
));

For correct work in IE 8 you need to place initialization history.js and History.Adapter.bind inside $(document).ready(...)
This will work in all browsers...and IE 8 to
#Scripts.Render("~/bundles/history")
<script type="text/javascript">
$(document).ready(function () {
var History = window.History;
History.Adapter.bind(window, 'statechange', function () {
try {
var State = History.getState();
$('#Products').load(State.url);
} catch (e) {
}
});
});
function change(id, ItemMenu) {
var url = $('#' + id).val();
try
{
History.pushState({}, null, url);
}
catch(e)
{
}
}
</script>

javascript attachEvent within loop

I'm using the code below within a loop. It works so long as I'm not using IE.
var remove = document.createElement("input");
remove.type = "button";
remove.value = "x";
if (remove.addEventListener) {
remove.addEventListener("click", (function(item_id) { return function() { remove_from_cart(item_id); } })(item_id), false);
} else {
remove.attachEvent("click", (function(item_id) { return function() { remove_from_cart(item_id); } })(item_id));
}

IE needs to have the on when describing the event so this is what you need.
remove.attachEvent("onclick", (function(item_id) { return function() { remove_from_cart(item_id); } })(item_id));
}