We Keep Coding

How to differentiate click+drag vs double click+drag

My project needs to differentiate single click, double click, click+drag, and double click+drag. I can already differentiate the first 3 events now, but no idea how to detect double click+drag. Any idea?
var holdStarter = null;
var holdDelay = 500;
var holdActive = false;
function onMouseDownEssence() {
holdStarter = setTimeout(function() {
holdStarter = null;
holdActive = true;
console.log("click and dragging ");
}, holdDelay);
}
function onMouseUpEssence(el) {
if (holdStarter) {
clearTimeout(holdStarter);
if (el.getAttribute("data-dblclick") == null) {
el.setAttribute("data-dblclick", 1);
setTimeout(
function() {
if (el.getAttribute("data-dblclick") == 1) {
console.log("single clicked ");
}
el.removeAttribute("data-dblclick");
}, 300);
} else {
el.removeAttribute("data-dblclick");
console.log("double clicked ");
}
} else if (holdActive) {
console.log("click and drag done");
holdActive = false;
}
}

I removed one timeout and added a variable dragTarget to keep track of the dragged element.
var holdStarter = null;
var dblDelay = 300;
var holdDelay = 500;
var holdActive = false;
var dragTarget = null;
var dbl = "data-dblclick";
window.addEventListener('mousedown',function(e){
dragTarget = e.target;
holdStarter = new Date().valueOf();
});
window.addEventListener('mouseup',function(e){
var el = e.target;
var holdActive = (new Date().valueOf() - holdStarter) > holdDelay;
if (holdActive) {
if (el.getAttribute(dbl) == null) {
console.log("drag done");
} else {
console.log("double drag done");
el.removeAttribute(dbl);
}
holdActive = false;
} else if (el.getAttribute(dbl) == null) {
el.setAttribute(dbl, 1);
setTimeout(function() {
if (el.getAttribute(dbl) == 1 && !dragTarget) {
console.log("single clicked ");
el.removeAttribute(dbl);
}
}, dblDelay);
} else {
console.log("double clicked");
el.removeAttribute(dbl);
}
dragTarget = null;
});

How to call function inside of other function

I've stuck while calling close function in below code. This program create a new content respect to weekdays. After putting on to necessary place, if user want to delete the content the close.setSttribute("onclick", "removeItem(this,event)"); function have to invoke. But in my code something gone wrong. Please help to fix to invoke that function.
function addClick() {
var weekday = document.getElementById("weekdaysModal").value;
var name = document.getElementById("fname").value;
var itemContent = document.getElementById("textArea").value;
var divItem = document.createElement("div");
divItem.setAttribute("class", "divItem");
var close = document.createElement("img");
close.setAttribute("class", "close");
close.setAttribute("src", "./img/delete.png");
close.setAttribute("onclick", "removeItem(this, event)");
close.setAttribute("width", "20px");
close.setAttribute("height", "20px");
console.log(close);
divItem.appendChild(close);
var textDiv = document.createElement('div');
textDiv.setAttribute("class", "name");
textDiv.innerHTML = name;
divItem.appendChild(textDiv);
var content = document.createElement('div');
content.setAttribute("class", "itemContent");
content.innerHTML = itemContent;
content.style.display = 'none';
divItem.appendChild(content);
if (weekday == "monday") {
// divItem.setAttribute("index", monIndex);
divItem.style.background = "#d4f442";
document.getElementsByClassName('displayArea_mon')[0].appendChild(divItem);
} else if (weekday == "tuesday") {
// divItem.setAttribute("index", tueIndex);
divItem.style.background = "#65f441";
document.getElementsByClassName('displayArea_tue')[0].appendChild(divItem);
} else if (weekday == "wednesday") {
console.log("wed");
// divItem.setAttribute("index", wedIndex);
divItem.style.background = "#65f441";
document.getElementsByClassName('displayArea_wed')[0].appendChild(divItem);
} else if (weekday == "thursday") {
// divItem.setAttribute("index", thuIndex);
divItem.style.background = "#65f441";
document.getElementsByClassName('displayArea_thu')[0].appendChild(divItem);
} else if (weekday == "friday") {
// divItem.setAttribute("index", friIndex);
divItem.style.background = "#65f441";
document.getElementsByClassName('displayArea_fri')[0].appendChild(divItem);
} else {
console.log("Error");
}
closeButton();
console.log(name + content + weekday);
}
function removeItem() {
var x = getElementsByClassName('divItem');
x.delete(x.selectedIndex);
}

