data-role="page" is not working properly

[aleriver87]

jquery.mobile-1.4.5.min.js:4 Uncaught TypeError: Cannot read property 'concat' of undefined at jquery.mobile-1.4.5.min.js:4 at jquery.mobile-1.4.5.min.js:4 at jquery.mobile-1.4.5.min.js:3 at jquery.mobile-1.4.5.min.js:3

The error is in line 3337: mouseEventProps = $.event.props.concat( mouseHookProps ),

My friend try to fix it using: mouseEventProps = $.event.props == undefined ? null : $.event.props.concat( mouseHookProps == undefined ? [] : mouseHookProps ),

This fix repair the error message related to Concat, but show a new error: Uncaught TypeError: url.indexOf is not a function at jQuery.fn.init.jQuery.fn.load (jquery-3.3.1.js:9857) at jquery.mobile-1.4.5_mod.js:6176 at jquery.mobile-1.4.5_mod.js:6180 at jquery.mobile-1.4.5_mod.js:22 at jquery.mobile-1.4.5_mod.js:24

The error is in line 6176: $.mobile.window.load( pageIsFullyLoaded );

All of this occurs using jQuery Core - All 3.x Versions.

When I use jQuery Core 2.2.4 the error message "pageIsFullyLoaded" disappears and the data-role="page" began to work properly.

[FritzTheBlitz]

as http://jquerymobile.com/ shows, jqm 1.4.5 (released in october 2014) only supports jQuery core 1.8 - 1.11 / 2.1

[slavap]

@aleriver87 Use jQuery Migrate together with jQuery3, it's here: https://github.com/jquery/jquery-migrate Then jQuery Mobile will work just fine, the only problem I've encounter was non-closing popups, but it's easy to fix with back-ported changes from 1.5 version:

function pointInRectangle( x, y, windowCoordinates ) {
    return ( x >= windowCoordinates.x && x <= windowCoordinates.x + windowCoordinates.cx &&
             y >= windowCoordinates.y && y <= windowCoordinates.y + windowCoordinates.cy );
}

function isOutOfSight( element, windowCoordinates ) {
    var offset = element.offset(),
        width = element.outerWidth( true ),
        height = element.outerHeight( true );

    return !(
        pointInRectangle( offset.left, offset.top, windowCoordinates ) ||
        pointInRectangle( offset.left + width, offset.top, windowCoordinates ) ||
        pointInRectangle( offset.left + width, offset.top + height, windowCoordinates ) ||
        pointInRectangle( offset.left, offset.top + height, windowCoordinates ) );
}

function getWindowCoordinates( theWindow ) {
    return {
        x: theWindow.scrollLeft(),
        y: theWindow.scrollTop(),
        cx: ( theWindow[ 0 ].innerWidth || theWindow.width() ),
        cy: ( theWindow[ 0 ].innerHeight || theWindow.height() )
    };
}

$.widget( "mobile.popup", $.mobile.popup, {
    // See https://github.com/jquery/jquery-mobile/commit/d34c86ae14d4ea603357be5e326de1fb8c31dbf9#diff-1d5adb10249a8b87ebe274787293060e
    // On jQuery 3.3.1 popups don't close without this fix.
    _createPrerequisites: function( screenPrerequisite, containerPrerequisite, whenDone ) {
        var prerequisites,
            self = this;

        prerequisites = {
            screen: $.Deferred(),
            container: $.Deferred()
        };

        prerequisites.screen.done( function() {
            if ( prerequisites === self._prerequisites ) {
                screenPrerequisite();
            }
        });

        prerequisites.container.done( function() {
            if ( prerequisites === self._prerequisites ) {
                containerPrerequisite();
            }
        });

        $.when( prerequisites.screen, prerequisites.container ).done( function() {
            if ( prerequisites === self._prerequisites ) {
                self._prerequisites = null;
                whenDone();
            }
        });

        self._prerequisites = prerequisites;
    },

    // See https://github.com/jquery/jquery-mobile/commit/a61d152a21008f3c7edc7f2415710553d625bb95#diff-1d5adb10249a8b87ebe274787293060e
    _closePopup: function( theEvent, data ) {
        if ( ( theEvent && theEvent.isDefaultPrevented() ) || $.mobile.popup.active !== this || !this._isOpen ) {
            return;
        }
        this._super( theEvent, data );
    },

    // See https://github.com/jquery/jquery-mobile/commit/3572a655b5de1fa2bc752059b0df610b353fd67d#diff-1d5adb10249a8b87ebe274787293060e
    _handleWindowResize: function(/* theEvent */) {
        if ( this._isOpen && this._ignoreResizeTo === 0 ) {
            if ( isOutOfSight( this._ui.container, getWindowCoordinates( this.window ) ) &&
                ( this._expectResizeEvent() || this._orientationchangeInProgress ) &&
                !this._ui.container.hasClass( "ui-popup-hidden" ) ) {
                // effectively rapid-close the popup while leaving the screen intact
                this._ui.container
                    .addClass( "ui-popup-hidden ui-popup-truncate" )
                    .removeAttr( "style" );
            }
        }
    }
});