Query Selector All error

[slimeygecko]

When I tried replicating the demo, I get this error:

Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Element': '> .bellows__item > .bellows__content' is not a valid selector.zepto.min.js:2 T.qsazepto.min.js:2 n.fn.findbellows.js:59 Bellows._initbellows.js:37 Bellowsbellows.js:217 (anonymous function)zepto.min.js:2 (anonymous function)zepto.min.js:2 n.fn.eachbellows.js:206 $.fn.bellows(index):44 (anonymous function)

[scalvert]

Hey @MikeWoodward,

What version of bellows are you using?

Zepto doesn't support descendent selectors in delegated event handlers, so '> .bellows__item > .bellows__content' would error out there, but should work using find. We only use that descendent selector when wrapping each bellows item.

Could you post some code so I can see what you're doing?

[IrisClasson]

I'm getting the same error replicating the demo

[IrisClasson]

I set up the project manually with a simple html page, required js libs (downloaded manually) with the example in the docs, also tried some other examples in the examples folder. Not using jQuery in any of them (prefer not to).

Some quick debugging shows the problem is somewhere here in bellows (unless I'm doing something wrong):

_wrapContent: function($items) {
            $items
                .find(selectors.ITEM_CONTENT)
                // wrap content section of each item to facilitate padding
                .wrap('<div class="bellows__content-wrapper" />')
                // add aria-hidden attribute to all hidden content wrappers
                .parents('.bellows__item:not(.bellows--is-open)')
                .find(selectors.ITEM_CONTENT_WRAPPER)
                .attr('aria-hidden', true);
        }

In zepto it then produces the error on this line:

else if (this.length == 1) result = $(zepto.qsa(this[0], selector))

[scalvert]

So if you run grunt serve, and view the examples page at http://localhost:3000/examples/index.html, is the problem reproducible?

I should note that Bellows is built off a custom version of Zepto. Not custom in the sense that we hacked it, but custom built. In the lib folder of the repo you will find the custom build, which includes Zepto with a number of other modules built into it.

[scalvert]

Since I haven't been able to reproduce this, I'm going to close for now. Feel free to reopen if it's legit!

[drwlrsn]

I get the same error. I am not doing anything exciting.
Here is what bower has installed:

├─┬ bellows#5.0.0 extraneous
│ ├── mobify-velocity#1.1.2
│ ├─┬ plugin#3.0.0
│ │ ├── requirejs#2.1.15
│ │ └── requirejs-text#2.0.13
│ ├── requirejs#2.1.15
│ └── requirejs-text#2.0.13
├── react#0.12.2 extraneous
└── zepto#1.1.6 extraneous

Here is what my JS looks like:
$(".bellows").bellows();

Now that we have that out of the way. As @slimeygecko mentions document.querySelectorAll() is trying to execute that CSS selector.

You can verify that this is not a valid query by running document.querySelectorAll('> .bellows__item > .bellows__content') in your favourite JS console. However this query will work with jQuery.

At first I thought you might be chaining selectors properties, but it appears you aren't. So changing to use valid selectors will fix this bad boy up.

[drwlrsn]

I think one could call this maybe a documentation problem. Right now it's not clear from the documentation that Bellows requires more than just the default Zepto build. It requires the following modules: selector, stack, and data. Which is totally fine since the selector module is like 3kb. Maybe point to Zepto Builder so it's fairly straight forward download.

However I still think those selectors are gnarly and needlessly disregard CSS3 grammar.

If those selectors are changed, then Bellows itself no longer relies on the selector module, and only the unit tests use some of its functions.

¯_(ツ)_/¯

[kpeatt]

@drwlrsn Thanks for the feedback! I agree that it makes sense to try to find a way to remove our need for the selector module. In the short term, I'll probably go the documentation route.

Would you be willing to let us know what project you're looking at using Bellows for? I'm always curious about how people are using our things.

[scalvert]

@drwlrsn thanks for the feedback! Agree this was an omission in the documentation!

In the short term, we're looking to move permanently to jQuery, so this should all be a moot point!

[drwlrsn]

@kpeatt I am building a box office web app for a local theatre production company in town. Nothing too exciting I am afraid.

[aerykk]

@drwlrsn That sounds exciting to me!

[kpeatt]

@drwlrsn Would love to see it when you're done!

[donnielrt]

Seems like this issue's been resolved closing!