js/watch.js collides with jquery mobile in Google Chrome

joaoventura commented 10 years ago

Using js/watch.js in main.html throws an Uncaught TypeError when jquery mobile 1.4 is being used.

Uncaught TypeError: Object function (prop, handler){
        var desc = Object.getOwnPropertyDescriptor(this, prop);
        var newGet;
        var newSet;
        (...)
        });
    } has no method 'push'

This is the following trace

x.event.add                  jquery-1.10.2.js:4836
(anonymous function)              jquery-1.10.2.js:5651
x.extend.each                  jquery-1.10.2.js:657
x.fn.x.each                  jquery-1.10.2.js:266
x.fn.extend.on                  jquery-1.10.2.js:5650
x.fn.extend.bind                  jquery-1.10.2.js:7572
(anonymous function)                  jquery.mobile-1.4.0.js:4419
x.extend.each                  jquery-1.10.2.js:665
a.Widget._on                  jquery.mobile-1.4.0.js:4400
a.Widget._createWidget                  jquery.mobile-1.4.0.js:4262
a.(anonymous function).(anonymous function)                  jquery.mobile-1.4.0.js:4108
(anonymous function)                  jquery.mobile-1.4.0.js:4226
x.extend.each                  jquery-1.10.2.js:657
x.fn.x.each                  jquery-1.10.2.js:266
a.fn.(anonymous function)                  jquery.mobile-1.4.0.js:4225
a.mobile.gradeA.a.extend.initializePage                  jquery.mobile-1.4.0.js:14733
(anonymous function)                  jquery.mobile-1.4.0.js:14733
c                  jquery-1.10.2.js:3048
p.fireWith                  jquery-1.10.2.js:3160
x.extend.ready                  jquery-1.10.2.js:433
q                  jquery-1.10.2.js:104

Removing watch.js fixes the problem in Google Chrome (although the jquery mobile rendering seems unstable in Chrome with webalchemy).

This has no problem in Firefox..

skariel commented 10 years ago

I'll remove watch.js as its not used at all... what are the instabillities that you see in chrome? Maybe there are other collisions. I want to put all webqlchemy js into a namespace to avoid these cases

joaoventura commented 10 years ago

Basically, with jquery mobile, and even without watch.js, sometimes the Chrome browser does not render the jquery mobile content immediately. But if I resize the browser window, minimize/maximize, or open Developer Tools (with F12), suddenly, it renders the jquery mobile content. It seems that the change in the window triggers an event which starts rendering the jquery mobile content.

This only happens in Chrome. In Firefox, it works fine.. Tomorrow, I will post here a ready example for you to try in your computer.

joaoventura commented 10 years ago

I've created a simple example to test this collision thing:

This is my main.html. It is the same as yours, but includes some divs for a jquery mobile page app. Notice that js/watch.js is commented.

<!DOCTYPE html>
<html>
<head>
    --> stylesheets
    --> include
    --> meta
</head>
<body onload="init_communication()">
    <div id="mypage" data-role="page">
        <div id="header" data-role="header">Header</div>
        <div id="main" data-role="main"></div>
        <div id="footer" data-role="footer" data-position="fixed">Footer</div>
    </div>
</body>
<script>
    // the following files will be inserted here
    // this is good to serve via a websocket. Can be removed
    // if app is to be frozen

    --> js/reconnecting_ws.js
    //--> js/watch.js
    --> js/cookie.js
    --> js/vendor.js
    --> js/comm.js
    --> js/reconnection_overlay.js
    --> js/download_url.js
    --> js/classy.js
    --> js/weba.js

    // the following is good for freezing the app

    --> websocket
</script>
</html>

This is my python file. Basically, it "catches" the main "div" and adds some content. Since you are adding this content after the page creation, you will have to call jQuery's "create" method to recreate the mobile layout.

from webalchemy import server

class HellowWorldApp:

    stylesheets = ['http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css']

    include = ['http://code.jquery.com/jquery-1.10.2.min.js',
               'http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js']

    def initialize(self, **kwargs):
        self.rdoc = kwargs['remote_document']
        main = self.rdoc.getElementById('main')
        main.element(h1="Main content")
        main.element(button="A button")
        self.rdoc.JS('jQuery(' + main.varname + ').trigger("create")')

if __name__ == '__main__':
    # this import is necessary because of the live editing. Everything else works OK without it
    from helloworld import HellowWorldApp
    server.run(HellowWorldApp)

With this, it works both in Chrome and Firefox, if js/watch.js is commented. I cannot reproduce the instability of Chrome anymore, maybe I broke something while messing around yesterday.

So, it seems you just need to remove "watch.js", and it will work fine.

skariel commented 10 years ago

I just removed watch.js, it was not used anywhere.

Note you can write the last line of the initialize method above in a better way, which is not documented of course:

self.rdoc.JS('jQuery(#{main}).trigger("create")')

the varname of main is escaped this way...

skariel / webalchemy

js/watch.js collides with jquery mobile in Google Chrome #130