Checkbox enable/disable and check/uncheck and also button text change with a single button click

I have a button and the button can have two labels - Activate and Deactivate. If I click on the button, then the button labels interchange, i.e. if I click on the button and the current text is Activate, then the text is switched to Deactivate and vice versa. I want to do two more things at a time on this button click -
I have a checkbox named IsMandatory. When I click on the button, if it changes from Activate to Deactivate, then the IsMandatory checkbox becomes disabled and vice versa.
Simultaneously, if the Ismandatory checkbox becomes disabled, it will be unchecked. If the checkbox becomes enabled, it becomes checked.
How can I achieve this???
So far I have done this:
<input type="hidden" id="stat" data-bind="value:IsActive" />
<input type="button" id="butt" onclick="change();" />
<input type="hidden" id="stat2" data-bind="value: IsMandatory" />
<input type="checkbox" id="chckbox" data-bind="checked: IsMandatory" />
<script type="text/javascript">
$(function () {
var stat = document.getElementById("stat").value;
var stat2 = document.getElementById("stat2").value;
//alert(stat);
if (stat == 1) {
document.getElementById("butt").value = "Activate";
document.getElementById("chckbox").disabled = false;
document.getElementById("chckbox").checked = true;
stat2 = 1;
}
else {
document.getElementById("butt").value = "Deactivate";
document.getElementById("chckbox").disabled = true;
document.getElementById("chckbox").checked = false;
stat2 = 0;
}
//if (stat2 == 1)
//{
// document.getElementById("chckbox").checked = false;
//}
//else
//{
// document.getElementById("chckbox").disabled = true;
//}
});
function activeStatus(IsActive) {
//alert(ActiveStatus);
if (IsActive == 1) {
//document.getElementById("chckbox").disabled = false;
return "Activate";
}
else {
//document.getElementById("chckbox").disabled = true;
return "Deactivate";
}
}
function change() {
var butt = document.getElementById("butt").value;
if (butt == 'Deactivate') {
document.getElementById("butt").value = "Activate";
document.getElementById("chckbox").disabled = false;
document.getElementById("chckbox").checked = true;
document.getElementById("stat").value = 1;
document.getElementById("stat2").value = 1;
}
else {
document.getElementById("butt").value = "Deactivate";
document.getElementById("chckbox").disabled = true;
document.getElementById("chckbox").checked = false;
document.getElementById("stat").value = 0;
document.getElementById("stat2").value = 0;
}
}
</script>
EDIT-1: Additional JavaScript Code:
var urlInputConfiguration = "/InputConfiguration";
var url = window.location.pathname;
var Id = url.substring(url.lastIndexOf('/') + 1);
$(function () {
$.ajaxSetup({
// Disable caching of AJAX responses
cache: false
});
var InputConfiguration = function (InputConfiguration) {
var self = this;
self.Id = ko.observable(InputConfiguration ? InputConfiguration.Id : 0).extend({ required: true });
self.SectionName = ko.observable(InputConfiguration ? InputConfiguration.SectionName : '');
self.SectionText = ko.observable(InputConfiguration ? InputConfiguration.SectionText : '');
self.IsActive = ko.observable(InputConfiguration ? InputConfiguration.IsActive : 1);
self.IsMandatory = ko.observable(InputConfiguration ? InputConfiguration.IsMandatory : 1);
};
var InputConfigurationCollection = function () {
var self = this;
//if ProfileId is 0, It means Create new Profile
if (Id == 0) {
self.InputConfiguration = ko.observable(new InputConfiguration());
}
else {
$.ajax({
url: urlInputConfiguration + '/GetInputConfigurationById/' + Id,
async: false,
dataType: 'json',
success: function (json) {
self.InputConfiguration = ko.observable(new InputConfiguration(json));
}
});
}
self.InputConfigurationErrors = ko.validation.group(self.InputConfiguration());
self.saveInputConfiguration = function () {
//self.Country = ko.observable(new Country());
var isValid = true;
if (self.InputConfigurationErrors().length != 0) {
self.InputConfigurationErrors.showAllMessages();
isValid = false;
}
// alert(JSON.stringify(ko.toJS(self.Country())));
if (isValid) {
//self.InputConfiguration().IsMandatory = document.getElementById("stat2").value;
self.InputConfiguration().IsActive = document.getElementById("stat").value;
var activevalue = self.InputConfiguration().IsActive;
if (activevalue == 1)
{
document.getElementById("chckbox").disabled = false;
//document.getElementById("chckbox").checked = true;
self.InputConfiguration().IsMandatory = document.getElementById("stat2").value;
}
else
{
document.getElementById("chckbox").disabled = true;
//document.getElementById("chckbox").checked = false;
self.InputConfiguration().IsMandatory = document.getElementById("stat2").value;
}
$.ajax({
type: (Id > 0 ? 'PUT' : 'POST'),
cache: false,
dataType: 'json',
url: urlInputConfiguration + (Id > 0 ? '/UpdateInputConfigurationInformation?id=' + Id : '/SaveInputConfigurationInformation'),
data: JSON.stringify(ko.toJS(self.InputConfiguration())),
contentType: 'application/json; charset=utf-8',
async: false,
success: function (data) {
alert("Case Input Configuration saved successfully.");
window.location.href = '/InputConfiguration';
},
error: function (err) {
var err = JSON.parse(err.responseText);
var errors = "";
for (var key in err) {
if (err.hasOwnProperty(key)) {
errors += key.replace("InputConfiguration.", "") + " : " + err[key];
}
}
$("<div></div>").html(errors).dialog({ modal: true, title: JSON.parse(err.responseText).Message, buttons: { "Ok": function () { $(this).dialog("close"); } } }).show();
},
complete: function () {
}
});
}
};
};
var InputConfigurationsViewModel = function () {
var self = this;
var url = "/InputConfiguration/GetAllInputConfiguration";
var refresh = function () {
$.getJSON(url, {}, function (data) {
self.InputConfigurations(data);
});
};
// Public data properties
self.InputConfigurations = ko.observableArray([]);
// Public operations
self.createInputConfiguration = function () {
window.location.href = '/InputConfiguration/InputConfigurationCreateEdit/0';
};
self.editInputConfiguration = function (inputConfiguration) {
//alert(country.CountryID);
window.location.href = '/InputConfiguration/InputConfigurationCreateEdit/' + inputConfiguration.Id;
};
self.removeInputConfiguration = function (inputConfiguration) {
// First remove from the server, then from the UI
if (confirm("Are you sure you want to delete this profile?")) {
var id = customerProfileConfiguration.Id;
$.ajax({ type: "DELETE", url: 'InputConfiguration/DeleteInputConfiguration/' + id })
.done(function () { self.CustomerProfileConfigurations.remove(inputConfiguration); });
}
}
refresh();
};
ko.applyBindings(new InputConfigurationsViewModel(), document.getElementById("inputconfigurationlist"));
ko.applyBindings(new InputConfigurationCollection(), document.getElementById("inputconfiguration_edit"));
});
var clone = (function () {
return function (obj) {
Clone.prototype = obj;
return new Clone()
};
function Clone() { }
}());
I can't bind the value of IsMandatory, although check/uncheck along with enable/disable is working fine when I click the button. Also, while my button text is Activate, IsActive value is bound as 1, and when my button text is Deactivate, IsActive value is bound as 0. When checkbox is checked, IsMandatory value should have been 1, when checkbox is unchecked, IsMAndatory value should have been 0.

