We Keep Coding

RequireJS / XMLHttpRequest issue - TypeError: Cannot find function open in object function localRequire(deps, callback, errback) {...}

I've been trying to get info from JIRA REST API to put it in cells inside a spreadsheet. For this I'm writing a Google script attached to the spreadsheet, so, form what I understand, that makes this "in Browser" stuff.
In my project I currently have a main code script as well as the requirejs script (I read that it would be the way for me to call xmlhttprequest from a browser script).
Please keep in mind I'm not that used to scripting and mostly tried to follow documentations, but I must be missing something because I always get this error:
TypeError: Cannot find function open in object function localRequire(deps, callback, errback) {...}.
Here's my function so far:
function updateFilters()
{
var Test = destinationSpreadsheet.setActiveSheet(destinationSpreadsheet.getSheetByName("Nonsense"));
var url = "myurl is in there"; //I have a test url in there
var XMLHttpRequest = require(["xmlhttprequest"], function(xmlhttprequest){});
var myRequest = new XMLHttpRequest();
myRequest.open('GET', url);
myRequest.onload = function ()
{
console.Log(myRequest.response);
};
}
I'm confused as to why "open" doesn't work. There seem to be no issue when I comment out the line, but of course if I do that I get nothing.

Try this for javascript:
function updateFilters()
{
var url = "myurl is in there"; //I have a test url in there
var myRequest = new XMLHttpRequest();
myRequest.open('GET', url);
myRequest.onload = function ()
{
console.Log(myRequest.response);
};
}
This line is breaking your code:
var XMLHttpRequest = require(["xmlhttprequest"], function(xmlhttprequest){});
Try this for node.js:
function updateFilters()
{
var url = "myurl is in there"; //I have a test url in there
const XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;
var myRequest = new XMLHttpRequest();
myRequest.open('GET', url);
myRequest.onload = function ()
{
console.Log(myRequest.response);
};
}
Note: you new to install xmlhttprequest with npm or yarn first

why does my javascript code read a property of null on this json data?

EDIT: sorry, had the code ridden with errors. changed it now
Ive been trying to extract some JSON data from a github link to put it in a html file, but everytime I try to do so (with the code below), I get an Uncaught TypeError: cannot read property "value" of null. This even though "value" (in the Json file) certainly is not null.
What is going wrong here?
Thanks
you can check out the json file i put on github https://github.com/BearsAreFriendly/PolitiekeHelderheid/blob/master/kamerleden.json . I am quite certain that "value" has been defined
var section = document.querySelector("section");
var requestURL = 'https://github.com/BearsAreFriendly/PolitiekeHelderheid/blob/master/kamerleden.json';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function(){
var phdata = request.response;
showKamerleden(phdata);
}
function showKamerleden(jsonObj) {
var kamerleden = jsonObj["value"];
for (var i = 0; i < kamerleden.length; i++) {
var myPara1 = document.createElement('p');
myPara1.textContent = kamerleden[i].Id;
section.appendChild(myPara1);
}
}
this should print out the id's. instead I get my mentioned error code

I believe you may not actually be receiving any JSON data from GitHub, but HTML. When my browser requests a GitHub page the response content type is Content-Type: text/html. Your request URL should respond with JSON in order for it to be usable. When you request the GitHub URL you are likely getting other stuff (such as HTML), but not JSON.
For example, this url serves JSON data only: https://my-json-server.typicode.com/typicode/demo/posts
It has Content-Type: application/json when I inspect the page in dev tools under the network section
Modifying your code to add the url below works perfectly.
var section = document.querySelector("section");
var requestURL = 'https://my-json-server.typicode.com/typicode/demo/posts';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function(){
var phdata = request.response;
/* showKamerleden(phdata); */
document.write(JSON.stringify(phdata) )
}

try this
var kamerledens = jsonObj.value;
instead of
var kamerledens = jsonObj["value"];
and also you should use a loop to go through all ids
function showKamerleden(jsonObj) {
var kamerledens = jsonObj.value;
for (var i = 0; i < kamerledens.length; i++) {
var myPara1 = document.createElement('p');
myPara1.textContent = kamerledens[i].Id;
section.appendChild(myPara1);
}
}
Edited:
Try moving
request.send();
after the onload function

It isn't "value" that it is null, jsonObj is null.
Hence the error 'cannot read property "value" OF null'
I suggest you output and analyse the request in the callback
console.log(request)

addEventListener is not working in IE11

Below javascript function uploads the chosen file and updates the grid. Its working perfectly in firefox but not in IE11.
Observed that its not executing "ESignature/Registration" function in addEventListener. I kept break point at Registration function. Its not getting hit and not refreshing the grid. Please guide me to fix this problem
$("#lnkAddAttachment").click(function (e) {
if (document.getElementById("txtFile").files[0] != null) {
oFiles = document.getElementById("txtFile").files[0];
nFiles = oFiles.size;
var selectedFile = document.getElementById("txtFile").files[0];
var xhr = new XMLHttpRequest();
var fd = new FormData();
var url = '#Url.Content("~/")' + "ESignature/getFile";
fd.append("file", document.getElementById('txtFile').files[0]);
$("#loadingwrapper").fadeIn();
xhr.open("POST", url, true);
xhr.send(fd);
xhr.addEventListener("load", function (event) {
var url = '#Url.Content("~/")' + "ESignature/Registration";
$('#gridAttachments').load(url + ' #gridAttachments');
$("#loadingwrapper").fadeOut();
}, false);
$('#txtDescription').val('');
$('#txtFile').val('');
return false;
}
});

