Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Zepto incompatible with Bootstrap 3 #791

Closed
mossroy opened this Issue Jul 27, 2013 · 22 comments

Comments

Projects
None yet
10 participants

mossroy commented Jul 27, 2013

I was using happily Bootstrap 2 with Zepto, integrated thorugh require.js.

Today I've tried to integrate Bootstrap 3 (very recently released as RC1) with Zepto.
It seems to work for basic things, but if failed when I tried to use the "responsive navbars" feature of Bootstrap 3 : http://twitter.github.io/bootstrap/components/#navbar-responsive
If you resize the screen to a small width, the navbar collapses into a button.
If you click this button, it should display the menu.
It works correctly when using jQuery, but does not when using Zepto v1.0-1-ga3cab6c instead.
It gives the following error message :
TypeError: str is undefined
at line 103 of zepto.js (my line numbers are probably not accurate because I added lines to integrate zepto with require.js). Anyway, it is in function dasherize :
return str.replace(/::/g, '/')

If I put a breakpoint on this line, I see it is called by line 657 of bootstrap.js (again, line number not accurate) :
var option = data ? 'toggle' : $this.data()
It is in under comment // COLLAPSE DATA-API

I think it might simply come from the fact that jQuery handles a call of data() with no arguments. In this case, it seems to return a list of the data elements : http://api.jquery.com/data/
And it seems that Zepto does not support a call to data() with no arguments, because the first instruction of this function is :
var data = this.attr('data-' + dasherize(name), value)

Collaborator

mislav commented Jul 27, 2013

For Boostrap compatibility, you have to compile Zepto with optional
modules: "selector", "data". So ensure that first.

However we haven't tested Zepto yet with Bootstrap 3

mossroy commented Jul 27, 2013

I downloaded Zepto from http://zeptojs.com/zepto.js , so I suppose I don't have these modules, based on what is stated in https://github.com/madrobby/zepto#readme

Sorry for the inconvenience.
Based on the changelog http://zeptojs.com/#changelog and reading "Zepto is now compatible with Twitter Bootstrap", I did not suspect that there might be different builds of Zepto, and that the default one was not compatilble with Bootstrap.

Thanks for the info

Owner

madrobby commented Nov 24, 2013

Closing stale issue. If anyone can confirm or deny that Bootstrap 3 is working with Zepto or not, please feel free to add this information and reopen this issue if necessary.

@madrobby madrobby closed this Nov 24, 2013

breams commented Dec 17, 2013

I can confirm that Zepto 1.1.2 (with all optional components included) does not work with Bootstrap 3.0.3 when using the tabs component.

The console produces the following errors, where line 1943 is equivalent to line 69 of selector.js.

error performing selector: ".active:last a" zepto.js:1943
Uncaught SyntaxError: Failed to execute query: '.active:last a' is not a valid selector. zepto.js:1944