Binding had to be used by force, I tried to use knockout but that's not actually helping.
So first of all, when I get the button value, without clicking it, by using document.getElementById and keeping it inside a variable stat, I had to make sure that if stat = 1, then another variable stat2 which has the value from the checkbox becomes 1 as well. Next, when stat2 = 1, checkbox will be checked. Similar thing was done in the else statement when stat = 0. So now stat2 = 0, and checkbox is unchecked.
if (stat == 1)
{
document.getElementById("butt").value = "Activate";
document.getElementById("chckbox").disabled = false;
stat2 = 1;
if (stat2 == 1) {
document.getElementById("chckbox").checked = true;
}
else {
document.getElementById("chckbox").disabled = false;
}
}
else
{
document.getElementById("butt").value = "Deactivate";
document.getElementById("chckbox").disabled = true;
stat2 = 0;
if (stat2 == 0) {
document.getElementById("chckbox").checked = false;
}
else {
document.getElementById("chckbox").disabled = true;
}
}
Next, the change is incorporated inside the function change(). That means when I click the button, then the change() function is called. Inside it, I had to make sure that if Deactivate becomes Activate, then document.getElementById("stat2").value becomes 1 and if 1, then checkbox should be checked. Reverse would happen if we change from Activate to Deactivate.
function change() {
var butt = document.getElementById("butt").value;
if (butt == 'Deactivate')
{
document.getElementById("butt").value = "Activate";
document.getElementById("chckbox").disabled = false;
document.getElementById("stat").value = 1;
document.getElementById("stat2").value = 1;
if ((document.getElementById("stat2").value) == 1)
{
document.getElementById("chckbox").checked = true;
}
else
{
document.getElementById("chckbox").checked = false;
}
}
else
{
document.getElementById("butt").value = "Deactivate";
document.getElementById("chckbox").disabled = true;
document.getElementById("chckbox").checked = false;
document.getElementById("stat").value = 0;
document.getElementById("stat2").value = 0;
if ((document.getElementById("stat2").value) == 0)
{
document.getElementById("chckbox").checked = false;
}
else
{
document.getElementById("chckbox").checked = true;
}
}
}
Finally, I'm force binding this value of the checkbox inside my IsMandatory property, which is inside my js file. IsMandatory property is the property that I declared in the view model for checkbox. IsActive is the property for button. Whenever IsActive is 1, then I enable the checkbox and then I take the value from my checkbox by using document.getElementById. If value of checkbox = 1, then IsMandatory becomes 1, else IsMandatory becomes 0.
self.InputConfiguration().IsActive = document.getElementById("stat").value;
self.InputConfiguration().IsMandatory = document.getElementById("stat2").value;
var activevalue = self.InputConfiguration().IsActive;
var check = self.InputConfiguration().IsMandatory;
if (activevalue == 1)
{
document.getElementById("chckbox").disabled = false;
//document.getElementById("chckbox").checked = true;
check = 1;
if (check == 1) {
self.InputConfiguration().IsMandatory = 1;
}
else
{
self.InputConfiguration().IsMandatory = 0;
}
}
else
{
document.getElementById("chckbox").disabled = true;
check = 0;
//document.getElementById("chckbox").checked = false;
if (check == 0) {
self.InputConfiguration().IsMandatory = 0;
}
else
{
self.InputConfiguration().IsMandatory = 1;
}
}

