TimmKnuth commented 4 years ago

Prerequisites

Please answer the following questions for yourself before submitting an issue.

[x ] I am running the latest version
[x ] I checked the documentation and found no answer
[x ] I checked to make sure that this issue has not already been filed
[x ] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Please describe the behavior you are expecting

I would like to use the full sidebar functionality from Material Dashboard pro and use the app.js for the Editor datatable. But if I use the app.js file then comes following error: Uncaught TypeError: $(...).bootstrapMaterialDesign is not a function. But I need to use app.js for the Editor (datatables.net).

Current Behavior

What is the current behavior?

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

step 1
step 2
you get it...

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

Device:
Operating System:
Browser and Version:

Failure Logs

Please include any relevant log snippets or files here.

TimmKnuth commented 4 years ago

In my app.blade.php, I am using this scripts:

@stack('scripts') @stack('js')

and in my table view looks like this:

@extends('layouts.app', ['activePage' => 'dashboard', 'menuParent' => 'dashboard', 'titlePage' => __('Dashboard')])

@section('content')

Projekte

@endsection

@push('scripts') {{$dataTable->scripts()}} @endpush

But only datatables or the sidebar works correct. Need help!

teamupdivision commented 4 years ago

Hello, thanks for using our products!

Can you please tell me what app.js is? If this error is coming from this file please try to add it at the end of the javascript files requests.

Also, please insert first the theme javascript file requests.

All the best

TimmKnuth commented 4 years ago

Hello, thanks for answering. I need the app.js/boostrap.js file for my editor datatable. My app.js: require('./bootstrap'); My bootsrap.js

window._ = require('lodash');

/**

We'll load jQuery and the Bootstrap jQuery plugin which provides support
for JavaScript based Bootstrap features such as modals and tabs. This
code may be modified to fit the specific needs of your application. */

try { window.Popper = require('popper.js').default; window.$ = window.jQuery = require('jquery');

require('bootstrap');
require('datatables.net-bs4');
require('datatables.net-buttons-bs4');
require('datatables.net-select-bs4');
require('datatables.net-editor-bs4');

} catch (e) {}

/**

We'll load the axios HTTP library which allows us to easily issue requests
to our Laravel back-end. This library automatically handles sending the
CSRF token as a header based on the value of the "XSRF" token cookie. */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**

Echo exposes an expressive API for subscribing to channels and listening
for events that are broadcast by Laravel. Echo and event broadcasting
allows your team to easily build robust real-time web applications. */

// import Echo from 'laravel-echo';

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({ // broadcaster: 'pusher', // key: process.env.MIX_PUSHER_APP_KEY, // cluster: process.env.MIX_PUSHER_APP_CLUSTER, // encrypted: true // });

teamupdivision commented 4 years ago

Hello, thanks for the quick response. I see that you've inserted the app.js request twice in the code, can you please remove the first instance and try again?

Thanks

TimmKnuth commented 4 years ago

Yes, But It doesnt change anything

teamupdivision commented 4 years ago

Hello, it seems to be a Material Design problem, can you please check the bootstrapMaterialDesign Github Page and search for the same issue: https://github.com/FezVrasta/bootstrap-material-design/issues?

TimmKnuth commented 4 years ago

what do you mean with "check the bootstrapMaterialDesign Github Page and search for the same issue"?

teamupdivision commented 4 years ago

Use the issue search from their repository and type the problem you are facing

TimmKnuth commented 4 years ago

Did Not find anything.

teamupdivision commented 4 years ago

Can you try to reinitialize the datatable after the table gets populated?

TimmKnuth commented 4 years ago

Sry, i am Pretty new in Programming. What do exacly mean?

teamupdivision commented 4 years ago

After initiating the datatables try to reinitialize bootstrapMaterialDesign

$('body').bootstrapMaterialDesign({
  autofill: false
});

TimmKnuth commented 4 years ago

In which file can I do That. Just That you know, I am using the yajirabox for the datatable Editor

TimmKnuth commented 4 years ago

Ok i found the file material-Dashboard.js. But what now?

TimmKnuth commented 4 years ago

But what is exactly the Problem? So if I understand correct, the Material-Dashboard.js and the App.js are Not working well together Right?!

TimmKnuth commented 4 years ago

Hallo, I am Running out of time and Need to fix this issue. Is is possible That i sent you My project file and you can take a Look at it?

amikrop commented 3 years ago

I am having this exact same issue:

jquery-3.6.0.min.js:2 jQuery.Deferred exception: $(...).bootstrapMaterialDesign is not a function TypeError: $(...).bootstrapMaterialDesign is not a function
    at HTMLDocument.<anonymous> (http://localhost:8000/static/vor/js/material-dashboard.min.js:1:659)
    at e (http://localhost:8000/static/vor/js/jquery-3.6.0.min.js:2:30038)
    at t (http://localhost:8000/static/vor/js/jquery-3.6.0.min.js:2:30340) undefined
S.Deferred.exceptionHook @ jquery-3.6.0.min.js:2
t @ jquery-3.6.0.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.6.0.min.js:2
c @ jquery-3.6.0.min.js:2
fireWith @ jquery-3.6.0.min.js:2
fire @ jquery-3.6.0.min.js:2
c @ jquery-3.6.0.min.js:2
fireWith @ jquery-3.6.0.min.js:2
ready @ jquery-3.6.0.min.js:2
B @ jquery-3.6.0.min.js:2
jquery-3.6.0.min.js:2 Uncaught TypeError: $(...).bootstrapMaterialDesign is not a function
    at HTMLDocument.<anonymous> (material-dashboard.min.js:1)
    at e (jquery-3.6.0.min.js:2)
    at t (jquery-3.6.0.min.js:2)
(anonymous) @ material-dashboard.min.js:1
e @ jquery-3.6.0.min.js:2
t @ jquery-3.6.0.min.js:2
setTimeout (async)
S.readyException @ jquery-3.6.0.min.js:2
(anonymous) @ jquery-3.6.0.min.js:2
e @ jquery-3.6.0.min.js:2
t @ jquery-3.6.0.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.6.0.min.js:2
c @ jquery-3.6.0.min.js:2
fireWith @ jquery-3.6.0.min.js:2
fire @ jquery-3.6.0.min.js:2
c @ jquery-3.6.0.min.js:2
fireWith @ jquery-3.6.0.min.js:2
t @ jquery-3.6.0.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.6.0.min.js:2
c @ jquery-3.6.0.min.js:2
fireWith @ jquery-3.6.0.min.js:2
fire @ jquery-3.6.0.min.js:2
c @ jquery-3.6.0.min.js:2
fireWith @ jquery-3.6.0.min.js:2
ready @ jquery-3.6.0.min.js:2
B @ jquery-3.6.0.min.js:2
favicon.png:1 GET http://localhost:8000/static/vor/img/favicon.png 404 (Not Found)

teamupdivision commented 3 years ago

Hi there @amikrop,

We've sent a new message on the separate ticket you opened too. We would like to check if the issue was solved or if you can share a few more details on the steps followed. Please let us know if there is anything else we can help with and if you have any other issues.

Best, Updivision Team

creativetimofficial / ct-material-dashboard-pro-laravel

Uncaught TypeError: $(...).bootstrapMaterialDesign is not a function #18

Prerequisites

Expected Behavior

Current Behavior

Failure Information (for bugs)

Steps to Reproduce

Context

Failure Logs

Projekte