The "addEventListener" method is supported in Firefox, but it may not be supported in IE. You'll need to use "onreadystatechange" to handle the event of completing the request. Also, you'll want to setup your "onreadystatechange" handler before calling "send"; otherwise it's possible the request to the server will finish before you setup the handler.
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest?redirectlocale=en-US&redirectslug=DOM%2FXMLHttpRequest#Properties

As you're clearly using jQuery already, I'd suggest using $.ajax rather than using XMLHttpRequest directly, which would almost certainly solve the problem.
But if you want to keep using XMLHttpRequest directly for some reason, you most likely need to use readystatechange rather than load; perhaps IE11 doesn't support load, or doesn't support it in whatever compatibility setting it decided to use for your page. If your page is being loaded in some older compatibility mode, it also won't have addEventListener on the XMLHttpRequest object.
As you're not sharing the XMLHttpRequest instance with anyone, the simple way to deal with both of those potential problems is:
xhr.onreadystatechange = function () {
if (xhr.readystate === 4) { // Also consider checking `status`
var url = '#Url.Content("~/")' + "ESignature/Registration";
$('#gridAttachments').load(url + ' #gridAttachments');
$("#loadingwrapper").fadeOut();
}
};
And as Chris points out, move that above the call to .send.
But again: You're using a library that handles these things for you. Use it.

I just changed url as below. it worked. Problem is whenever below url hits IE, it takes from cache and it won't hit Registration function. To make the url unique every time, added new variable called check to url. Its value will be unique everytime and hits Registration function.
var url = '#Url.Content("~/")' + "ESignature/Registration?check=" + new Date().getTime();
Complete code:
$("#lnkAddAttachment").click(function (e) {
if (document.getElementById("txtFile").files[0] != null) {
oFiles = document.getElementById("txtFile").files[0];
nFiles = oFiles.size;
var selectedFile = document.getElementById("txtFile").files[0];
var xhr = new XMLHttpRequest();
var fd = new FormData();
var url = '#Url.Content("~/")' + "ESignature/getFile";
fd.append("file", document.getElementById('txtFile').files[0]);
$("#loadingwrapper").fadeIn();
xhr.open("POST", url, true);
xhr.send(fd);
xhr.addEventListener("load", function (event) {
var url = '#Url.Content("~/")' + "ESignature/Registration?check=" + new Date().getTime();
$('#gridAttachments').load(url + ' #gridAttachments');
$("#loadingwrapper").fadeOut();
}, false);
$('#txtDescription').val('');
$('#txtFile').val('');
return false;
}
});
Thank you T.J. Crowder and Chris for your inputs.

HTTP post in iMacros with Javascript for Firefox

I was making a automation script to extract some info from a website, And It's important to submit some info using POST method. Can anyone tell me how to use HTTP Post method with Imacro & javascript for firefox plugin. Below is the script which i found here : Sending an HTTP Post using Javascript triggered event
But it's giving me error when i play the same using Imacro player.
var url = "http://www.google.com/";
var method = "POST";
var postData = "Some data";
var async = true;
var request = new XMLHttpRequest();
request.onload = function () {
var status = request.status; // HTTP response status, e.g., 200 for "200 OK"
var data = request.responseText; // Returned data, e.g., an HTML document.
}
request.open(method, url, async);
request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
request.send(postData);

XMLHttpRequest() is no longer supported in firefox 15+
You have to define it:
const XMLHttpRequest = Components.Constructor("#mozilla.org/xmlextras/xmlhttprequest;1");
var request = XMLHttpRequest();

To run JavaScript in iMacros you can use this method.
URL GOTO=javascript:window.ScrollTo(0,150);
Try this method.
In your case it would look like this.
URL GOTO=javascript:var url = "http://www.google.com/";var method = "POST";var postData = "Some data";var async = true;var request = new XMLHttpRequest();request.onload = function () var status = request.status; var data = request.responseText; request.open(method, url, async);request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");request.send(postData);

Obtain the method and url from an XHR

Basically what the title says, I want to get the URL and HTTP Verb from a xhr. Is this possible?

Not natively, I'm afraid. In prototypable implementations you could write your own prototype:
XMLHttpRequest.prototype.__oldOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.verb = "";
XMLHttpRequest.prototype.url = "";
XMLHttpRequest.prototype.open = function (verb, url, async)
{
this.verb = verb;
this.url = url;
this.__oldOpen.call(this, verb, url, async);
}
Don't expect it to work in IE7 and older though.
I suppose you could do it by completely recreating the XMLHttpRequest object, but it would take a lot of work to get it right:
var oldXHR = XMLHttpRequest;
function XMLHttpRequest()
{
var realXHR = new oldXHR();
this.onreadystatechange = function () {}
this.open = function (verb, url, async)
{
this.verb = verb;
this.url = url;
realXHR.open(verb, url, async);
{
this.send = function () { realXHR.send(); }
// all other properties and methods...
}
Of course, you have to go to the effort of correctly binding onreadystatechange and setting the status, etc.

Currently, there is no standard way to get HTTP verb or url from XHR object. But, W3C is considering getRequestHeader for future considerations.