We Keep Coding

NS_BINDING_ABORTED only on first PUT attempt in Firefox

In my JS single page web app I have a reset-button that triggers 'onclick' and will use vanilla fetch() to PUT an empty JSON array to my API. Both are hosted on the same domain/server. When using Firefox (currently 86.0), the first time I push the reset button, the call is aborted. The console says NetworkError when attempting to fetch resource white the Network tab says NS_BINDING_ABORTED in the transferred column.
When I reload my app (F5) and push the same button again, it works. And also any time from now on. As the same code is executed, the failing and the working calls would send the same headers and payload.
Chrome does not show this behavior, there the first call works too.
Even stranger, this first failing PUT call in Firefox seems to only fail once per URL. The web app provides "areas" to users with the area ID in the frontend URL, e.g.
https://example.org/areas/#/myAreaA
and
https://example.org/areas/#/myAreaB
These will PUT to the API, which also has these IDs in their URLs:
https://example.org/api/areas/myAreaA/state/
and
https://example.org/api/areas/myAreaB/state/
For each of these URLs, the first PUT call fails with NS_BINDING_ABORTED but works thereafter. If I copy the URL for such an area into a new Tab or even close+open the Browser again, the Error does not appear again. The web app does not use any cookies.
The web app does a lot of other API calls to the same backend/areaID, no other show this behavior. However, this is the only PUT call, all other calls are GET/POST/HEAD/PATCH requests.
What could be the reason for the first PUT failing?

Following "NetworkError when attempting to fetch resource." only on Firefox I found the problem. It seems that Firefox' onclick event propagation interferes here with the fetch() call. As soon as I added
event.preventDefault()
in the onclick-handler before doing the actual fetch(), everything started to work again.

Angularjs long polling

I am trying to perform a simple long poll request in Angularjs - I make a GET request and it hangs on till the server responds. Then I make the request again and wait for the next response - and so on.
However, for some reason the code is quite unreliable and misses around 80% of the responses sent from the server.
Below is my code:
main.messages=[];
...
main.poll=function(){
$http.get('http://localhost:8080/message')
.success(function(data){
console.log(data);
main.messages.push(data);
main.poll();
})
.error(...)
};
Is there something obvious that I am missing here?
The server can detect that the browser is connected, and the server does send a response but the code above does not get the response (no console output and no error). I tried making this request with postman (chrome extension) and the long-poll worked perfectly there so I think the problem is somewhere in here.
update: the problem occurs only on Google Chrome and only when there is more than one tab performing the long-poll simultaneously. There is some seemingly random behaviour on creating and closing new tabs with the long-poll.

I found out what was causing this. Chrome will only longpoll a given url one tab at a time. If a user has got multiple tabs open requesting the same longpoll, Chrome waits for the longpoll in the first tab to finish before starting the poll in the second tab.
I think that the browser looks at the long-poll request as a 'server that is not responding'. When you try to make the same request in a new tab, the browser does not actually make that same request again to conserve resources. If you look at the network tab, it will show a pending request. But that's a 'lie', the browser is actually waiting for the server to respond for the first tab's request. Once it gets a response from the server for the first tab's request, only then will it query the server for the second tab's request.
In other words, the browser (Chrome and Opera) will not normally make two long-poll requests to the same endpoint simultaneously - even if these requests are coming from two different tabs.
However, sometimes after a certain amount of time it decides to release request for the second tab as well. But I was not able to figure out any rule for this. If you have 3 tabs open with the same request, closing the first causes 2 simultaneous requests from the remaining two tabs. But if you have 6 tabs open, closing the first causes only 3 simultaneous requests and not 5. I'm sure there would be some rules governing this behaviour but I guess we have to write code assuming that the requests may or may not take place simultaneously and the browser may wait for one request to finish before working on the second.
Safari does not have this behaviour - it will make multiple requests via multiple tabs simultaneously. But Chrome and Opera do show this behaviour.
So rather than 'broadcasting' data simultaneously to all connected clients, I am now changing my code to use timestamps to figure out how much data a client needs and then send that data.

CORS/REST URI limit?

I'm trying to enter data into a table using REST (WCF CORS) call from an ASP.NET page via jquery/javascript. The initial call works perfectly. Once I get the record key, i know the call is good, and I fire a toast message that indicates such, then i clear the text boxes to allow another re-entry.
On the second entry, once the info is filled out and passes validation. I get this error in Chrome
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'localhost' is therefore not allowed
access. The response had HTTP status code 400.
- You can see the first call is succesfully, but then the 2nd fails with the above error. It seems i have CORS set up correctly since i'm able to make the initial call successfully. I've even tried a redirect, and it only works for the first entry. In order to get another successful post I must 'physically' refresh the page, then reenter that data.
Any ideas here? Thanks in advance!
UPDATE: this only appears to be an issue in Chrome v 38.02.2125.111. IE 11.0.9600 works fine.
UPDATE 2: this appears to be an issue with the URL length.... i think...
UPDATE 3: it appears there is a 310 character limit for URIs? Anyone know how to get around that?

queryMySQL.php?query=myquery returns 403 forbidden error sometime

I have created a web site where in one page I select search criteria for mysql.
Depending on the drop-down elements selected, I create a string that I call myquery in a javascript, then I use
window.location.href = "queryMySQL.php?query=" + myquery;
and call a different page.
This works sometimes, but sometimes it gives me the 403 error and the page shows:
You don't have permission to access queryMySQL.php on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
I cannot figure out why it works sometimes and sometimes it does not, the syntax of the query is not a problem, I can get this error even if I remove the code on the page.
Additionally, this worked fine on another web hosting site, but when I copied this implementation on a different site I started having problems.
Suggestions?
EDIT ******************************************************
As I said this has nothing to do with the query. The target page can be a blank html page, and the error is still there. It looks like some security issue on this web hosting site because it worked fine on the other one and on my own server.

Try:
window.location.href = "queryMySQL.php?query=" + encodeURIComponent(myquery);
The query probably contains special characters that need to be encoded in a URL.

Form values getting lost in IE8 but Firefox, IE9 works

I ran into a scenario where I was thrown an unexpected behavior only in IE8 browser. IE9 and Firefox browsers work fine. The behavior went like:
User populated a form
On purpose - user leaves a mandatory field blanked
User clicked "Submit button" and browser sent a POST request
Expected behavior - error message is thrown along with data that was already provided. Only mandatory field should be left blanked as we did not provide anything in step 2. But instead I'm getting an error message with previous data lost i.e. form empty.
And note this only happens in IE8. Any suggestions?

I am going to answer this questions myself. So, here's what happened in my scenario. It was a double click problem. But I only clicked the button once. Then how did that happen? Some programmer who worked on this project was handling a form submit where he did another submit using JavaScript. But then how did this work in Firefox or IE9+?
I used Fiddler to go deep into this - I noticed in IE8 browser two requests are sent to the server. But IE9 and Firefox correctly handles this scenario (i.e. learns about double click) and sends only 1 POST request instead of 2.
Technologies used: Spring Framework 2.0, JSP, HTML, JavaScript
Why data is lost has also to do with Server - Spring modifies the session attributes (to be specific it's a formObject which is temporarily removed and re-added) while processing requests. When there's another request at the same time it goes through another pipeline (handleInvalidSubmit) which ends up creating a new formObject and thus destroying old data.
Hope this will help others :)