sparkartgroup-archive / sparkart.js

Easily interact with Sparkart's APIs via Javascript.
1 stars 0 forks source link

Widgets break if containers contain 3rd-party data attributes #26

Open pushred opened 11 years ago

pushred commented 11 years ago

Got the following error in the login widget when I initialized jQuery UI Dialog against the same container.

Uncaught TypeError: Illegal invocation 3553.js:7203
add 3553.js:7203
buildParams 3553.js:7261
buildParams 3553.js:7256
buildParams 3553.js:7256
buildParams 3553.js:7256
buildParams 3553.js:7256
buildParams 3553.js:7256
buildParams 3553.js:7256
buildParams 3553.js:7256
buildParams 3553.js:7256
buildParams 3553.js:7256
jQuery.param 3553.js:7223
jQuery.extend.ajax 3553.js:7853
Fanclub.request 3829.js:455
Fanclub.post 3829.js:520
Fanclub.login 3829.js:250
(anonymous function) 3829.js:553
jQuery.event.dispatch 3553.js:3063
elemData.handle.eventHandle
Fauntleroy commented 11 years ago

Looks like the problem is due to random crap getting into our parameters. This is due to the ability to use data attributes to pass parameters to the widgets. Some jquery plugins are also using data params, and since I just pull in every param on the widget I get all this extra info as well.

This might require a somewhat radical solution. The most likely one is namespacing data attributes: data-sparkart-id or just getting rid of the ability to pass parameters with data altogether. There's also the possibility of whitelisting data parameters, but that might still cause issues in rare edge cases.

pushred commented 11 years ago

Ok I think I wrapped all the widgets successfully with a separate <div> for the dialogs, but now when the login widget is drawn this happens:

XMLHttpRequest cannot load https://services.sparkart.net/api/v1/consumer/undefined.json?key=d828a4cb-f8a7-4bf5-a5bb-5a9eed9c27cb. Origin http://preview.229.sites.storytellerhq.com is not allowed by Access-Control-Allow-Origin.
SyntaxError
arguments: Array[0]
get message: function () { [native code] }
get stack: function () { [native code] }
set message: function () { [native code] }
set stack: function () { [native code] }
type: "unexpected_eos"
__proto__: Error
 3829.js:482
(anonymous function) 3829.js:482
fire 3553.js:974
self.fireWith 3553.js:1082
done 3553.js:7790
callback
pushred commented 11 years ago

That was my bad, when I moved the dialog stuff to a wrapper I forgot to update the selector used for drawing the widget. So that was causing the above... should definitely find a solution for these data attributes though, or add much better error reporting. I like the whitelist approach as it keeps things simple for the most part. I suspect Facebook does something like that for their plugins.

pushred commented 11 years ago

Deprioritized.