App Connect Bootstrap 4 Collapse Version 2 Support Product Page

Solved

Problem When Adding Dynamic Collapse Element

Reported 07 Jul 2020 15:36:01
1
has this problem
07 Jul 2020 15:36:01 rich sale posted:
When I try to add a dynamic collapse element to a simple page it doesn't work.

When I look at the page in the browser it is blank.
On inspection I can see that style="visibility:hidden;" has been added to the opening html tag.
If I remove the collapsible element then the page displays correctly.

When I look at the page in DevTools I see an error

collapse.js:49 Uncaught TypeError: jQuery(...).collapse is not a function.....

My page includes the following.
<script type="text/javascript" src="dmxAppConnect/dmxAppConnect.js"></script>
<script type="text/javascript" src="code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script type="text/javascript" src="dmxAppConnect/dmxBootstrap4Collapse/dmxBootstrap4Collapse.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/4/css/bootstrap.min.css" />


Any thoughts

Rich

Replies

Replied 08 Jul 2020 09:59:12
08 Jul 2020 09:59:12 Teodor Kuduschiev replied:
Hello,
Please provide a link to your page.
Replied 08 Jul 2020 11:06:25
08 Jul 2020 11:06:25 rich sale replied:
Replied 08 Jul 2020 11:29:11
08 Jul 2020 11:29:11 Teodor Kuduschiev replied:
You are missing the bootstrap / popper js includes at the bottom of the page.
Replied 08 Jul 2020 11:35:12
08 Jul 2020 11:35:12 rich sale replied:
Hi Teodor

Shouldn't they be included automatically?

Is there an example?

Thanks

Rich
Replied 08 Jul 2020 11:37:21
08 Jul 2020 11:37:21 rich sale replied:
I have included them and all works as it should.
But there are some warnings

DevTools failed to load SourceMap: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
testcollapse.php:1 Denying load of chrome-extension://pkbffbhglicfngmppdlpmpblfgnkdgio/font/fontawesome-webfont.ttf. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
DevTools failed to load SourceMap: Could not load content for seolog.nofuss-des.co.uk/bootstrap/4/js/popper.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for seolog.nofuss-des.co.uk/bootstrap/4/js/bootstrap.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for seolog.nofuss-des.co.uk/bootstrap/4/css/bootstrap.min.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/content.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME


Thanks for your help.

Rich
Replied 08 Jul 2020 17:45:58
08 Jul 2020 17:45:58 rich sale replied:
Hi Teodor

Still having issues with this page. seolog.nofuss-des.co.uk/testcollapse.php

I tried to set up some tabs but I can't get the tabs to toggle.

There are 3 tabs and 3 control buttons.
Clicking each button shows the relevant tab content as expected.
But if I try to show any tab again it will not display.

I am obviously doing something wrong but can't find any instructions in the documentation.

Rich
Replied 09 Jul 2020 07:52:26
09 Jul 2020 07:52:26 Teodor Kuduschiev replied:
I think this is caused by the button group used for tab toggles. Bootstrap 4 doesn't like using button group components for this.
Replied 09 Jul 2020 08:23:03
09 Jul 2020 08:23:03 rich sale replied:
I have removed the button group but still no better.

Replied 09 Jul 2020 08:47:32
09 Jul 2020 08:47:32 Teodor Kuduschiev replied:
The default Bootstrap 4 tabs code looks like:


<ul class="nav nav-tabs" id="navTabs1_tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="navTabs1_1_tab" data-toggle="tab" href="#" data-target="#navTabs1_1" role="tab" aria-controls="navTabs1_1" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="navTabs1_2_tab" data-toggle="tab" href="#" data-target="#navTabs1_2" role="tab" aria-controls="navTabs1_2" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="navTabs1_3_tab" data-toggle="tab" href="#" data-target="#navTabs1_3" role="tab" aria-controls="navTabs1_3" aria-selected="false">Messages</a>
  </li>
</ul>


You have added something else onm your page.
Replied 09 Jul 2020 09:21:43
09 Jul 2020 09:21:43 rich sale replied:
Hmm strange I just added 3 buttons then set the Action toggle to Tab and then allocated the relevant Tab content id from the dropdown.

Your code is a nav element which makes sense

I have done what you said and all works fine ( and it looks better )

I added 'tab content' and tried to control with buttons what I should have added was 'tabs with nav'

Thanks for your help

Reply to this topic