JSON response overlaid on page instead of delivered to JS
I am migrating a key piece of code which formerly used XML to return information from a server script to instead use JSON. However the JSON response, instead of being returned by calling the response handler is instead overlaid on top of the page which made the AJAX request. I have attached a screenshot displaying this. The JSON response is encased in <pre>. I know my code is not doing this because there is no occurrence of that string in my code. The JSON itself is valid according to JsonLint. So why is my response handler not being called, and where is this overlay coming from? I am using the code from JavaScript: The Definitive Guide, 5th Edition, by David Flanagan. Copyright 2006 O'Reilly Media, Inc. (ISBN: 0596101996) to send the AJAX request, fixed to invoke JSON.parse instead of the JS interpreter to handle the response. I am running Firefox 67.0.4 on Ubuntu 19.04. { "parms": { "id": 151951, "parentsIdmr": 34307, "idcr": 92754, "idar": 0, "fatherGivenName": "william", "fatherSurname": "cross", "motherGivenName": "elizabeth", "motherSurname": "wright", "treeName": "", "parentCount": 1, "familyCount": 0, "idir": 133074, "Surname": "Cross", "GivenName": "Alice", "Gender": 1, "CPIdcs": 1, "CPRelDad": 1, "CPRelMom": 1, "SealingDate": "", "SealingIdtr": 1, "SealingIder": 0, "EventIder0": 0, "BirthDate": "Abt 1855", "BirthLocation": "Ontario, Canada", "EventPref0": "Y", "EventIdet0": 3, "EventCitType0": 30, "EventOrder0": -2, "EventSD0": -99999999, "EventChanged0": 1, "cmd": "INSERT INTO tblER (`idir`, `idtype`, `idet`, `order`, `eventd`, `eventsd`, `idlrevent`, `desc`, `gedtag`, `eventexclude`, `idar`, `description`, `sentenceoverride`, `qstag`, `rgexclude`, `kind`, `ldstempleready`, `preferred`) VALUES(133074, 0, 3, -2, 100000185500000000, 18550615, 42, , , 0, 1, , , 0, 0, 0, NULL, 1)", "event144021": { "ider": "144021", "idir": "133074", "idtype": 0, "idtypemeans": "Person", "idet": 3, "eventtype": "born", "order": -2, "eventdc": "100000185500000000", "eventd": "about 1855", "eventsd": 18550615, "idlrevent": 42, "eventloc": "Ontario, Canada", "desc": "", "gedtag": "", "eventexclude": "N", "idar": 1, "description": "", "sentenceoverride": "", "qstag": "N", "rgexclude": "N", "kind": 0, "ldstempleready": null, "preferred": 1 } , "EventIder1": 0, "EventDate1": "", "EventLocation1": "", "EventIdet1": 5, "EventCitType1": 30, "EventOrder1": -1, "EventSD1": -99999998, "EventChanged1": 0, "EventIder2": 0, "DeathDate": "", "DeathLocation": "", "EventPref2": "Y", "EventIdet2": 6, "EventCitType2": 30, "EventOrder2": 0, "EventSD2": 99999998, "EventChanged2": 0, "EventIder3": 0, "EventDate3": "", "EventLocation3": "", "EventIdet3": 4, "EventCitType3": 30, "EventOrder3": 1, "EventSD3": 100000000, "EventChanged3": 0, "Private": 0, "NeverMarried": { "0": "0"}, "UserRef": "", "AncestralRef": "", "AncInterest": 0, "DecInterest": 0, "IDMRPref": 0 }, "cmd": "UPDATE tblIR SET `gender`=1, `birthsd`=18550615, `idlrbirth`=1, `deathsd`=-99999999, `private`=0, `nevermarried`=0 WHERE idir=133074", "person": { "id": 151951, "idir": 133074, "fsid": "", "gender": "F", "living": "N", "templetag": "N", "idmrpref": 0, "idmrparents": 0, "idar": 0, "ancinterest": 0, "decinterest": 0, "tag1": "N", "tag2": "N", "tag3": "N", "tag4": "N", "tag5": "N", "tag6": "N", "tag7": "N", "tag8": "N", "tag9": "N", "taggroup": "N", "taganc": "N", "tagdec": "N", "savetag": "N", "srchtag": "N", "srchtagigi": "N", "srchtagrg": "N", "srchtagfs": "N", "qstag": "N", "remindertag": "N", "remindertagdeath": "N", "treenum": "N", "ltmp1": 0, "ltmp2": 0, "alreadyused": "N", "userref": "", "ancestralref": "", "notes": "", "references": "", "medical": "", "deathcause": "", "ppcheck": "N", "imported": "N", "added": "20190630", "addedtime": "16:35", "updated": "20190630", "updatedtime": "16:35", "relations": "", "nevermarried": "N", "directline": "N", "stmp1": "", "colortag": 0, "intellishare": "", "private": "N", "ppexclude": "", "rgexclude": 0, "dna": "", "fssync": "N", "fsdups": "N", "fsordinance": "N", "fslinks": "", "names": {"359759":{ "idnx": 359759, "idir": 133074, "order": 0, "means": "Primary Name", "prefix": "", "title": "", "surname": "Cross", "givenname": "", "userref": "", "akanote": "", "preferredaka": 0, "treename": "" } } , "events": {"count": 4, "birth": { "ider": "144021", "idir": "133074", "idtype": 0, "idtypemeans": "Person", "idet": 3, "eventtype": "born", "order": -2, "eventdc": "100000185500000000", "eventd": "about 1855", "eventsd": 18550615, "idlrevent": 42, "eventloc": "Ontario, Canada", "desc": "", "gedtag": "", "eventexclude": "N", "idar": 1, "description": "", "sentenceoverride": "", "qstag": "N", "rgexclude": "N", "kind": 0, "ldstempleready": null, "preferred": 1 } ,"death": { "ider": 0, "idir": 133074, "idtype": 0, "idtypemeans": "Person", "idet": 6, "eventtype": "died", "order": "0", "eventdc": "", "eventd": "", "eventsd": -99999999, "idlrevent": null, "eventloc": "Lost Location 0", "desc": "", "gedtag": "", "eventexclude": "N", "idar": 1, "description": "", "sentenceoverride": "", "qstag": "N", "rgexclude": "N", "kind": 0, "ldstempleready": null, "preferred": 1 } } } , "childcmd0": "", "child0": { "idcr": "92754", "idmr": "34307", "family": "William Cross and Elizabeth Wright", "idir": "133074", "child": "Cross (about 1855—)", "order": "0", "prefchild": "N", "idcs": "1", "idcpdad": "1", "idcpmom": "1", "cpdadprivate": "N", "cpmomprivate": "N", "parsealdc": "", "parseald": "", "parsealsd": "-99999999", "idtrparseal": "1", "parsealloc": "", "parsealnote": "", "ldsp": "N", "templetag": "N" } }
All Replies (6)
If you retrieve XML or JSON via XMLHttpRequest, Firefox wouldn't insert that the response into the page on its own. Does this occur only in Firefox, not in other browsers?
Since your screenshot mentioned editing data, you probably can't share a URL. However, if you can create a reduced test case that exhibits the same problem, that might be helpful.
I agree that this makes no sense. It also doesn't always happen. This is a genealogy application, as you can see from the screen, and the specific situation is where I am editing one of the children of a family. So the edit page which you see in the screenshot is the standard editor for a person in the tree. If I invoke that editor manually, by entering the URL:
which is exactly the same URL as the failing page, then I can edit and save the person and everything works fine. The server script is invoked to update the database and the JSON output is returned to the function. However when this URL is invoked from the editor page for the family by clicking on the edit child button, it generates the strange JSON overlay. Since the URL is the same the only thing that I can think of that is different is the opener, which points to the page describing the family, which is the page containing the table row with id=child3. But that is only used to request the calling page to update the information which it displays about the child, which is only done *after* the JSON response is received from the server. Because my JS code is not receiving that response the application ends up blocked. In particular that response has to come in to set disable to false on all of the "edit child" buttons in the invoking page.
I have reproduced the problem on Chromium. It gives exactly the same output, as shown in the attachment.
Some piece of code is creating the HTML overlay which contains the JSON response code and it is not mine. I do not have any application code that emits a <pre> or the very special head section which declares that the contents of the document are JSON text.
Hmm, possibly something in the example code you started from has some kind of debugging output so you can see the response while testing?? This isn't really possible to answer without hands on, I don't think.
Thank you for continuing to follow this even though it appears unrelated to the specific browser.
The core of the sample code from Flanagan's book is:
request.onreadystatechange = function() {
if (request.readyState == 4) { if (request.status == 200) { callback(HTTP._getResponse(request)); } else { if (errorHandler) errorHandler(request.status, request.statusText); else callback(null); } }
}
First weird event: My errorHandler is called with request.status == 0! Since that is not an HTTP status code, how could that happen? How could ANYTHING that I do in my application cause this to happen.
Second weird event: I never received a 200 response with the result that HTTP._getResponse was never called. _getResponse invokes JSON.parse for JSON documents and passes the resulting JS object to my application.
jamescobban said
First weird event: My errorHandler is called with request.status == 0! Since that is not an HTTP status code, how could that happen? How could ANYTHING that I do in my application cause this to happen.
Well, according to /docs/Web/API/XMLHttpRequest/status:
Before the request completes, the value ofstatusis 0. Browsers also report a status of 0 in case ofXMLHttpRequesterrors.
Since you have readyState == 4, it seems the error is the more likely explanation. Did statusText say anything meaningful?
If you check Firefox's Network Monitor, can you see any issues with the response to the request?
To open the Network Monitor in the lower part of the tab, you can use either:
- "3-bar" menu button > Web Developer > Network
- (menu bar) Tools > Web Developer > Network
- (Windows) Ctrl+Shift+e
Firefox won't start listing files it is requesting until the first new request. Then you'll see the status code at the left and if you click the request, you can access headers and the response in the panels available on the right.
The network monitor shows the POST request invoking the script that generates the JSON response.
There is nothing in the text string returned with status 0.
I stuck a bunch of console.logs all through the code and finally found an error in a line of code in my JS that is only executed in the specific situation where the AJAX call was failing. Fixing that problem results in the request succeeding every time.
Thank you for your patience and support.