Question

I’m getting an error in Google Chrome version 24.0.1312.52 m on a page using jQuery 1.8.2, jQuery UI 1.8.23 and Knockout 2.2.0. When I load the page, there’s a failed HTTP request to a URL that’s simply GET data: HTTP/1.1, and it’s generated from a statement that would initialize a jQuery UI Dialog (see the bottom of the post for the code). The page works fine, but this causes an error to appear in the status bar and JS console, and I’d like to avoid scaring my users. The error doesn’t appear in IE 9 or FireFox 15.0.1, but it does appear in Safari 5.1.7 (Windows). In the Chrome Inspector, the error’s call stack looks like this:

GET data:  jquery.min.js:2
    a.getComputedStyle.bH                      jquery.min.js:2
    p.extend.css                               jquery.min.js:2
    bZ                                         jquery.min.js:2
    b$                                         jquery.min.js:2
    p.fn.extend.show                           jquery.min.js:2
    p.each.p.fn.(anonymous function)           jquery.min.js:2
    a.fn.extend.show                           jquery-ui.min.js:5
    a.widget._create._renderAxis               jquery-ui.min.js:5
    a.widget._create                           jquery-ui.min.js:5
    a.Widget._createWidget                     jquery-ui.min.js:5
    a.widget.a.(anon function).(anon function) jquery-ui.min.js:5
    a.widget.bridge.a.fn.(anonymous function)  jquery-ui.min.js:5
    p.extend.each                              jquery.min.js:2
    p.fn.p.each                                jquery.min.js:2
    a.widget.bridge.a.fn.(anonymous function)  jquery-ui.min.js:5
    a.widget._makeResizable                    jquery-ui.min.js:5
    a.widget._create                           jquery-ui.min.js:5
    a.Widget._createWidget                     jquery-ui.min.js:5
    a.widget.a.(anon function).(anon function) jquery-ui.min.js:5
    a.widget.bridge.a.fn.(anonymous function)  jquery-ui.min.js:5
    p.extend.each                              jquery.min.js:2
    p.fn.p.each                                jquery.min.js:2
    a.widget.bridge.a.fn.(anonymous  function) jquery-ui.min.js:5
    ko.bindingHandlers.jqDialog.init           QualityWalkViewModel.js:78
    b.j.W                                      knockout-2.2.0.js:11
    g                                          knockout-2.2.0.js:43
    b.j                                        knockout-2.2.0.js:45
    W                                          knockout-2.2.0.js:10
    X                                          knockout-2.2.0.js:12
    Y                                          knockout-2.2.0.js:12
    X                                          knockout-2.2.0.js:12
    Y                                          knockout-2.2.0.js:12
    X                                          knockout-2.2.0.js:12
    b.Ca                                       knockout-2.2.0.js:58
    registerVM                                 3896:378
    (anonymous function)                       3896:362
    p.Callbacks.k                              jquery.min.js:2
    p.Callbacks.l.fireWith                     jquery.min.js:2
    p.extend.ready                             jquery.min.js:2
    D                                          jquery.min.js:2

There are three places where it references my scripts:

ko.bindingHandlers.jqDialog.init     QualityWalkViewModel.js:78
registerVM                           3896:378
(anonymous function)                 3896:362

3896 is the name of the page (it’s the ID segment of a URL like /WalkThrough/Edit/3896). The code from the referenced lines is:

(anonymous function)                 3896:362
360    <script type="text/javascript">
361    $( function() {
362        registerVM();                          <--- here

registerVM                           3896:378
374    <script type="text/javascript">
375        var vm; // debug
376        function registerVM() {
377            vm = new QualityWalkViewModel( initialQualityWalkData );
378            ko.applyBindings( vm );            <--- here
379        }

QualityWalkViewModel.js:78
68    ko.bindingHandlers.jqDialog = {
69        init: function( element, valueAccessor ) {
70            var options = ko.utils.unwrapObservable( valueAccessor() ) || {};
71            
72            // handle disposal
73            ko.utils.domNodeDisposal.addDisposeCallback( element, function() {
74                $( element ).dialog('destroy');
75            });
76    
77            // init the dialog
78            $( element ).dialog( options );     <--- here
79        }
80    };

This last script is a custom binding handler to initialize a jQuery UI dialog, adapted from http://jsfiddle.net/rniemeyer/WpnTU/ in response to MVC Knockout JS inside JQuery dialog

If I comment out the line $( element ).dialog( options );, the error goes away. Any idea why jQuery UI would generate an empty data: url and try to request it?

Answer 1

Fixed. The culprit is a data: url in jquery-ui.css around line 260, which has some discussion at http://bugs.jqueryui.com/ticket/7233 :

.ui-resizable-handle { background-image:url(data:); }

I have no idea why they though that was a better idea than

.ui-resizable-handle { background-image: none; }

which is what I overrode the rule with, and now there’s no page error in Chrome. At some point I need to register and post an update in the jQUI bug tracker.