TypeError: this.model is undefined

[SergeyBiryukov]

1. Open the media grid.
2. Click any image to open the modal. URL changes to /wp-admin/upload.php?item=123.
3. Refresh the page without closing the modal.
4. The URL is still /wp-admin/upload.php?item=123, but the modal does not reappear.
5. You'll see an error in JavaScript console:

   TypeError: this.model is undefined
   http://trunk.wordpress/wp-includes/js/media-views.js?ver=4.0-beta2-20140728
   Line 4643
   

[michalzuber]

Hi Sergey, I couldn't reproduce ​https://youtu.be/4OGdAtugRnw

[SergeyBiryukov]

Hmm, I can still reproduce on one install (in both Firefox and Chrome), but not on another.

The message is slightly different in Chrome:

Uncaught TypeError: Cannot read property 'get' of undefined
media-views.js?ver=4.0-beta2-20140728:4643

Investigating.

[SergeyBiryukov]

Replying to SergeyBiryukov:

Hmm, I can still reproduce on one install (in both Firefox and Chrome), but not on another.

Reproduced on another install by uploading a single image to an empty media library, deleting it via the modal, and refreshing the page. See #29057.

[SergeyBiryukov]

After [29322], I get another error.

In Firefox:

TypeError: b is undefined
http://trunk.wordpress/wp-includes/js/backbone.min.js?ver=1.1.2
Line 1

In Chrome:

Uncaught TypeError: Cannot read property '_listenId' of undefined
backbone.min.js?ver=1.1.2:1

[SergeyBiryukov]

I think there's some kind of a race condition that causes this.library.at( 0 ) in line 379 to be undefined until the items are loaded.

[SergeyBiryukov]

this.library.length is 0 on page load (when that code runs). It does increase later, as soon as the items are loaded. I guess we need to wait for that.

[adamsilverstein]

Any tips to reproducing this error? I've tried several browsers and can't seem trigger it.

[SergeyBiryukov]

Looks like the key to reproducing is having 30 or more images on a local install.

If I have 20 or less, it works. If I have 29, it fails almost every other time. If I have 30 or more, it consistently fails.

[michalzuber]

Couldn't reproduce with 120 images in Firefox 31 or Chrome 36.0.1985.125 on OSX.
SergeyBiryukov could you please provide the error message again from console for the current trunk?

[SergeyBiryukov]

Replying to michalzuber:

SergeyBiryukov could you please provide the error message again from console for the current trunk?

Still the same as in comment:4.

[michalzuber]

Tried on shared host to try if network bandwidth (latency) has something to do with it, also tried without define('SCRIPT_DEBUG', true);, but nothing.

[adamsilverstein]

Sergey, I am still unable to reproduce (locally) as well; want to clarify, you are getting this with the original bug description (click for detail modal, then refresh)? Some mention of deleting a single post above... Any other clues to reproduce would be great, and the console error again might be useful.

Replying to SergeyBiryukov:

Replying to michalzuber:

SergeyBiryukov could you please provide the error message again from console for the current trunk?

Still the same as in comment:4.

[azaozz]

Reproduced by navigating away while the Attachment Details modal is open. Click "View attachment page" or "Edit more details" then clicking Back. Error stack:

Uncaught TypeError: Cannot read property '_listenId' of undefined backbone.js?ver=1.1.2:222
Events.(anonymous function) backbone.js?ver=1.1.2:222
media.view.MediaFrame.EditAttachments.media.view.MediaFrame.extend.initialize media-grid.js?ver=4.0-beta2-29254-src:383
Backbone.View backbone.js?ver=1.1.2:1001
wp.Backbone.View.Backbone.View.extend.constructor wp-backbone.js?ver=4.0-beta2-29254-src:349
media.View.wp.Backbone.View.extend.constructor media-views.js?ver=4.0-beta2-29254-src:1637
child backbone.js?ver=1.1.2:1566
child backbone.js?ver=1.1.2:1566
child backbone.js?ver=1.1.2:1566
wp.media media-models.js?ver=4.0-beta2-29254-src:42
media.view.MediaFrame.Manage.media.view.MediaFrame.extend.openEditAttachmentModal media-grid.js?ver=4.0-beta2-29254-src:175
triggerEvents backbone.js?ver=1.1.2:207
Backbone.Events.trigger backbone.js?ver=1.1.2:148
media.controller.StateMachine.(anonymous function) media-views.js?ver=4.0-beta2-29254-src:334
media.view.MediaFrame.Manage.Router.Backbone.Router.extend.showItem media-grid.js?ver=4.0-beta2-29254-src:319
_.extend.execute backbone.js?ver=1.1.2:1265
(anonymous function) backbone.js?ver=1.1.2:1254
(anonymous function) backbone.js?ver=1.1.2:1481
_.some._.any underscore.js?ver=1.6.0:208
_.extend.loadUrl backbone.js?ver=1.1.2:1479
_.extend.start backbone.js?ver=1.1.2:1445
media.view.MediaFrame.Manage.media.view.MediaFrame.extend.createRouter media-grid.js?ver=4.0-beta2-29254-src:122
(anonymous function) underscore.js?ver=1.6.0:666

( Heh, media.view.MediaFrame.Manage.media.view.MediaFrame.extend.createRouter is nine "levels" deep? :) )

[michalzuber]

Tried with 80 images in Chrome and Firefox, but no error ​https://youtu.be/Ub3IXNnxhY8

[wonderboymusic]

This is happening because the Router is currently init'd as a timeout hack, as opposed to firing at the end of the async load of the library. Furthermore, if you keep the modal open with an attachment that is not on page 1, it will never be there on page load (as is currently implemented).

The loading of views and attachments are decoupled from global page state, so any dynamic pieces loaded with the library should be event-driven.

This has been problematic since the router was introduced here: [29057].

[wonderboymusic]

In 29420:

Media Grid: expose the $.Deffered() object in media.view.AttachmentsBrowser.updateContent() so the grid can call Backbone.history.start() when models actually exist.

This is a lot better then _.delay( this.pray, 1000 ), but needs continued study.

See #29052.

[SergeyBiryukov]

Cool, [29420] fixed the error. Glad I'm not crazy :)

Replying to wonderboymusic:

Furthermore, if you keep the modal open with an attachment that is not on page 1, it will never be there on page load (as is currently implemented).

Confirmed. This leads to a related issue:

1. Click any image not within the first 40 images (posts_per_page value set in media-models.js).
2. Refresh the page without closing the modal.
3. The modal reappears, but with a different image (the latest uploaded to the media library).

[wonderboymusic]

In 29525:

Media Grid: on page load with ?item= in the URL, if the model is not in the library: fetch it. Defer the triggering of edit:attachment until the model has been fetched.

Fixes #29052.