Windows 8 Phonegap Application JQuery Mobile Security Exception - jquery-mobile

I have created a windows 8 project using the phonegap 2.9.0 and then tried to use JQuery mobile library within it. But I get the following security exception. Any idea how to resolve this ?.
Exception was thrown at line 4, column 7009 in ms-appx://c6a291ce-903f-47ab-b167- cb8378ffb051/www/libs/jquery.core/jquery-1.9.1.min.js
0x800c001c - JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement. For more information, see http://go.microsoft.com/fwlink/?LinkID=247104.
If there is a handler for this exception, the program may be safely continued.

I have just run into the same problem. It appears that the grist of the matter is that the WinJS security model won't allow the JQuery dom manipulation when you create elements from strings e.g. using the .html() method.
See the below for more information:
http://blogs.msdn.com/b/windowsappdev/archive/2013/04/01/windows-store-app-support-in-jquery-version-2-0.aspx
http://net.tutsplus.com/tutorials/javascript-ajax/building-windows-store-applications-with-jquery-2-0/
In summary the clever people have produced a fix to this in JQuery 2.0.
So I'll be looking at using JQuery 2.0 but will it work with JQuery Mobile? I haven't determined that yet so I'll probably look at fully building and attaching the dom elements rather than using the .html() method.
But please note that I have not tried any of these approaches yet so cannot vouch for their validity.

Related

Polymer Dart - Multiple View

I'm trying to create a sample CRUD application using Dart and Polymers.
One think I noticed is almost all dart polymer examples have only one page. I'm trying to look for samples with multiple pages.
i.e.
Screen contains table of Person objects
Then when an Add button is clicked, it goes to the add view of the Person object
On the add page, there is a link to add some other child object.
This is very doable using only one screen, but am looking for a best practice in implementing multiple screens. In GWT it uses the Activities and Places. What is the dart counter part?
I saw on some other post using routes, but seems does not work on my Dart Editor. And I am not sure if this is still current as that posted almost a year now.
Route Example
ShadowRoot.resetStyleInheritance and ShadowRoot.applyAuthorStyles now deprecated in dart:html.
Please remove them from your code.
Uncaught Error: Illegal argument(s): No handler found for /routes_example.html#one
Stack Trace:
I just published a package for routing with Polymer (see https://github.com/bwu-dart/bwu_polymer_routing)
There are two links to simple demos available online.
I have a SDK dependency on 1.6.0 (dev-channel release) because I haven't tested it with Dart 1.5.x. I might remove this restriction with the next release.
Some highlights:
Hierarchical views are automatically created and inserted depending on the current route.
Route parameter values are automatically passed to the view attributes on route or parameter value change.
Parameter values are updated in the view without creating the view again.
The same code runs no matter if usePushState is enabled or disabled.
Mixin with event handlers for simple go-to-route links or buttons.
Mixin for adding DI support to your Polymer elements.
see also https://stackoverflow.com/a/25228357/217408

How do we build jquery mobile UI

i'm totally a beginner of jquery mobile, i'm wondering how does everybody build the UI?
by html markup or writing pure code?
if it's by html markup, then if i have a complex applicaiton , then i'm gonna have a very long html file with a lot of pages, how do you deal with that?
if with pure code, i don't find it easy to create widgets, the only i found it just to put the pure html code into a jquery object wrapper. it's not very object-oreinted, i want some simple ways like: var $aButton = new button( );
i had ios native app development experience, normally i write the ui with pure coding. i'm just wondering if there's way to build ui with pure code?
There's no official way to build the UI in pure code but no one stops you from writing your own "code generator".
Be warned:
Writing HTML is the easier way to do, because JQM will do all of the UI-manip.
I'm working on a UI generator for JQM which
will be released opensource. Still a lot to do but it already works more or less - see http://officejs.com
Check the erp5loader.js file which generates the whole app - there is only an empty index.html.
The factory section contains all methods necessary to generate JQM UI. The JSON files loaded show how to generate static and dynamic widgets as well as how to hook into navigation and global action bindings
Roll your own or wait until we are releasing ours :-)

Dart polymer custom element dynamically linking

