IndexedDB with iOS 8/ Safari - javascript

We have a testcase to test indexeddb with different browsers and OS.
It is just simple test:
open database, add some data, retrieve some data
That is it. It is working perfectly in Chrome (39), Firefox (new versions), MacBook Pro with OSX 9.5, Android based Browsers.
When we try with Ipad3 with iOS 8, the page is not doing anything. And we can not see any errors too.
Any ideas, how to fix the problem?
We used indexeddb.shim.js file that suppose to help, but still does not work.
if (!window.indexedDB) {
window.alert("Your browser doesn't support a stable version of IndexedDB.")
}
var request = indexedDB.open("kitta db1");
request.onupgradeneeded = function() {
//create Store and etc
};
request.onsuccess = function() {
db = request.result;
};
The error in iOS 8:
Type Error: null is not an Object on the line:
var request = indexedDB.open("kitta db1");
Any idea how can I fix it?

It looks like the variable indexedDB is null. The polyfill does this:
e.indexedDB=e.indexedDB||e.webkitIndexedDB||e.mozIndexedDB||e.oIndexedDB||e.msIndexedDB
So it is setting the variable to one of those values. If those values are all undefined/null, then the indexedDB variable remains null.
A simple way to test whether any of these variations have values (less Microsoft, Opera, and Mozilla) would be something like the following:
console.log('indexedDB: ', indexedDB);
console.log('webkitIndexedDB: ', webkitIndexedDB);
If webkitIndexedDB is undefined and indexedDB is undefined, then iOS apparently does not support indexedDB.
A simple search on caniuse.com says that indexedDB on iOS8 and iOS8.1 is supported but buggy.

Related

Creating form in javascript works in Chrome, not in Edge?

I have interesting case of what the hell is going on that I cannot seem to solve.
I need to programatically create a form and send it as post request. My request then returns some html layout and draws it to window that posted the request. This is why I create new window at the bottom.
Solution I have is as follows
// Define params
var path = someRequestPath;
var params = {
DOCNAME: 'DocumentName',
FORMAT: 'A4',
ORIENTATION: 'Landscape',
HTML: htmlContent
};
// Create form to submit request
var form = document.createElement('form');
form.method = "POST";
form.action = path;
// Set form params
for (var key in params) {
if (params.hasOwnProperty(key)) {
var hiddenField = document.createElement('input');
//hiddenField.type = 'hidden';
hiddenField.name = key;
hiddenField.value = params[key];
form.appendChild(hiddenField);
}
}
//Create window and submit form
var win = window.open('', 'windowName', 'width=1400,height=1200');
win.document.body.appendChild(form);
form.submit();
win.focus();
Now this solution work perfectly fine in Chrome, but in Edge I get following error
Object doesn't support property or method "Symbol.iterator". It happens on line where I attach the form to the newly opened window via appendChild. Since Edge is running Chromium core, I expected that it would behave the same, but obviously it does not.
Any ideas?
Thanks.
From your below description,
It looks like you are assuming that you are using the Edge Chromium browser but as per my test results, it looks like you are using the Edge legacy browser.
I try to test your sample code in both the Edge Chromium browser and the Edge legacy browser.
Your code works fine in the Edge Chromium browser and giving the same result as the Google Chrome browser.
Test result with the Edge Chromium Version 87.0.664.55:
Your code giving the Below error on the same line in the Microsoft Edge legacy version 44.19041.423.0:
Michel has already provided the suggestion to fix this issue in his comment.
So I suggest you can try to check and confirm that which Edge browser you are using on your side for making this test. If you want to move to the MS Edge Chromium browser then you can download it from this link.
Let me know if I have misunderstood anything from your description, I will try to correct myself.
Thanks for your understanding.
Take a look at this: Edge 15 throws error when using 'for ... of' on a NodeList
It seems to be a problem with Edge not implementing the for ... of/in in NodeList.
Maybe try using for (var key in Array.from(params))

Javascript syntax error caused by regex - specific to Internet Explorer(all versions)

I have a web application I ported from a Cordova project which works without problems on all common browsers except for IE. So far I have tested this application in Chrome, Chromium, Firefox, Safari and Edge.
The problem in Internet Explorer returns an error saying that "'submit' is undefined" whenever the following line is added to the code.
usr_id = /\[usr_id\] => (.*?)\n/gum.exec(response);
My guess is that the escape characters are somehow breaking the syntax but playing around with that didn't solve my problem.
The offending part in context below:
function submit(){
uname = $('#txt-uname').val();
password = $('#txt-password').val();
login(uname,password);
}
function login(tc,pass){
$.ajax({
type: 'POST',
url: webserviceURL+'login.php',
data: {'tc':tc, 'password':pass},
complete: function(r){
response = r.responseText;
if (response.indexOf("") > -1){
localStorage.setItem("login", "true");
usr_id = /\[usr_id\] => (.*?)\n/gum.exec(response);
localStorage.setItem("usr_id", 'test');
}
}
});
}
You cannot have u as the unicode flag in Internet Explorer. It is not supported yet. Please change your RegEx to:
usr_id = /\[usr_id\] => (.*?)\n/gm.exec(response);
Also, you can check the support by checking the response of:
RegExp.prototype.unicode
And if it supported for the browsers, use the u flag, as it breaks your original logic without that. With this change, at least, it works in Internet Explorer gracefully. This can be checked using:
(new RegExp()).unicode
It might return undefined in Internet Explorer, while false in other browsers.

Server Site Events (SSE) connection abort with firefox

