Foundation 4 and Concrete5: Select / forms does not work
Permalink
Hey,
has anybody figured out how to use foundation 4 in themes and use the custom form elements?
http://foundation.zurb.com/docs/components/custom-forms.html#js...
If the user has access to the edit bar it does not work, without the edit bar everything works fine. There no errors in the chrome web dev tools and all js files are loaded correctly....
Thanks in advance!
Matthias
has anybody figured out how to use foundation 4 in themes and use the custom form elements?
http://foundation.zurb.com/docs/components/custom-forms.html#js...
If the user has access to the edit bar it does not work, without the edit bar everything works fine. There no errors in the chrome web dev tools and all js files are loaded correctly....
Thanks in advance!
Matthias
Thanks for the link John! Unfortunately that does not fix my problems :/
Out of curiosity, did you include zepto as they said? Because zepto and jquery loaded by C5 will totally conflict. Foundation 4 is built to work with Zepto OR jquery. In C5 using zepto would require to not load jquery at all.
<script>
document.write('<script src=<?= $this->getThemePath() ?>/javascripts/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</script>I used this snippet, but now commented it out, because jquery is loaded when the edit bar is visible in c5 (please correct me if I'm wrong).
Foundation 4 uses jquery 1.9, my c5 is now using "1.7.2". I overwrote c5s jquery to 1.9, but the dropdowns still do not work.
The problem in detail is that the dropdown click event is not triggered, because it always takes me to the top of the page (<a href="#"). So somehow the event binding does not work...
foundation.forms.js:
.on('click.fndtn.forms', 'form.custom div.custom.dropdown a.current, form.custom div.custom.dropdown a.selector', function(e) { var $this = $(this), $dropdown = $this.closest('div.custom.dropdown'), $select = $dropdown.prev();
No guarantees, just speculating.....
I think it was jQuery 1.9 that deprecated a bunch of methods and event handlers. For compatibility with code written for 1.7.2 (as per c5), there is a jQuery compatibility plugin you would also need to load.
I think it was jQuery 1.9 that deprecated a bunch of methods and event handlers. For compatibility with code written for 1.7.2 (as per c5), there is a jQuery compatibility plugin you would also need to load.
Mh yeah I thought so too, but when I replaced "/concrete/js/jquery.js" with the 1.9 code it still did not work, so I think that probably bootstrap and foundation collide, because bootstrap maybe also changes some DOM elements and foundation loses track of the form elements (thats my guess so far).
I believe the backend needs 1.7.2 yeah, I've tried replacing with 1.9 for foundation and things just break.
I ended up adding an if in the c5 header element for if loggedIn use 1.7.2 otherwise 1.9.
I ended up adding an if in the c5 header element for if loggedIn use 1.7.2 otherwise 1.9.
I am working on upgrading my Foundation theme to work with Foundation 4 (it currently uses a hybrid of versions 2 and 3). It will include form integration, so the select issue will work.
http://www.concrete5.org/marketplace/themes/foundation/...
I hope to release Foudation 2 (which will use version 4) by sometime in April.
http://www.concrete5.org/marketplace/themes/foundation/...
I hope to release Foudation 2 (which will use version 4) by sometime in April.
hey, nice to hear that!
do you have any advice what possibly could go wrong by now with the foundation custom forms?
do you have any advice what possibly could go wrong by now with the foundation custom forms?
Hi Matthias,
Have you worked out how to fix this yet?
I was encountering the same issue.
I finally found out what the problem was b complete chance.
I had concrete5.5.1 and Foundation 3, and everything worked fine. I could use dropdowns in both logged in and logged out mode.
I then created a new site using concrete5.6.1.2 and Foundation 3, and then I encountered your problem, I couldn't use the dropdowns when I was logged in!
It took me a lot of detective work, but I finally found the problem, and it had to do with bootstrap.js, so I looked into the code in this file, and tried to work out what was wrong.
The admin section of concrete 5.6+ uses twitter bootstrap, and parts of the functionality of twitter bootstrap is very similar to the functionality of foundation, including the names of functions... This is what the issue is.
Twitter bootstrap looks for and replaces dropdowns, and uses a class called dropdown on the divs for their dropdowns just like foundation.
I did a search replace for anything that is in a custom form with a dropdown style in my foundation css, and changed it to zdropdown (my zurb-dropdown)
I then did the same in the foundation.forms.js for anything with .dropdown and changed it to .zdropdown and then everything was working fine again.
I'm not using button dropdowns on my site, and so haven't changed that code, but I'm sure that doing the same for that will work fine too.
Hope this helps! I spent many hours scratching my head and pulling my hair out on this one!
Adam.
Have you worked out how to fix this yet?
I was encountering the same issue.
I finally found out what the problem was b complete chance.
I had concrete5.5.1 and Foundation 3, and everything worked fine. I could use dropdowns in both logged in and logged out mode.
I then created a new site using concrete5.6.1.2 and Foundation 3, and then I encountered your problem, I couldn't use the dropdowns when I was logged in!
It took me a lot of detective work, but I finally found the problem, and it had to do with bootstrap.js, so I looked into the code in this file, and tried to work out what was wrong.
The admin section of concrete 5.6+ uses twitter bootstrap, and parts of the functionality of twitter bootstrap is very similar to the functionality of foundation, including the names of functions... This is what the issue is.
Twitter bootstrap looks for and replaces dropdowns, and uses a class called dropdown on the divs for their dropdowns just like foundation.
I did a search replace for anything that is in a custom form with a dropdown style in my foundation css, and changed it to zdropdown (my zurb-dropdown)
I then did the same in the foundation.forms.js for anything with .dropdown and changed it to .zdropdown and then everything was working fine again.
I'm not using button dropdowns on my site, and so haven't changed that code, but I'm sure that doing the same for that will work fine too.
Hope this helps! I spent many hours scratching my head and pulling my hair out on this one!
Adam.
http://www.concrete5.org/documentation/how-tos/developers/using-zur...