Sidebar accordion not workin [MDB JQuery]

Topic: Sidebar accordion not workin [MDB JQuery]

agustrom_mar pro asked 6 years ago

I 'm working with MDB 4.5.7 Pro Version. I 've bought this version because it has all the features i need. Besides, i 'm working with Vue js in my web site. When i create a component for the sidebar, it works correctly until i click on collapsible-header class to open the collapsible-body. That body does not appear in the bar and i don't know why. Can anyone tell me why and how to solve it? I let you some code here.

<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect arrow-r"">
<i class="fa fa-chevron-right"></i> Buscar <i class="fa fa-angle-down rotate-icon"></i>
</a>
<div class="collapsible-body" >
<ul class="list-unstyled">
<li><a :href="url_buscar_aporte" class="waves-effect">
<i class="fa fa-search"></i> Buscar aporte
</a></li>
<li><a :href="url_buscar_usuario" class="waves-effect">
<i class="fa fa-search"></i> Buscar compañero
</a></li>
</ul>
</div>
</li>

Add comment

Jakub Mandra staff answered 6 years ago

0 0 Best answer

Hi there, Great to hear! Sometimes you have to ask someone to step in on the answer yourself... :) Thanks for posting what was wrong. Keep hacking! Jakub from MDB

Add comment

agustrom_mar pro answered 6 years ago

0 0 Best answer

Hi! Finally I could resolver my problem. It was the fact that i load Vuejs Javascript before Mdboostrap.js. I have swapped them and it all works! Thanks for all

Add comment

Jakub Mandra staff answered 6 years ago

0 0 Best answer

It actually looks properly. We have never supported Laravel and it looks like there is no need to use Vue with it. I suggest you to try pure Laravel + JQuery, mayby there are some conflicts in events bindings which prevent the collapsible element from being clicked. Or if u can, send me the whole project in zipp file or repostiory, so i can look deeper into it. Here is my e-mail: j.mandra@mdbootstrap.com Best regards, Jakub from MDB

Add comment

agustrom_mar pro answered 6 years ago

0 0 Best answer

<p>I have a laravel blade layout where i load all libraries of MDBootstrap (jquery, bootstrap, mdbootstrap, popper).<br />
I load both css and js.</p>
<p>I also load vuejs library from cdn and i have a app-core.js where i have the main Vue object thats includes the other vue components.</p>
<p>I let you a sample code...</p>
<p>I hope you can help me. Thanks for now</p>
<pre>Start your code here

@yield("content")

<div id="app" class="yb">
<header>
<sidebar url_log = "{{URL::asset('logo/3.0/logo.letras blancas.compressed.png')}}"> </sidebar>
<navbar url_log = "{{URL::asset('logo/3.0/logo.letras blancas.compressed.png')}}"> </navbar>
</header>
<main class="" id="content_yield">
<div class="container">
@yield("vue_content")
</div>
</main>

</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

{{-- Material Design Bootstrap --}}
<link rel="stylesheet" href="{{URL('MDB-Pro-4.5.7/css/mdb.min.css')}}">

<link href="{{ elixir('bootstrap-4-sectorizado/bootstrap-4-sectorizado.css') }}" rel="stylesheet">

@if(get_from_env('APP_PRODUCTION'))
{{-- Vue 2 from CDN - version produccion --}}
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
@else
{{-- Vue 2 from CDN - version desarrollo --}}
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
@endif

<script type="text/javascript" src="{{URL('MDB-Pro-4.5.7/js/popper.min.js')}}"></script>

<script type="text/javascript" src="{{URL('MDB-Pro-4.5.7/js/bootstrap.min.js')}}"></script>

<script type="text/javascript" src="{{URL('MDB-Pro-4.5.7/js/mdb.min.js')}}"></script>

</pre>
<p> </p>

Please insert min. 20 characters.

I have a laravel blade layout where i load all libraries of MDBootstrap (jquery, bootstrap, mdbootstrap, popper).
I load both css and js.

I also load vuejs library from cdn and i have a app-core.js where i have the main Vue object thats includes the other vue components.

I let you a sample code...

I hope you can help me. Thanks for now

Start your code here

<body style="margin:0px">

@yield("content")

<div id="app" class="yb">
<header>
<sidebar url_log = "{{URL::asset('logo/3.0/logo.letras blancas.compressed.png')}}"> </sidebar>
<navbar url_log = "{{URL::asset('logo/3.0/logo.letras blancas.compressed.png')}}"> </navbar>
</header>
<main class="" id="content_yield">
<div class="container">
@yield("vue_content")
</div>
</main>

</div>

<!-- Carga de Estilos -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

{{-- Material Design Bootstrap --}}
<link rel="stylesheet" href="{{URL('MDB-Pro-4.5.7/css/mdb.min.css')}}">

<!-- Bootstrap core CSS -->
<link href="{{ elixir('bootstrap-4-sectorizado/bootstrap-4-sectorizado.css') }}" rel="stylesheet">

<!-- FIN Carga de Estilos -->

<!-- Carga de Scripts -->
@if(get_from_env('APP_PRODUCTION'))
{{-- Vue 2 from CDN - version produccion --}}
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
@else
{{-- Vue 2 from CDN - version desarrollo --}}
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
@endif

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js" charset="utf-8"></script>
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="{{URL('MDB-Pro-4.5.7/js/jquery-3.3.1.min.js')}}"></script>

<!-- Tooltips -->
<script type="text/javascript" src="{{URL('MDB-Pro-4.5.7/js/popper.min.js')}}"></script>

<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="{{URL('MDB-Pro-4.5.7/js/bootstrap.min.js')}}"></script>

<!-- MDB core JavaScript -->
<script type="text/javascript" src="{{URL('MDB-Pro-4.5.7/js/mdb.min.js')}}"></script>

Add comment

Jakub Mandra staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

Hello,
It’s an unusuall aproach 🙂
I tested your code with JQuery and it worked ok, after cleaning some typos.

<a class="collapsible-header waves-effect arrow-r"">

<a class="collapsible-header waves-effect arrow-r">

Can I ask you how do you connect both libraries? It will help with further support.
Also I must tell you, that we do not support use-cases of libraries in other frameworks, but we will do as much as we can to help.
Regards,
Jakub from MDB

agustrom_mar pro commented 6 years ago

Thanks for the answer. I have noticed that when i click on collapsible-header, the mdbootstrap js is not setting to class "active" the li tag inside the ul with class="collapsible collapsible-accordion"

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

agustrom_mar

Pro User 10Support score
1Questions 2Answers 0Snippets