I'm working with polymer elements in dart. I'm doing a single page web app. I'm wondering if there's a way to dynamically link the element I need for this page instead of linking (loading the source) all in the front. I know there is a deferred class that you can declare but I'm not sure it works with HTML template too. Any wayto dynamically link the element once you need it?
Thanks,
Yi
DeferredLibrary should work for this (might still have some bugs or limitations)
Using code in Dart that wasn't imported at compile time is currently not supported.

Preventing malicious overwrite of JQuery

Long story short:
We've had errors being logged concerning a JQuery/JQueryUI based system for some time. At it's core we're doing a pretty basic click link -> JQuery AJAX GET -> Open JQueryUI modal pattern.
The error we were getting appeared simple - "Object doesn't support property or method 'dialog'" - leading us to believe there was an error with JQueryUI. After expending a lot of time ruling out browser incompatibilities, bad code on JQuery's end, bad code on our end, angry code gods... we caught a lucky break. A 100% repro on one of the machines in the office.
Turns out the thing was riddled with adware - specifically [an older version of] easyinline - http://www.easyinline.com. When the user clicked any link a cascade of javascript files would be loaded, including reloading JQuery from Google's CDN.
For most links this isn't really a problem - they take you off the page anyway and everything reloads. But for our modals it meant that every modal link would stamp over our JQuery at the point the request was sent, resulting in the response trying to make use of the 'new' $ which would now be missing JQueryUI and any other plugins.
Initially we thought about making another global var ($$ or something) for 'our' JQuery and explicitly using that in our code instead of just $. The issue with that is that we were using a few other 3rd party tools which rely on $ and the adware-loaded $ is a different (older) version. So it's important that we preserve $ correctly.
Any ideas? I'm aware of JQuery's noConflict() method but after a cursory glance don't think it fits the bill.
Ultimately we've decided to re-establish our JQuery integrity when we receive any ajax responses (i.e. just before the open modal code is executed). All our ajax stuff is wrapped in our own handler so this was fairly easy to inject across the board.
Basically;
We have the original JQuery 'saved' - we've got it in-scope thanks to our handler but it could be easily put into a separate global (like $$) just after it is loaded. In our ajax response handler we've got a fairly straightforward check;
if (window.$ !== $$) {
window.$ = window.jquery = window.jQuery = $$;
}
This will reset the global jquery back to what it should be.
well this is just a work around and not a full fledged solution.
you can try multiple things here
1. if you have control over what the adware loads then just put in something like this if(!$) where they try to load the jquery
2. try loading your plugin at the end of the page
3.even if end of the page is not working. Try injecting the link(a script tag using document.write) to the plugins CDN in the Jquery document ready event. this would ensure that the plugins code would be loaded at the end when all the jquery is already loaded (not a preferred thing).

jQueryUI css errors

When I load jQueryUI on a Windows XP machine using Firefox 3.6.3, I get a bunch of css errors:
Error in parsing value for 'filter' Lines 18, 76, 77.
Unknown property 'border-top-left-radius' Line 274.
Unknown property 'border-top-right-radius' Line 275.
unknown property 'zoom' Lines 300,306,336,345,385,408.
Q: Should I just ignore these errors?
The basic reason for these CSS errors is that every browser has its own set of CSS properties that jQuery UI makes use of. For example:
-moz-user-select is only available in Firefox and Mozilla-based browsers.
Equivalent to this property, WebKit-based browsers (like Google Chrome and Safari) have -webkit-user-select.
jQuery UI makes use of these special CSS properties available in different browsers and this gracefully degrades to nothing if the browser doesn't support that particular property. jQuery UI makes pretty sure that all its widgets appear consistent across browsers. And that is the reason why its safe to avoid such errors without any visual artifacts being generated by them.
Yes, you should ignore these.
There are attributes in there to support all browsers, not all necessarily valid CSS, but it works.
You can see a full list of current validation errors here (jQuery UI 1.8)
Yes. jQuery UI is using properties that are not consistent across browsers. Since there really isn't any "logic" in CSS, they have to list all possibilities for all browsers.
These errors are safe to ignore.

Resources