Develop Reference

Whats the appropriate method of acquiring consistent response for innerHTML data using $.get across different browser platforms?

Given the following code:
var hostUri = window.location.origin + '/GuestValidator.asmx/GetReservationInfo?resvNo=' + reservationno;
$.get(hostUri, {}, function (response) {
var data = response.documentElement.innerHTML;
}
If executed within a Chrome browser, the expected result returns a comma-delimited string of values within the innerHTML property of the documentElement object.
However, if the same code is executed using IE 11 or Edge there is no innerHTML property on the documentElement. It comes back as undefined.
But I can revise my code to response.documentElement.childNodes[0].data when executed within IE and get the same result that was present in Chrome using innerHTML.
I haven't tested the code with other browsers but I suspect they will likely have differences also.
So how can this code be revised to acquire what would be the innerHTML value within Chrome across all browsers without having to execute separate code based on the browser?
EDITED FOR CLARITY
This is an excerpt of the web method. It is returning a generic list of type string. It doesn't matter whether or not I return a JSON object.
var arry = new List<string>();
var blockedOrderDays = 3;
var blockedDay = String.Empty;
var noOrderDays = String.Empty;
ServicePointManager.SecurityProtocol = SecurityProtocolType.Tls12;
var svclient = new ServiceClient();
var result = svclient.GetReservation(reservationNo);
var details = result.Reservation.ArrivalDate;
var arrivalDt = formatDate(details);
while(blockedOrderDays != 0)
{
blockedDay = formatDate(details.AddDays(-blockedOrderDays));
arry.Add(blockedDay);
noOrderDays += blockedDay + ",";
-- blockedOrderDays;
++x;
}
arry.Add(arrivalDt);
noOrderDays = noOrderDays + arrivalDt;
return noOrderDays;

After spending some additional time and effort on getting this code to work with a reasonable level of continuity across browser platforms. The following modification appears to have resolved the issue.
var hostUri = window.location.origin + '/GuestValidator.asmx/GetReservationInfo?resvNo=' + reservationno;
$.get(hostUri, {}, function (response) {
if ((navigator.userAgent.indexOf("MSIE") !== -1) || (!!document.documentMode === true))
prohibitOrderDates = response.childNodes[0].textContent;
else
prohibitOrderDates = response.children[0].innerHTML;
var data = response.children[0].innerHTML;
}
Alternatively, though not specific to the answer. A shortened version of the call can be:
var hostUri = window.location.origin + '/GuestValidator.asmx/GetReservationInfo';
$.get(hostUri, { resvNo=reservationno }, function (response) {
if ((navigator.userAgent.indexOf("MSIE") !== -1) || (!!document.documentMode === true))
prohibitOrderDates = response.childNodes[0].textContent;
else
prohibitOrderDates = response.children[0].innerHTML;
var data = response.children[0].innerHTML;
}
So the response.children[0].innerHTML is the appropriate call to retain browser continuity for most every browser I've tested and IE always seems to be the exception to the rule. Even Microsoft Edge follows the standard. IE seems to be an odd ball for ever keeping standard.

eventDrop, oldResource and newResource in fullcalendar scheduler v4

I'm trying to eventually create a php script to update mysql. As I go step by step and try to set the variables and have js behave correctly, I'm having difficulty with changing the 'resource' rooms in the scheduler.
If I change the location of the event and change the room, I get a JS alert saying "Title was dropped on to [new time] from [old time]. Old room [oldresource]. New Room [newresource]". That's working well.
However, if I move the event to a location on the same day, I get errors - because info.oldResource and info.newResource are only available IF the event has moved to a NEW resource. If they're moving within the same resource, the object doesn't exist.
I tried working in an IF statement. Console Log shows null, but my if statement is not stopping the processing of the rest of the code. This will eventually (I think) result in the commands not being run correctly - once I pass them to PHP.
I plan on having an 'else' statement that does not include oldResource or newResource dialogue to process changes that stay within the same resource.
My code is as such:
eventDrop: function(info) {
if (typeof info.oldResource !=="null") {
var oll = console.log(info.oldResource);
var nww = console.log(info.newResource);
var oldroom = (info.oldResource.id);
var newroom = (info.newResource.id);
var newtitle = info.event.title;
/*if (oldroom = newroom) {alert ("Same Room");}*/
alert(newtitle + " was dropped on " + info.event.start.toString() + ".Old Time: " + info.oldEvent.start.toString() + ". From: " + oldroom + ". To: " + newroom );
if (!confirm("Are you sure about this change?")) {
info.revert();
}}
},

You don't need typeof here. Just write
if (info.oldResource != null)
instead.
P.s. if you call typeof on a property that's set to null I would expect the typeof call to return "object", not "null". But like I said, it's irrelevant because you don't need it. Just check for the value null directly.

SCRIPT5022: SyntaxError in IE 11

I've got a webapp using Accusofts Prizm ActiveX Viewer to view and edit PDF's online. This product seems to work fine in every browser including edge except, you guessed it, Internet Explorer 11. I have been searching through the depths of the internet to try to find a solution to this and have found no useful results.
The error I am receiving is SCRIPT5022: SyntaxError with no further information on the error received which takes me to the following function with the 3rd line being the recipient of the error.
function createIconMap(iconText) {
var parser = new DOMParser();
var iconDoc = parser.parseFromString(iconText, 'image/svg+xml');
I have ran and compared IE against chrome and both inspectors are informing me they are behaving the same. Yet IE brakes on this function and Chrome goes on to display the PDF.
Please see the full JS below
// createIconMap
// Given an SVG as a string, parse it and extract the content of all
// symbol elements with an id.
function createIconMap(iconText) {
var parser = new DOMParser();
var iconDoc = parser.parseFromString(iconText, 'image/svg+xml');
var icons = iconDoc.getElementsByTagName('symbol');
function attributeReducer(memo, attr) {
return memo + ' ' + attr.name + '="' + attr.value + '"';
}
function childReducer(memo, node) {
if (node.nodeType !== 1) {
return memo;
}
// Build the DOM string of this node. Unfortunately, IE does
// not implement innerHTML, outerHTML, or any of the other
// content methods for SVG Elements and Node elements from
// the DOMParser.
return memo + '<' + node.tagName + ' ' +
_.reduce(node.attributes, attributeReducer, '') +
'>' +
(node.childNodes.length ? reduceNode(node) : '') +
'</' + node.tagName + '>';
}
function reduceNode(node) {
return _.reduce(node.childNodes, childReducer, '');
}
_.forEach(icons, function (icon) {
var id = icon.getAttribute('id');
if (!id) {
return;
}
ICON_MAP[id] = reduceNode(icon);
});
}
function Viewer(element, options) {
this.$dom
.html(_.template(options.template.viewer)(_.extend({
reasons: this.redactionReasonsExtended,
annotationsMode: options.annotationsMode,
downloadFormats: downloadFormats,
annotationFormats: annotationFormats
}, PCCViewer.Language.data)))
.addClass('pccv')
.show();
createIconMap(options.icons);
}

Please check the file (pdf, xml) content, might be the file contain the error description.
More details, you could refer to this sample.
Besides, according to this thread, you could try to use ActiveX to parse documents.

So, here's what has been found out as time has gone on. I have since found out that the Accusoft product doesn't work on IE 11 (64 bit version) which is the only version available on Windows 8+. I have also determined that putting the following in a Try/Catch will help enable it to work part of the time
var parser = new DOMParser();
var iconDoc = parser.parseFromString(iconText, 'image/svg+xml');

How to retrieve and list data from sdcard in Firefox OS

link.onclick = function() {
console.log("display started");
link.style.background = "red";
link.style.color = "black";
listContents('music');
}
function listContents(storagename) {
//Clear up the list first
// results.html("");
var files = navigator.getDeviceStorage(storagename);
console.log("files object "+files);
var cursor = files.enumerate();
console.log("cursore object "+cursor);
cursor.onsuccess = function () {
//alert("Got something");
var file = this.result;
if (file != null) {
var imageElement = $('<img height="100" width="75">');
imageElement.attr('src', window.URL.createObjectURL(file));
$("<p>" + file.name + "," + file.lastModifiedDate + "," + file.type + "," + file.size + "</p>").appendTo('#results');
imageElement.appendTo("#results");
this.done = false;
} else {
this.done = true;
}
if (!this.done) {
this.continue();
}
}
}
Here, on click of link button I want all the audio files to be displayed in a list. A sample function for it is given, but it is in jquery. I want to implement the function listContents() using pure JavaScript.
Can anyone help, please?

You should take a look at youmightnotneedjquery.com – the Elements section in particular might prove to be most helpful.
This reference alone would not solve your problem right away, but could generally point you in the right direction. Most of the "pure JavaScript" techniques (like the DOM method element.querySelectorAll) do not return an object as convenient as its jQuery counterpart does, so you will certainly need a bit of hacking, trial and error to get this to work — but ultimately I think that is the best way to learn this. :)
Learning a thing or two about functions like document.getElementById(), document.querySelector(), element.innerHTML & element.insertAdjacentHTML() and document.createElement()/element.setAttribute() should get you started. ;)

IE9 throws DOM Exception: INVALID_CHARACTER_ERR (5)

On the script below, IE9 is throwing an error:
SCRIPT5022: DOM Exception: INVALID_CHARACTER_ERR (5)
mootools-1.2.1-core-yc.js, line 118 character 1
Document.implement({
newElement: function (A, B) {
if (Browser.Engine.trident && B) {
["name", "type", "checked"].each(function (C) {
if (!B[C]) {
return;
}
A += " " + C + '="' + B[C] + '"';
if (C != "checked") {
delete B[C];
}
});
A = "<" + A + ">";
}
return $.element(this.createElement(A)).set(B); //THIS IS LINE 118
},
newTextNode: function (A) {
return this.createTextNode(A);
},
getDocument: function () {
return this;
},
getWindow: function () {
return this.window;
}
});
This snippet is part of the Mootools js library that the developer used on the site. Is there a workaround to fix the error for IE?

yeah that code is garbage, you should never do browser checks like that, its taught in JavaScript 101... lol can't believe that's in mootools? blech, anyways
IE9 doesn't allow for crazy document.createElement('<div style="background:red">yay!</div>'); syntax anymore (no one should've ever really been using it in the first place...)
here's an example:
var d = document;
var x = d.createElement('div');
x.innerHTML = 'yay';
x.style.backgroundColor = 'red';
x.style.padding = '6px';
x.style.margin = '20px';
d.body.appendChild(x);
var sameHTML = '<div style="background:green;padding:6px;margin:20px;">yay!</div>';
// fails in IE > 8 and other browsers
try {
var y = d.createElement(sameHTML);
d.body.appendChild(y);
} catch (err) {
d.body.appendChild(d.createTextNode(err));
}
// quick fix using innerHTML:
var temp = d.createElement('div');
temp.innerHTML = sameHTML;
d.body.appendChild(temp.childNodes[0]);
the way to fix this is to either create a dummy element and use .innerHTML and then extract the child, or inside mootools check the browser version and don't do that for IE > 8 if i remember right mootools has a Browser.Engine.version or something to that effect...
edit: i feel like i should also add that this: Browser.Engine.trident is the problematic check, and from the gyst of the code looks like it might occur else where too...
aha! another update:
i found this while looking through [an old] support thread:
you'll need to update to 1.2.5 or 1.3. Previous MooTools versions are not supported by IE9.
so an update to the script should fix your problem, hopefully it won't introduce more bugs... you can get it here: http://mootools.net/download, you might want to try that 1.2.5 version at the top of the page since it will have the least amount of changes...
good luck -ck