DrewDahlman / Mason

Mason.js for creating a perfect grid with jQuery.
http://masonjs.com/
MIT License
1.22k stars 183 forks source link

Uncaught TypeError: Cannot set property '2' of undefined #40

Closed UnaOmnia closed 9 years ago

UnaOmnia commented 9 years ago

I have this issue as well. I see that there are others. I am not using the column parameter, so I can see this can be an issue with the JavaScript's default column parameters.

I use 2 promoted items. One size is 2 x 3 (big) and one size is 1 x 3 (wide). and the ratio is 1.1 (which i assume means 1 height x 1 width, aka Aspect Ratio aka mine would be square)..

Anyway, I am not even sure I wanted to get in to the element.matrix[] stuff at all. But I got an error on this error on line 190 of mason.js.

I use a Jquery .load() ajax to call the next page of a WordPress paginated loop. I use more javascript to form those posts in to the proper html markup as you show in your demo.

I use PHP to randomize the class to add big and wide classes to promote boxes. I thought that was the idea. Otherwise, does this JS add the promoted classes itself? I only made it have like 10% of being class "big" and 15% of being class "wide" and it usually works out that it has 1-2 big and 2-5 wide.. so I assumed everything was working.

Load 1 always works without error. All the time. The randomization works great! I can then use CSS to change the appearance of the promoted posts, so its amazing! Load 2 ALSO WORKS!! As in, I have been successfully about to combine this plugin with a .load() AJAX call of a WordPress paginated loop, and have the size randomize.

Load 1 and load 2 ALWAYS WORK, and I even added loading elements so the loading appearance is okay.. the div that gets clone() (usually the first filler box) now is a loading box. Then I have to use index and eq() to swap out content to get the posts to appear in the correct order. That is working beautifully as well.

The thing is Load 3. If I press the load more button I created twice, I get:

"Uncaught TypeError: Cannot set property '2' of undefined"

I eliminated the change of it being any other error or any other line by using the uncompiled version, and not compiling it myself at all either. I also had spent several hours trouble shooting before I ever got to that point.

I believe it could be a parse issue that is happening. When I read more about element.matrix[] I found that many people needed to parse the variables inside. Also the error itself is saying "Cannot set property of '2' ", 2 being a number not a variable or attribute or property of any kind, it is a number. Right? I am not sure I am not an expert.

localnationalnews.com

I am paying for help on this assignment. I am also needing many other features. But all I want to do is get past this error. I have several other solutions for other features. I guess what I am really saying is I am willing to help and devote resources to making this better.

UnaOmnia commented 9 years ago

Inspect element to see markup.. script is last < script > before < / body >

UnaOmnia commented 9 years ago

This might also help.. "What if I need specific sized elements vs random?"

My dimensions should be based on this example, and it is a .load() ajax, as in, you could see it run multiple times on the same page to see what circumstances it fails.. presently it runs 2 times and fails on the 3rd time.

DrewDahlman commented 9 years ago

This is fantastic!

I need to read through your notes a bit more, but what I am gathering is similar to other issues where there is a parse issue through the matrix of booleans.

Basically what I think is happening is on my part in that way that I am dealing with the sorting of promoted and not and how I am pushing those elements into the array.

What I think is happening is a counting error. This error happens when promoted are overloaded, such as specifying a certain amount of specific sizes which mason SHOULD account for but isn't.

Tomorrow I will go over everything and look at it all, this is an error that needs to be corrected. I am in the middle of a rewrite that should fix these issues but it really helps to have more test situations to make sure it's all working correctly.

Drew

Sent from my Delorean

On Jan 3, 2015, at 4:20 PM, UnaOmnia notifications@github.com wrote:

I have this issue as well. I see that there are others. I am not using the column parameter, so I can see this can be an issue with the JavaScript's default column parameters.

I use 2 promoted items. One size is 2 x 3 (big) and one size is 1 x 3 (wide). and the ratio is 1.1 (which i assume means 1 height x 1 width, aka Aspect Ratio aka mine would be square)..

Anyway, I am not even sure I wanted to get in to the element.matrix[] stuff at all. But I got an error on this error on line 190 of mason.js.

I use a Jquery .load() ajax to call the next page of a WordPress paginated loop. I use more javascript to form those posts in to the proper html markup as you show in your demo.

I use PHP to randomize the class to add big and wide classes to promote boxes. I thought that was the idea. Otherwise, does this JS add the promoted classes itself? I only made it have like 10% of being class "big" and 15% of being class "wide" and it usually works out that it has 1-2 big and 2-5 wide.. so I assumed everything was working.

Load 1 always works without error. All the time. The randomization works great! I can then use CSS to change the appearance of the promoted posts, so its amazing! Load 2 ALSO WORKS!! As in, I have been successfully about to combine this plugin with a .load() AJAX call of a WordPress paginated loop, and have the size randomize.

Load 1 and load 2 ALWAYS WORK, and I even added loading elements so the loading appearance is okay.. the div that gets clone() (usually the first filler box) now is a loading box. Then I have to use index and eq() to swap out content to get the posts to appear in the correct order. That is working beautifully as well.

