Live view error in old safari

Phoenix Forum Questions / Help
, , ,
1

OSX: 10.13 (17A365)
Safari: 11.0 (13604.1.38.1.6)
LiveView: 0.4.1

On older versions of Safari, I encounter some errors with my liveview.

  1. [Error] TypeError: n.entries is not a function. (In ‘n.entries()’, ‘n.entries’ is undefined)

StackTrace:

O (phoenix_live_view.js:375)
	value (phoenix_live_view.js:1438)
	value (phoenix_live_view.js:1481:135)
	value (phoenix_live_view.js:576)
	(anonymous function) (phoenix_live_view.js:791)
	(anonymous function) (phoenix_live_view.js:828)
	click
	trigger (jquery.js:8510)
	(anonymous function) (jquery.js:8549)
	each (jquery.js:367)
	listenToBoundsChange (search_map.js:161)
	j (js:194:300)
	trigger (js:191:159)
	b (map.js:31:139)

My code at search_map.js:161 is $('#myForm button[type=submit]').click();

I do not receive any data from the server (which I was expected after my form submit)

[Error] WebSocket connection to 'ws://localhost:4000/phoenix/live_reload/socket/websocket?vsn=2.0.0' failed: WebSocket is closed due to suspension.
[Error] WebSocket connection to 'ws://localhost:4000/live/websocket?vsn=2.0.0' failed: WebSocket is closed due to suspension.

Sometimes I get both (1) and (2). These two are on the same liveview.

On another liveview, I get the following error every time I change something in my form (inputs, radio buttons, checkboxes)

[Error] TypeError: new FormData(n.form).getAll is not a function. (In 'new FormData(n.form).getAll(n.name)', 'new FormData(n.form).getAll' is undefined)
	(anonymous function) (phoenix_live_view.js:803)
	(anonymous function) (phoenix_live_view.js:828)

Do these errors ring a bell for you guys? Can you please point a direction to figure it out what I’m doing wrong on my side?

Every thing works perfect on Chrome, Firefox, Opera

By the way, great framework. You’ve done a very good job. Thanks.

2

https://caniuse.com/#feat=mdn-api_formdata_entries
https://caniuse.com/#feat=mdn-api_formdata_getall

Those suggests your errors 1 and 3 should not be happening in safari 11.

1 Like
3

In the developer console in the browser when you click do you see the submit happen in the network tab, are there any js errors as you using js to click and if there are errors nothing is going to work? Are you getting a success 200? If your not even sending, is the button in a form? As submit requires a form and matching open and closes for all dom elements. Alternatively create a function on the click handler, event.preventDefault() to stop the default submit action and ajax post it. Also try and target the form element in the console and try and call .submit() directly on the form and .click on the button, you can call the js fn directly from the console.

4

Best thing you can do is check the developer console as your posting from the client side so debug there first

5

Also is the button inside the form, does it work if you click it in the ui?

6

Thanks for your suggestions.

I’ve tried some of them with the following output:

  • no network activity even if i manually submit the form
  • I’ve disabled the JS click from my code; Refreshed the page; No error in the console. I manually call the jQuery click.
    The error (1) appears: TypeError: n.entries is not a function. (In ‘n.entries()’, ‘n.entries’ is undefined)
    The button gets disabled with the following extra attributes: data-phx-disabled="false" disabled
    The form receives the following attribute: class="phx-loading"

That I’m trying to do here is to populate with js some hidden fields of the form, and submit it via liveview to be processed on the server.

<%= f = form_for :search, "", phx_submit: :submit, phx_update: :ignore, id: "myForm" %>
      <%= hidden_input f, :south_west_lat, id: "south_west_lat" %>
      <%= hidden_input f, :south_west_lng, id: "south_west_lng" %>
      <%= hidden_input f, :north_east_lat, id: "north_east_lat" %>
      <%= hidden_input f, :north_east_lng, id: "north_east_lng" %>

      <button type='submit' style="display:none"></button>
</form>

Any other suggestions?

Thanks

7

Safari 11 should be good, but can you try the polyfill in case you are on an older version?

npm install --save formdata-polyfill

import "formdata-polyfill"

3 Likes
8

Thank you very much for your suggestion. It does the job.

Now is working like a charm.

Thanks again

1 Like
9

Hi, I came back :smiley:

My client pointed that on iPad 2 (iOS 9.3.5 - release date August 2016) is still not working.

Is there a browser version support limit? @chrismccord is there any way I can fix this or should I mention my client that we do not support older versions of safari?

I have the same iOS version like on this topic, but it seems that there are still some errors.

I’ll try to debug myself on a similar device hoping I’ll come back with some errors that might the investigation.

Some more env specs:

Phoenix: 1.4.11
Elixir: 1.9.1

Thanks.

10

Safari on iOS 9.3.5 reported the following error: Unexpected identifier 'promise'

The error was generated by the following code:

const API_URL = 'https://maps.googleapis.com/maps/api/js'
const CALLBACK_NAME = '__googleMapsApiOnLoadCallback'
const optionsKeys = ['channel', 'client', 'key', 'language', 'region', 'v']
let promise = null

module.exports = function (options = {}) {
    promise = promise || new Promise(function (resolve, reject) {...}
    ...
}

NOTE: This is a third party code, so I can not fix it.

What I’ve found on caniuse.com is that let is not supported on safari lower that v10.0

Can you show an example of babelrc. That would work on old Safari browsers?

Thanks.

11

You can check out the webpack config on the Phoenix LV project. LV itself transpiles let and does not use promises, so this is not on our side.

1 Like
12

Sure, I’ve noticed that is not on your side from my last comment. I wrote it though for future reference. It maybe useful for others.

Also in my last comment I was looking for some guidance, so thanks for the hint.