Sidenav in a wordpress run site

Topic: Sidenav in a wordpress run site

ericlory free asked 4 years ago

Hi I have bought MDB pro license and downloaded advanced navigation with fixed top and hidden sidenav. I successfully implemented the navigation on a html file, and it works just fine

Now I'm trying to insert it into a wordpress homemade theme and I have a problem with the sidenav, which doesn't popup when clicking the button.

Chrome console returns this :

(index):268 Uncaught TypeError: $(...).sideNav is not a function at HTMLDocument. ((index):268) at i (jquery.js?ver=1.12.4-wp:2) at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4-wp:2) at Function.ready (jquery.js?ver=1.12.4-wp:2) at HTMLDocument.J (jquery.js?ver=1.12.4-wp:2)

and is about this chunck of code I put at the bottom of the template file :

<script type="text/javascript">
    jQuery(document).ready(function($) {
         // SideNav Initialization
         $(".button-collapse").sideNav();
    });
</script>

I followed Wordpress with MDB tutorial and my functions.php file looks like this :

/** * Include CSS files */ function theme_enqueue_scripts() { wp_enqueue_style( 'Font_Awesome', 'https://use.fontawesome.com/releases/v5.6.1/css/all.css' ); wp_enqueue_style( 'Bootstrap_css', get_template_directory_uri() . '/css/bootstrap.css' ); wp_enqueue_style( 'MDB', get_template_directory_uri() . '/css/mdb.css' ); wp_enqueue_style( 'Style', get_template_directory_uri() . '/style.css' ); wp_enqueue_script( 'jQuery', get_template_directory_uri() . '/js/jquery.js', array(), '3.5.1', true ); wp_enqueue_script( 'Tether', get_template_directory_uri() . '/js/popper.min.js', array(), '1.0.0', true ); wp_enqueue_script( 'MDB', get_template_directory_uri() . '/js/mdb.min.js', array(), '1.0.0', true ); wp_enqueue_script( 'Bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );

What should I need more to be able to call sidenav() function to initialize the sidenav bar ? Or is there any tutorial to implement advanced navigation into wordpress ?

Many thanks

Regards,

Eric

Krzysztof Wilk staff commented 4 years ago

Hi!

I think that's because MDB is loading later than your script. Do your initializing code is in JS or PHP file?

Best regards

Add comment

ericlory free answered 4 years ago

0 0 Best answer

Hi Krzysztof !

Your guess is perfectly correct. I've checked the source code of the compiled page, and it appears all the js files mentioned above are loaded at the very bottom of the template's body. So, right after the script that I added at the end of the template file. To solve this, I moved the loading script in the worpress footer and it's now working fine.

Thanks a lot for your help, and for the accurate guess you just made !

Regards,

Eric

ericlory free commented 4 years ago

I can't understand how the other function called in that script (pagepiling()) could be working before that change, as the JS file containing that function was also loaded after the script calling it. Weird behavior I couldn't explain

Krzysztof Wilk staff commented 4 years ago

I'm glad I could help :)

Maybe your pagepiling() function is asynchronous?

Add comment

ericlory free answered 4 years ago

0 0 Best answer

Hi, thanks for your answer.

Actually the initializing code is at the end of a PHP template file

But it also loads another function, which is correctly working

<pre class="prettyprint"><code><script type="text/javascript">
 jQuery(document).ready(function($) {
 jQuery('#pagepiling').pagepiling({ args });
 $(".button-collapse").sideNav();
 });
</script>
</code></pre>

Pagepiling() works normally. pagepiling() functions has been added into the jquery.js file that I'm loading using wp_enqueue_script() in the functions.php file

Sidenav() returns the above error. I don't know how to call this function differently, or where/when I should load it so it works. But what I know is that the exact same code is working when in a HTML file, outside wordpress.

I read about the '$' caller problem with wordpress, so I managed to solve that for the pagepiling() function by putting it into the jquery.js file, and calling it with jquery('#id').pagepiling() instead of $('#id').pagepilling. But I can't manage to do the same stuff for sidenav()

Any idea ?

Thanks for your help

Please insert min. 20 characters.

Hi, thanks for your answer.

Actually the initializing code is at the end of a PHP template file

But it also loads another function, which is correctly working

<script type="text/javascript">
    jQuery(document).ready(function($) {
         jQuery('#pagepiling').pagepiling({  args });
         $(".button-collapse").sideNav();
    });
</script>

Pagepiling() works normally. pagepiling() functions has been added into the jquery.js file that I'm loading using wp_enqueue_script() in the functions.php file

Sidenav() returns the above error. I don't know how to call this function differently, or where/when I should load it so it works. But what I know is that the exact same code is working when in a HTML file, outside wordpress.

I read about the '$' caller problem with wordpress, so I managed to solve that for the pagepiling() function by putting it into the jquery.js file, and calling it with jquery('#id').pagepiling() instead of $('#id').pagepilling. But I can't manage to do the same stuff for sidenav()

Any idea ?

Thanks for your help

Krzysztof Wilk staff commented 4 years ago

Hi!

Could you check in source code on your page (ctrl + U) if mdb.min.js is loaded before or after your script? If you could put here a screenshot it would be great.

Best regards

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 jQuery
MDB Version: 4.19.1
Device: PC
Browser: Chrome
OS: Windows
Provided sample code: No
Provided link: Yes

ericlory

47Support score
3Questions 3Answers 0Snippets