I wrote a little Chat using SSE for loading new messages.
It is working fine with Chrome, Safari and Opera while Firefox closes the connection after a few retries.
I'am using retry: 2000 (2s). Sometimes firefox is doing up to 10 events, sometimes only 1 or 2. I know from my serverstats, that more then 80% of my users are using firefox, so I need this working on firefox.
I'm using the latest version of firefox and I added a console.log() after every EventListener I'm using ('message', 'open', 'close').
Does anyone have an idea what to do?
Thanks a lot
think I solved the problem:
First I opend the EventSource in a function :
function chat_read() {
if(typeof(EventSource) !== "undefined") {
var source;
source = new EventSource('?link=chat_stream');
}
Now I tried to initialize the variable 'source' global (outside the function) and it is working now.
var source;
function chat_read() {
if(typeof(EventSource) !== "undefined") {
source = new EventSource('?link=chat_stream');
}
Beside this I wrote a function which is looking for the SSE 'open' event still firering and if it is not, it will restart the SSE.

addthis_widget.js throwing Cannot read property '_pmh' of null error on Android and Chrome

I am using a JavaScript error logging tool to log any JavaScript errors on my mobile site and I am seeing a large number (22,000 in under a month) of this error:
Uncaught TypeError: Cannot read property '_pmh' of null
I can see from the addthis_widget.js code that it is originating from that script.
I can also tell that it only affects mobile Android and Google Chrome browsers, these in particular:
Android 4, Android 4.1, Android 4.2, Chrome 11, Chrome 18, Chrome 25, Chrome 26, Chrome 27, Chrome Mobile 18, Chrome Mobile 25, Chrome Mobile 26
I am using the following external JavaScript include:
http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4b6adff375a64db9
and have the following configuration object set:
<script type="text/javascript">
var addthis_config = {
data_ga_property: 'UA-18721873-1', // real GA profile hidden for privacy purposes
data_ga_social: true
};
</script>
Is there anything I can do to prevent this error from occuring so many times on these browsers?
I have located the cause of this issue and it is down the following code.
if (window.addthis) {
window.addthis = null;
window._adr = null;
window._atc = null;
window._atd = null;
window._ate = null;
window._atr = null;
window._atw = null;
}
This was an attempt to cleanup the objects lying around when moving between pages dynamically to prevent memory issues.
addThis now provide support for this problem, their support department sent me the following link:
http://www.addthis.com/blog/2013/05/07/a-brief-history-of-using-addthis-dynamically/#.Uklx4RCKyas
and the following explanation/information:
Along with other information from my peers and such, I've come up with
the proper code which should be executed when moving from virtual page
to virtual page such as in your mobile application. Rather than
nulling any of the AddThis related objects, they must be left alone.
When the page URL or Title (or any other AddThis configuration option)
that you want to be used by our buttons changes, you should execute
our method:
addthis.update(type, key, value)
It takes the three parameters: type, key, value.
Type is either "share" or "config". The key is the same key you would
set according to our API documentation. What you likely need to know
are just the two keys: "url" and "title". The value is of course the
value you want those options to have.
After you have updated all of the options you need to update using
that method, you need to invoke this method:
addthis.toolbox(cssSelector)
The cssSelector is usually going to be ".addthis_toolbox" but if for
some reason you don't want to refresh all of your toolboxes, you can
be more specific about it.
Once you have made those changes to your code, I believe that our
tools will work properly for you and that there will be no more "null
object" related javascript errors.
You can look at this JSFiddle to see an example of dynamically
changing content: http://jsfiddle.net/j5addthis/r6Utv/
I'm having the same issue, but it appears that there was, at one point, a fix to your specific case above by simply upgrading the script that you're using from addthis to version 3.0 by changing this:
http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4b6adff375a64db9
To this:
http://s7.addthis.com/js/300/addthis_widget.js#username=xa-4b6adff375a64db9
Read more here: http://support.addthis.com/customer/portal/questions/1021465-addthis-widget-js-throwing-cannot-read-property-pmh-of-null-error-on-android-and-chrome
Note though, as I mentioned above, my issue continues to persist even with version 3.0 despite the AddThis help desk stating that should work.

web-socket.js and WebSocket

I am trying to do a web socket implementaton for browser. Firefox, Chrome works great, but when i try in IE, it creates the socket object but never calls the timer.
WebSocket = function(url, protocol, proxyHost, proxyPort, headers) {
var self = this;
self.__id = WebSocket.__nextId++;
WebSocket.__instances[self.__id] = self;
self.readyState = WebSocket.CONNECTING;
self.bufferedAmount = 0;
self.__events = {};
// Uses setTimeout() to make sure __createFlash() runs after the caller sets ws.onopen etc.
// Otherwise, when onopen fires immediately, onopen is called before it is set.
setTimeout(function() {
WebSocket.__addTask(function() {
WebSocket.__flash.create(
self.__id, url, protocol, proxyHost || null, proxyPort || 0, headers || null);
});
}, 0);
};
What could be the reason ?
What version of IE are you talking about ?
What websocket library are you using ?
Web sockets are not supported by older version of IE. I think you need to use long polling instead of websockets for those older browsers...
If your using this : https://github.com/gimite/web-socket-js
It's stated in the Documentation :
It should work on: Google Chrome 4 or
later (just uses native
implementation) Firefox 3.x, 4.x,
Internet Explorer 8, 9 + Flash Player
10 or later It may or may not work on
other browsers such as Safari, Opera
or IE 6. Patch for these browsers are
appreciated, but I will not work on
fixing issues specific to these
browsers by myself.

Categories