Cannot Get Pro Components to Work

Topic: Cannot Get Pro Components to Work

Kbateman0522 free asked 2 years ago

Expected behavior

Select Boxes and Datatables to render as shown in the examples: Select & Datatables

Actual behavior Datatables do not render at all and select renders as the default browser select box

Resources (screenshots, code snippets etc.) Select Box Screenshot

Datatable Screenshot (does not allow for sorting/etc)

Datatable Code: Laravel Blade Templates w/ MDBootstrap

            <div class="datatable">
        <table class="table">
            <thead class="table-light">
            <tr>
                <th scope="col" colspan="4">Topic</th>
                <th scope="col" colspan="2">Users</th>
                <th scope="col" colspan="2">Last Reply</th>
            </tr>
            </thead>
            <tbody>
            @foreach($conversations as $conversation)
                @php
                $conversationMessages = $conversation->participants()->where('user_id',Auth::user()->id)->where('read_latest', 0)->latest('conversation_id')->first();
                @endphp
                @if($conversationMessages)
                    <tr style="background-color: rgba(242,233,247,0.77);">
                @else
                <tr>@endif
                    <td colspan="4"><a href="{{url('/message/'.$conversation->id)}}"><h4>{{$conversation->topic}}</h4></a></td>
                    <td colspan="2">@foreach($conversation->participants as $participant)
                            @if($loop->last)
                                {!! $participant->profileLink() !!}
                            @else
                                {!! $participant->profileLink() !!},
                            @endif
                        @endforeach
                    </td>
                    <td colspan="2">{{ $conversation->updated_at->diffForHumans() }}</td>
            </tr>
            @endforeach
            </tbody>
        </table>
        </div>

Select Code: Laravel Blade Template w/ MDBootstrap

         <div class="input-group mb-3">
         <span class="input-group-text">Forum Avatar</span>
       <select name="avatar" class="select" data-mdb-filter="true">
         @foreach($avatars as $av)
           <option value="{{$av['value']}}"
                   @if ($av['value'] == old('avatar', $user->avatar))
                   selected
                   @endif
           >{{$av['name']}}</option>
         @endforeach
         <option disabled>--------------------</option>
         @foreach($user->pets as $pet)
           <option value="pet_{{$pet->id}}"
                   @if ("pet_".$pet->id == old('avatar', $user->avatar))
                   selected
                   @endif
           >{{$pet->name}}</option>
         @endforeach
       </select>
       @foreach ($errors->get('avatar') as $message)
         {{$message}}<br>
       @endforeach
     </div>

Header/Footer JS & CSS Code

   <!-- Font Awesome -->
<script src="https://kit.fontawesome.com/c5debc9011.js" crossorigin="anonymous"></script>
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="/css/mdb.css">
<link href="/css/new.css" rel="stylesheet" type="text/css">

Add comment

anlix free answered 2 years ago

0 0 Best answer

The same is happening to me. I'm already importing a single module like this:

<pre class="prettyprint"><code>import { Select } from 'mdb-ui-kit';
</code></pre>

But the default browser <code>select</code> is rendered.

I started my project using Create React App. I have no server rendering implemented. My component looks like this:

<pre class="prettyprint"><code>function MySelect (props) {
 const selectRef = useRef(null);

useEffect(() => {
    const sel = Select.getInstance(selectRef.current);
    console.log('select instance', sel);
    if (sel && sel.setValue !== undefined) sel.setValue('3'); // IF to avoid errors.
  }, [])

return <select ref={selectRef} className="select" {...props}>
 <option value="1">One</option>
 <option value="2">Two</option>
 <option value="3">Three</option>
 <option value="4">Four</option>
 <option value="5">Five</option>
 </select>
}
</code></pre>

The line <code>console.log('select instance', sel)</code> outputs:

<pre class="prettyprint"><code>select instance null
</code></pre>

Using <code>document.querySelector('element')</code> instead of using React Ref, has the same result.

The default browser <code>select</code> is rendered and mdb doesn't return an instance when calling <code>Select.getInstance(...)</code>.

Please insert min. 20 characters.

The same is happening to me. I'm already importing a single module like this:

import { Select } from 'mdb-ui-kit';

But the default browser select is rendered.

I started my project using Create React App. I have no server rendering implemented. My component looks like this:

function MySelect (props) {
  const selectRef = useRef(null);

  useEffect(() => {
    const sel = Select.getInstance(selectRef.current);
    console.log('select instance', sel);
    if (sel && sel.setValue !== undefined) sel.setValue('3'); // IF to avoid errors.
  }, [])

  return <select ref={selectRef} className="select" {...props}>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
  </select>
}

The line console.log('select instance', sel) outputs:

select instance null

Using document.querySelector('element') instead of using React Ref, has the same result.

The default browser select is rendered and mdb doesn't return an instance when calling Select.getInstance(...).

Grzegorz Bujański staff commented 2 years ago

Do you use MDB5 Standard or MDB5 React?

Add comment

Grzegorz Bujański staff answered 2 years ago

0 0 Best answer

Please insert min. 20 characters.

I guess it could be the order in which the code is executed. Probably the MDB is loaded first, and then the HTML code is rendered.

try to manually initialize Datatables and Select. Here you will find information on how to do it: https://mdbootstrap.com/docs/standard/data/datatables/#api-section-usage https://mdbootstrap.com/docs/standard/forms/select/#docsTabsAPI

Add comment

Kbateman0522 free answered 2 years ago

0 0 Best answer

It seems it cut off my footer JS code, so here it is in a snippet:

Snippet w/ JS Files

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: Free
Premium support: No
Technology: MDB Standard
MDB Version: MDB5 3.8.0
Device: Macbook Pro
Browser: Chrome & Firefox
OS: macOS Big Sur
Provided sample code: No
Provided link: Yes

Kbateman0522

15Support score
1Questions 1Answers 2Snippets