The thing is Load 3. If I press the load more button I created twice, I get:

"Uncaught TypeError: Cannot set property '2' of undefined"

I eliminated the change of it being any other error or any other line by using the uncompiled version, and not compiling it myself at all either. I also had spent several hours trouble shooting before I ever got to that point.

I believe it could be a parse issue that is happening. When I read more about element.matrix[] I found that many people needed to parse the variables inside. Also the error itself is saying "Cannot set property of '2' ", 2 being a number not a variable or attribute or property of any kind, it is a number. Right? I am not sure I am not an expert.

localnationalnews.com

I am paying for help on this assignment. I am also needing many other features. But all I want to do is get past this error. I have several other solutions for other features. I guess what I am really saying is I am willing to help and devote resources to making this better.

— Reply to this email directly or view it on GitHub.

UnaOmnia commented 9 years ago

Glad to hear your enthusiasm. It is not common in the programming world to have such a comment as mine met with such willingness to work together. I feel your project will be great, because it will work as a solution for randomness versus justification. That is HUGE. If you can solve randomness versus justification AND make it open source and editable AND make it work with platforms like WordPress you could be a multi-millionaire. I would love to work with you on this.

For now I am happy with just getting past this error. I think I can get us closer on that piece. I am going to do some of my own research and get back to you as soon as I have anything. I have a client on my heels so I need to produce a result like YESTERDAY.

DrewDahlman commented 9 years ago

Haha I know the feels man.

I will be at my machine tomorrow to take a look and work on the rest of the rewrite

Feel free to fork and tweak as you want and if you find a fix issue a pull request. Currently I am not pulling them in because of the rewrite but the more input and bugs found the better so that I can set up tests against them to confirm.

Sent from my iPhone

On Jan 3, 2015, at 7:58 PM, UnaOmnia notifications@github.com wrote:

Glad to hear your enthusiasm. It is not common in the programming world to have such a comment as mine met with such willingness to work together. I feel your project will be great, because it will work as a solution for randomness versus justification. That is HUGE. If you can solve randomness versus justification AND make it open source and editable AND make it work with platforms like WordPress you could be a multi-millionaire. I would love to work with you on this.

For now I am happy with just getting past this error. I think I can get us closer on that piece. I am going to do some of my own research and get back to you as soon as I have anything. I have a client on my heels so I need to produce a result like YESTERDAY.

— Reply to this email directly or view it on GitHub.

Jamie452 commented 9 years ago

@DrewDahlman, just read through some of the issues that have been raised, looking for a solution to an issue I raised over at: https://github.com/DrewDahlman/Mason/issues/42

If you're in the middle of a rewrite, could I suggest some sort of append functionality, preferably something that doesn't redraw everything - only the new elements added to the bottom?

DrewDahlman commented 9 years ago

hey @Jamie452 I saw your other comment, and yes I can work out a better method for appending to mason and have it reposition but keep previous elements.

You can follow along the current build on the 2.0 branch - it is HIGHLY in dev mode, but you can see what changes I am bringing as well as refinements.

Cheers!

UnaOmnia commented 9 years ago

I am still ready to roll on this.. whatever I can do to help..

Jamie452 commented 9 years ago

Just wondering how v2.0 is coming along?

To implement infinity scrolling and to get around the issue that there is no append method, I tried to create new containers on the DOM when the bottom of the page is reached and then create a new instance of Mason.JS to the newly created container.

Like @UnaOmnia pointed out; The first page loads in without error, then the second page loads in, but generates the following error: Uncaught TypeError: Cannot set property '0' of undefined without inserting any filler blocks. After that it doesn't bring in the 3rd page at all.

Could it be that when the next page comes in it overwrites the previous instance, and then because the document size would have changed, it tries to redraw but can't find something?

DrewDahlman commented 9 years ago

Check out the 2.0 branch. It has the most current code.

Right now everything is working as it should, and I am now adding enhancements and new features.

Sent from my iPhone

On Jan 19, 2015, at 10:30 AM, Jamie Street notifications@github.com wrote:

Just wondering how v2.0 is coming along?

To implement infinity scrolling and to get around the issue that there is no append method, I tried to create new containers on the DOM when the bottom of the page is reached and then create a new instance of Mason.JS to the newly created container.

Like @UnaOmnia pointed out; The first page loads in without error, then the second page loads in, but generates the following error: Uncaught TypeError: Cannot set property '0' of undefined without inserting any filler blocks. After that it doesn't bring in the 3rd page at all.

Could it be that when the next page comes in it overwrites the previous instance, and then because the document size would have changed, it tries to redraw but can't find something?

— Reply to this email directly or view it on GitHub.

UnaOmnia commented 9 years ago

it turned out to be the container. When I lazy loaded more grids, I did not make those grids have a container class that would make them width:100%; and position: relative; That is why only the 3rd load failed. I realized it had something to do with 1st load and 2nd load working but not 3rd load. That means the html markup created for 2nd load wasn't right for 3rd load to work. I had guessed. Turned out to be the CSS of the container.. as in you need to be sure each grid that is lazy loaded has a container with correct corresponding CSS (.mason-container {width:100%; and position: relative; }) etc.