search

thednp / bootstrap.native

Bootstrap components build with Typescript
http://thednp.github.io/bootstrap.native/
MIT License
1.7k stars 178 forks source link

Tab and Collapse failed #178

Closed mathieuleclaire closed 6 years ago

mathieuleclaire commented 6 years ago

Hi, I freshly updated my Collapse and Tabs codes with the version 2.0.21 for BN3, loading the js in the header as it is now possible to do (great feature !).

Everything work well except Tabs and Collapse. When I click on a trigger (button or tab), nothing happens; the url is just set to url.html#theID (where theID it the id used in A tags).

Is there something more to do in this version compared to the one I used to use before (2.0.10) ?

Thanks

thednp commented 6 years ago

There are some changes but I need to see some code samples. I cannot guess what's really going on. It works for me in any implementation I use BSN.

mathieuleclaire commented 6 years ago

An minimal example can be found here: http://zebulon.iscpif.fr/~leclaire/test/bootstrap-native.html. It is based however on generated js, so I am not sure you can really see what happens. Thanks anyway !

A problem for me in the documentation is that never really understand what should be set directly as html or generated via javascript. The error should come from this.

thednp commented 6 years ago

Go to my demo and type BSN into your console then go to your demo and type same thing. You will see that your demo doesn't load the library somehow.

thednp commented 6 years ago

Well @mathieuleclaire ?

mathieuleclaire commented 6 years ago

Well, I think it is because I use your lib through some scala via the scala-js project, which compiles scala to js. On top of that, all the js has been webpacked.

And yet your lib works: I added a modal example to my test demo. It works fine even if BSN is not reachable from console.

To call from my scala library I need to know which part I need to "hardcode" (what you call the Data API) and which part is generated with JS. What I understand from your doc is that we have the choice between the 2 approaches. Am I right ? What about Tabs and Collapse ? Do they need some JS call to work or not ?

Thanks !

midzer commented 6 years ago

@mathieuleclaire for many components you can decide whether you choose HTML only "Data API" with data-* attribute or a JavaScript initialization.

Check out example code in official documentation or my implementation for Tabs https://github.com/midzer/eisolzried/blob/master/_includes/media.html (live: https://feuerwehr-eisolzried.de/media/)

mathieuleclaire commented 6 years ago

Thx @midzer . I use BSN v3, but I guess it is the same idea. So, to use components with JS, I have to keep the html parts without the data-*, that's it ?

midzer commented 6 years ago

Yes, data-* attribute is redundant in this case.

mathieuleclaire commented 6 years ago

OK, thanks. Concerning the lib itself, I only need to add it in the header. That's it. No need to call any initialization function ?

midzer commented 6 years ago

When you go JavaScript, you have to load Bootstrap Native via <script> somewhere in your HTML (or even load it within your JS code) and initialize your components like

// first, we reference the .nav component that holds all tabs
var myTabs = document.getElementById('myTabs');

// let's give the initialization a JavaScript reference for the "target" option
var myTabsCollection = myTabs.getElementsByTagName('A');

// initialize the component for all items in the collection
for (var i = 0; i < myTabsCollection.length; i++) {
  new Tab(myTabsCollection[i], // our target
  { // our options
    height: true
  });
}

for Tab example

mathieuleclaire commented 6 years ago

I finally found the reason: I called my js in:

<body onload="myproject.foo();">

Call it this way fix my problem

<body>
<script >myproject.foo();</script>
</body>

I am interested in understanding the difference ! Thanks anyway !

thednp commented 6 years ago

That is something for stackoverflow.