Can two bookmarklets and a Greasemonkey script be combined into one bookmarklet? If so, how?

If this question is totally unsuitable, please forgive me. I don't know anything about programming. I should learn Javascript, I know, but it is a bit difficult for a total layman.
I have two bookmarklets and one userscript that, together, do what I need; but I need to click, wait, and click. Could they all be combined into a single bookmarklet? This is for Firefox 5, on Windows XP.
The first bookmarklet takes all links on a page that point to images and displays all these images in a single page in a new tab:
javascript:(function(){function%20I(u){var%20t=u.split('.'),e=t[t.length-1].toLowerCase();return%20{gif:1,jpg:1,jpeg:1,png:1,mng:1}[e]}function%20hE(s){return%20s.replace(/&/g,'&').replace(/>/g,'>').replace(/</g,'<').replace(/"/g,'"');}var%20q,h,i,z=open().document;z.write('<p>Images%20linked%20to%20by%20'+hE(location.href)+':</p><hr>');for(i=0;q=document.links[i];++i){h=q.href;if(h&&I(h))z.write('<p>'+q.innerHTML+'%20('+hE(h)+')<br><img%20src="'+hE(h)+'">');}z.close();})()
Then the userscript kicks in, which changes the title of the page to include [Page loaded]:
// ==UserScript==
// #name Add "loaded" to title if page is loaded
// #namespace my
// #description Indicate if a page is loaded
// #include *
// ==/UserScript==
window.addEventListener(
'load',
function (e) {
document.title += " - [Page loaded]";
},
false);
Lastly, I click the second bookmarklet, which removes all text and all images smaller than a certain size from the page, and gives it a black background. It'd like this part to kick in only after all images have been loaded (hence the "loaded" title from the userscript).
I have to put this in in-line code, because the other methods seemed to fail (neither the code button nor blockquote did anything). It would be awesome if someone could help me out! I couldn't write a single line of Javascript myself and have no idea what to do.
function wrap(image, href) {
var img = document.createElement('img');
var div = document.createElement('div');
img.src = image.src;
var node = image.parentNode;
if (!href) {
div.appendChild(img);
} else {
var a = document.createElement('a');
a.href = href;
a.appendChild(img);
div.appendChild(a);
}
return div;
}
function findNext(document) {
var res = document.evaluate('//a[#rel='
next ']', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
if (res.singleNodeValue) {
return res.singleNodeValue.href;
} else {
return null;
}
}
if ('scrollMaxY' in window) {
function getScrollMaxY() {
return window.scrollMaxY;
}
} else {
function getScrollMaxY() {
return document.body.scrollHeight - window.innerHeight;
}
}
function streamify() {
var contentDiv = document.createElement('div');
var imageDiv = document.createElement('div');
var moreButton = document.createElement('input');
var style = document.createElement('style');
var iframe = document.createElement('iframe');
var errorSpan = document.createElement('span');
var retryButton = document.createElement('input');
var currentPageDiv = document.createElement('div');
var currentPageLink = document.createElement('a');
var nextUrl = findNext(document);
var occured = {};
var images = [];
var loadTimer = null;
var scrolledToBottom = false;
function extract(elem, href, images) {
switch (elem.localName) {
case 'a':
href = elem.href;
break;
case 'img':
if (!(elem.src in occured) && elem.offsetWidth > 250 && elem.offsetHeight > 300) {
images.push(wrap(elem));
occured[elem.src] = true;
}
}
var child = elem.firstElementChild;
while (child) {
extract(child, href, images);
child = child.nextElementSibling;
}
}
function loadNext() {
if (loadTimer !== null) {
window.clearTimeout(loadTimer);
}
if (nextUrl) {
loadTimer = window.setTimeout(function () {
errorSpan.style.display = '';
loadTimer = null;
}, 30000);
iframe.src = nextUrl;
}
}
style.type = 'text/css';
style.appendChild(document.createTextNode('body {background-color: black;color: white;}a {color: white;font-weight: bold;text-decoration: none;}a:hover {text-decoration: underline;}#greasemonkey-image-stream-content {text-align: center;}#greasemonkey-image-stream-content > div > div {margin-top: 2em;margin-bottom: 2em;}#greasemonkey-image-stream-content input {padding: 0.5em;font-weight: bold;}'));
contentDiv.id = 'greasemonkey-image-stream-content';
currentPageLink.appendChild(document.createTextNode('current page'));
currentPageLink.href = window.location.href;
currentPageDiv.appendChild(currentPageLink);
moreButton.type = 'button';
moreButton.value = 'More';
moreButton.disabled = true;
function handleMore() {
currentPageLink.href = iframe.src;
scrolledToBottom = false;
errorSpan.style.display = 'none';
moreButton.disabled = true;
for (var i = 0; i < images.length; ++i) {
imageDiv.appendChild(images[i]);
}
images = [];
loadNext();
}
moreButton.addEventListener('click', handleMore, false);
retryButton.type = 'button';
retryButton.value = 'Retry';
retryButton.addEventListener('click', function (event) {
loadNext();
errorSpan.style.display = 'none';
}, false);
errorSpan.style.fontWeight = 'bold';
errorSpan.style.color = 'red';
errorSpan.style.display = 'none';
errorSpan.appendChild(document.createTextNode(' Load Error '));
errorSpan.appendChild(retryButton);
iframe.style.width = '0px';
iframe.style.height = '0px';
iframe.style.visibility = 'hidden';
iframe.addEventListener('load', function (event) {
if (loadTimer !== null) {
window.clearTimeout(loadTimer);
}
errorSpan.style.display = 'none';
nextUrl = findNext(iframe.contentDocument);
extract(iframe.contentDocument.body, null, images);
if (images.length == 0 && nextUrl) {
loadNext();
moreButton.disabled = true;
} else {
moreButton.disabled = !nextUrl && images.length == 0;
if (scrolledToBottom && (nextUrl || images.length > 0)) {
handleMore();
}
}
}, false);
extract(document.body, null, images);
for (var i = 0; i < images.length; ++i) {
imageDiv.appendChild(images[i]);
}
images = [];
contentDiv.appendChild(style);
contentDiv.appendChild(currentPageDiv);
contentDiv.appendChild(imageDiv);
contentDiv.appendChild(moreButton);
contentDiv.appendChild(errorSpan);
contentDiv.appendChild(iframe);
var elem = document.documentElement.firstElementChild;
while (elem) {
switch (elem.localName) {
case 'head':
var child = elem.firstElementChild;
while (child) {
var next = child.nextElementSibling;
if (child.localName != 'title') {
elem.removeChild(child);
}
child = next;
}
break;
case 'body':
while (elem.firstChild) {
elem.removeChild(elem.firstChild);
}
}
elem = elem.nextElementSibling;
}
window.addEventListener('scroll', function (event) {
if (window.scrollY >= getScrollMaxY()) {
scrolledToBottom = true;
moreButton.click();
}
}, false);
document.body.appendChild(contentDiv);
loadNext();
}
streamify();
void(0)

(function(){
var a=Array.filter(document.getElementsByTagName('a'),function(e){
var h=e.href.split('.').pop().toLowerCase();
return {gif:1,jpg:1,jpeg:1,png:1,mng:1}[h];
}),b=document.getElementsByTagName('body')[0],i=0,l=a.length;
b.innerHTML='';
b.style.background='#000';
b.style.color='#ddd'
for(i;i<l;i++){
var t=a[i].href,p=document.createElement('img'),s=document.createElement('div');
s.innerHTML=t;
p.src=t;
b.appendChild(p);
b.appendChild(s);
}
})()
Here it is compressed
javascript:(function(){var c=Array.filter(document.getElementsByTagName("a"),function(a){return{gif:1,jpg:1,jpeg:1,png:1,mng:1}[a.href.split(".").pop().toLowerCase()]}),a=document.getElementsByTagName("body")[0],b=0,g=c.length;a.innerHTML="";a.style.background="#000";a.style.color="#ddd";for(b;b<g;b++){var d=c[b].href,e=document.createElement("img"),f=document.createElement("div");f.innerHTML=d;e.src=d;a.appendChild(e);a.appendChild(f)}})();
One that waits for each image to load. Added error detection.
(function(){
var a=Array.filter(document.getElementsByTagName('a'),function(e){
return {gif:1,jpg:1,jpeg:1,png:1,mng:1}[e.href.split('.').pop().toLowerCase()];
}),b=document.getElementsByTagName('body')[0],i=0,l=a.length;
b.innerHTML='';
b.style.background='#000';
b.style.color='#ddd'
add(0);
function add(i){
var img=new Image(),t=a[i].href,p=document.createElement('img'),s=document.createElement('div');
img.src=t;
img.onload=function(){
s.innerHTML=t;
p.src=t;
b.appendChild(p);
b.appendChild(s);
++i<a.length?add(i):'';
};
img.onerror=function(){
++i<a.length?add(i):'';
};
}
})()
And the minified version.
javascript:(function(){function d(b){var e=new Image,c=f[b].href,g=document.createElement("img"),h=document.createElement("div");e.src=c;e.onerror=function(){++b<f.length&&d(b)};e.onload=function(){h.innerHTML=c;g.src=c;a.appendChild(g);a.appendChild(h);++b<f.length&&d(b)}}var f=Array.filter(document.getElementsByTagName("a"),function(a){return{gif:1,jpg:1,jpeg:1,png:1,mng:1}[a.href.split(".").pop().toLowerCase()]}),a=document.getElementsByTagName("body")[0];a.innerHTML="";a.style.background="#000";a.style.color="#ddd";d(0)})();
Here is some test HTML
<a href='http://mozcom-cdn.mozilla.net/img/covehead/about/logo/download/logo-only-preview.png'>Firefox</a>
<a href='http://ie.microsoft.com/testdrive/Graphics/IEBeatz/assets/ie-logo-small.png'>IE</a>
<a href='http://code.google.com/tv/images/chrome-logo.png'>Chrome</a>
I did not add limiter on size of images because I was not sure if it was necessary and I wasn't sure what size limit you wanted.

Javascript in asp .Net

I'm getting WebResource error in my asp.Net page:
var __pendingCallbacks = new Array();
Microsoft JScript runtime error: 'Array' is undefined
I have no idea what might cause this to happen. Isn't Array part of Javascript itself? Any help would be appreciated.
EDIT
The problem is that this isn't code that I wrote, it's built into the page structure in asp.Net.
EDIT
The problem only occurs in IE9 and only when run in IE9 mode (not compatibility)
Code:
(This is dynamically generated code, sorry for the length. Problem is about halfway down)
function WebForm_PostBackOptions(eventTarget, eventArgument, validation, validationGroup, actionUrl, trackFocus, clientSubmit) {
this.eventTarget = eventTarget;
this.eventArgument = eventArgument;
this.validation = validation;
this.validationGroup = validationGroup;
this.actionUrl = actionUrl;
this.trackFocus = trackFocus;
this.clientSubmit = clientSubmit;
}
function WebForm_DoPostBackWithOptions(options) {
var validationResult = true;
if (options.validation) {
if (typeof(Page_ClientValidate) == 'function') {
validationResult = Page_ClientValidate(options.validationGroup);
}
}
if (validationResult) {
if ((typeof(options.actionUrl) != "undefined") && (options.actionUrl != null) && (options.actionUrl.length > 0)) {
theForm.action = options.actionUrl;
}
if (options.trackFocus) {
var lastFocus = theForm.elements["__LASTFOCUS"];
if ((typeof(lastFocus) != "undefined") && (lastFocus != null)) {
if (typeof(document.activeElement) == "undefined") {
lastFocus.value = options.eventTarget;
}
else {
var active = document.activeElement;
if ((typeof(active) != "undefined") && (active != null)) {
if ((typeof(active.id) != "undefined") && (active.id != null) && (active.id.length > 0)) {
lastFocus.value = active.id;
}
else if (typeof(active.name) != "undefined") {
lastFocus.value = active.name;
}
}
}
}
}
}
if (options.clientSubmit) {
__doPostBack(options.eventTarget, options.eventArgument);
}
}
var __pendingCallbacks = new Array();
var __synchronousCallBackIndex = -1;
function WebForm_DoCallback(eventTarget, eventArgument, eventCallback, context, errorCallback, useAsync) {
var postData = __theFormPostData +
"__CALLBACKID=" + WebForm_EncodeCallback(eventTarget) +
"&__CALLBACKPARAM=" + WebForm_EncodeCallback(eventArgument);
if (theForm["__EVENTVALIDATION"]) {
postData += "&__EVENTVALIDATION=" + WebForm_EncodeCallback(theForm["__EVENTVALIDATION"].value);
}
var xmlRequest,e;
try {
xmlRequest = new XMLHttpRequest();
}
catch(e) {
try {
xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {
}
}
var setRequestHeaderMethodExists = true;
try {
setRequestHeaderMethodExists = (xmlRequest && xmlRequest.setRequestHeader);
}
catch(e) {}
var callback = new Object();
callback.eventCallback = eventCallback;
callback.context = context;
callback.errorCallback = errorCallback;
callback.async = useAsync;
var callbackIndex = WebForm_FillFirstAvailableSlot(__pendingCallbacks, callback);
if (!useAsync) {
if (__synchronousCallBackIndex != -1) {
__pendingCallbacks[__synchronousCallBackIndex] = null;
}
__synchronousCallBackIndex = callbackIndex;
}
if (setRequestHeaderMethodExists) {
xmlRequest.onreadystatechange = WebForm_CallbackComplete;
callback.xmlRequest = xmlRequest;
xmlRequest.open("POST", theForm.action, true);
xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
xmlRequest.send(postData);
return;
}
callback.xmlRequest = new Object();
var callbackFrameID = "__CALLBACKFRAME" + callbackIndex;
var xmlRequestFrame = document.frames[callbackFrameID];
if (!xmlRequestFrame) {
xmlRequestFrame = document.createElement("IFRAME");
xmlRequestFrame.width = "1";
xmlRequestFrame.height = "1";
xmlRequestFrame.frameBorder = "0";
xmlRequestFrame.id = callbackFrameID;
xmlRequestFrame.name = callbackFrameID;
xmlRequestFrame.style.position = "absolute";
xmlRequestFrame.style.top = "-100px"
xmlRequestFrame.style.left = "-100px";
try {
if (callBackFrameUrl) {
xmlRequestFrame.src = callBackFrameUrl;
}
}
catch(e) {}
document.body.appendChild(xmlRequestFrame);
}
var interval = window.setInterval(function() {
xmlRequestFrame = document.frames[callbackFrameID];
if (xmlRequestFrame && xmlRequestFrame.document) {
window.clearInterval(interval);
xmlRequestFrame.document.write("");
xmlRequestFrame.document.close();
xmlRequestFrame.document.write('<html><body><form method="post"><input type="hidden" name="__CALLBACKLOADSCRIPT" value="t"></form></body></html>');
xmlRequestFrame.document.close();
xmlRequestFrame.document.forms[0].action = theForm.action;
var count = __theFormPostCollection.length;
var element;
for (var i = 0; i < count; i++) {
element = __theFormPostCollection[i];
if (element) {
var fieldElement = xmlRequestFrame.document.createElement("INPUT");
fieldElement.type = "hidden";
fieldElement.name = element.name;
fieldElement.value = element.value;
xmlRequestFrame.document.forms[0].appendChild(fieldElement);
}
}
var callbackIdFieldElement = xmlRequestFrame.document.createElement("INPUT");
callbackIdFieldElement.type = "hidden";
callbackIdFieldElement.name = "__CALLBACKID";
callbackIdFieldElement.value = eventTarget;
xmlRequestFrame.document.forms[0].appendChild(callbackIdFieldElement);
var callbackParamFieldElement = xmlRequestFrame.document.createElement("INPUT");
callbackParamFieldElement.type = "hidden";
callbackParamFieldElement.name = "__CALLBACKPARAM";
callbackParamFieldElement.value = eventArgument;
xmlRequestFrame.document.forms[0].appendChild(callbackParamFieldElement);
if (theForm["__EVENTVALIDATION"]) {
var callbackValidationFieldElement = xmlRequestFrame.document.createElement("INPUT");
callbackValidationFieldElement.type = "hidden";
callbackValidationFieldElement.name = "__EVENTVALIDATION";
callbackValidationFieldElement.value = theForm["__EVENTVALIDATION"].value;
xmlRequestFrame.document.forms[0].appendChild(callbackValidationFieldElement);
}
var callbackIndexFieldElement = xmlRequestFrame.document.createElement("INPUT");
callbackIndexFieldElement.type = "hidden";
callbackIndexFieldElement.name = "__CALLBACKINDEX";
callbackIndexFieldElement.value = callbackIndex;
xmlRequestFrame.document.forms[0].appendChild(callbackIndexFieldElement);
xmlRequestFrame.document.forms[0].submit();
}
}, 10);
}

This happens because we have this setup
<collapsible panel>
<iframe>
<script>
</script>
</iframe>
</collapsible panel>
When the page loads, the panel being shown forces the script inside the iframe to be dragged through the DOM before the javascript libraries are loaded. This seems to be a change in that was made for IE9. I have yet to fine a way around this issue but at least I know the cause. A temporary workaround is to force the compatibility of the page to IE8 using a meta tag in case anybody else runs into this issue.

The problem was fixed when I removed the SRC attribute from the iframe and I added onOpen event to jQuery's dialog:
open: function(){
document.getElementById("iframename").src = "page.aspx";
}