Somebody looking at it from the Bootstrap side previously closed an issue due to it being Zepto's problem, not Bootstrap's (twbs/bootstrap#7025).

Collaborator

mislav commented Dec 17, 2013

OK, reopening. Yeah, this is an old issue due to Bootstrap using a nonstandard CSS pseudo-selector and our "selector" module not being able to provide it since it appears in the middle of the CSS query and not in the end. #642 (comment)

@mislav mislav reopened this Dec 17, 2013

Contributor

zdroid commented Jan 26, 2014

@mislav Bootstrap guarantees full-usage only with jQuery. :(

Though, Zepto.js works with Bootstrap 3.0.3 (I tested it with Bootstrap docs).

a-x- commented Feb 8, 2014

Currently Bootstrap v3.1.0 does not work with latest Zepto v1.2.1.

Example:
$('someSelector').popover(); // Init the popover for element(s) by someSelector

TypeError: name is undefined

Place:

     data: function(name, value){
          var data = this.attr('data-' + name.replace(capitalRE, '-$1').toLowerCase(), value)
          return data !== null ? deserializeValue(data) : undefined
     }

Stack parent: options = $.extend({}, this.getDefaults(), this.$element.data(), options)

Contributor

zdroid commented Feb 8, 2014

Yes. Bootstrap may start using Zepto in v4, but not in v3, per SemVer.

2014-02-08 22:35 GMT+01:00 a-x- notifications@github.com:

Currently Bootstrap v3.1.0 does not work with latest Zepto v1.2.1.

Example:
$('someSelector').popover(); // Init the popover for element(s) by
someSelector

TypeError: name is undefined

Place:

 data: function(name, value){
      var data = this.attr('data-' + name.replace(capitalRE, '-$1').toLowerCase(), value)
      return data !== null ? deserializeValue(data) : undefined
 }

Stack parent: options = $.extend({}, this.getDefaults(),
this.$element.data(), options)


Reply to this email directly or view it on GitHubhttps://github.com/madrobby/zepto/issues/791#issuecomment-34557039
.

Zlatan Vasović - ZDroid

Collaborator

mislav commented Feb 9, 2014

@a-x- Your problem can be solved by including the optional "data" module. Zepto doesn't support Bootstrap 100%, but it's pretty close if you include the "data" and "selector" modules. I think your use case will work. Please see README for instructions on optional modules.

a-x- commented Feb 15, 2014

@mislav Thank you for your answer! Unfortunately, it isn't work for me.
I didn't receive some errors and i didn't find source of trouble. If i'll have a bit of time, i grab more information about.

/I'm sorry for my English/

a-x- commented Feb 15, 2014

@zdroid I hope so too.

Contributor

zdroid commented Feb 15, 2014

Adding jQuery = Zepto may fix your problems, but I'm not sure so far.

a-x- commented Feb 15, 2014

@zdroid Yes, this action was my first.

Contributor

zdroid commented Feb 15, 2014

:(

2014-02-15 22:45 GMT+01:00 Александр notifications@github.com:

@zdroid https://github.com/ZDroid Yes, this action was my first.


Reply to this email directly or view it on GitHubhttps://github.com/madrobby/zepto/issues/791#issuecomment-35168912
.

Zlatan Vasović - ZDroid

I am running Bootstrap 3.1.1 and am setting jQuery = Zepto, and have built with

MODULES="zepto event selector deferred callbacks data ajax form ie fx fx_methods" npm run-script dist 

The Nav buttons work in the default case, but when the page collapses down into the single nav button, the nav button does not open when clicked. More frustratingly, it creates no error messages.

I have looked at the culprits mentioned above and don't see the problem. I am going to dig into this further, but has anyone else run into this bit?

Collaborator

mislav commented Apr 25, 2014

@rrichardson It's probably due to that part of Bootstrap using a nonstandard CSS selector .active:last a, which doesn't work with Zepto even with the "selector" module.

@mislav I don't think that is the case. I have traces set up all around that selector and it's not even being executed. The execution path stops before that point, but again, with no errors which is weird. I have been digging at it for a bit with no solution, I hope to find it soon.

@mislav, OK. I have found the origin of the problem. Zepto is actually not the culprit, in fact, it works perfectly fine for my use case! The problem was I was working from some poor documentation where the target class referenced was navbar-xs-collapse. I assumed that this class was being automatically applied using the bootstrap 3 "responsive by default" rules. It turns out that this was just wrong. If I manually apply that classname to the div that I wish to have expanded. It works.

What this means for me is that the above mentioned nav button, when collapsed works as expected. The nav dropdowns work as well. So this issue could probably be closed for Bootstrap 3.1.1. I can post a working gist if needed.

mancvso commented Jan 30, 2015

Yes, please, a working gist will be helpful, specially for my use-case.

in my case, bootstrap 3.3.5, Zepto 1.1.6 - modules : zepto event ajax form ie selector deferred data, and it fails in bootstra.js#13 :
var version = $.fn.jquery.split(' ')[0].split('.')

(split is not a function)

Bootstrap 4 alpha is now out! If I get a chance, I'll test with Zepto. 😄

Owner

madrobby commented Jul 12, 2016

Closing this because there was no response to our questions in a while. Feel free to reopen with the requested information!

@madrobby madrobby closed this Jul 12, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment