How to trigger the notify component ?

Hello,

I try to add the notify component provided by UiKit.

My goal is to implement this component in a BuddyPress theme on which I'm currently working on : when a user deletes a message, for instance, a notification appears at the top of the screen that confirm this deletion. Before that, I just want to test the notify component, on a basic WordPress page. But, for the moment, with no success.

In my testing page, I've added this HTML code :

<button class="uk-button" data-message="Message...">Click me</button>

Of course, I've registered the notify component :

add_action( 'beans_uikit_enqueue_scripts', 'mythemeprefix_add_uikit_scripts' );

function mythemeprefix_add_uikit_scripts () {

  beans_uikit_enqueue_components( array( 'notify' ) );

}

And I've enqueued this JS snippet in the page, with wp_enqueue_scripts.

function mythemeprefix_load_notify_snippet() {

  ?>

  <script>
  jQuery(document).ready(function($){
    $("body").on("click", ".uk-button[data-message]", function(){
        UIkit.notify($(this).data());
       });
    })
  </script>

<?php

}
add_action( 'wp_enqueue_scripts', 'mythemeprefix_load_notify_snippet' );

It is obviously a very clumsy way to trigger the notify component. And this is where I'm stuck. Firebug detects an error, which I don't know how to solve : "ReferenceError: jQuery is not defined"

Accordingly, nothing happens when we click on the button, no notification appears.

@Thierry, I've noticed that you have beautifully added the UiKit notify component in your implementation of BBPress, here, in this very forum. Any recommandation would be very much appreciated ! 🙂

Mat

Hey Mathieu,

Your approach isn't bad but you must make sure that your script load after jQuery and UIkit. If you don't want to add it in a file and have it inline, then I would suggest to use wp_add_inline_script() core function. Use uikit as the first argument which will ensure it loads after UIkit and therefore, after jQuery too 😉 Here is an example:

add_action( 'wp_enqueue_scripts', 'example_enqueue_assets' );

function example_enqueue_assets() {
 wp_add_inline_script( 'uikit', 'console.log( "Loading jQuery version " + jQuery.fn.jquery, "\nLoading UIkit version " + UIkit.version )' );
}

If you load the script above and look at your console, you will see that jQuery and UIkit are available (check your browser console and you will see that).

Hope that helps,

Hello Thierry,

Thanks a lot for pointing me in this direction. I've tried to trigger the notify component with wp_add_inline_script but it does not work. I'm probably not familiar enough with this function. 🙁

Maybe the best option, as you mentionned it, is to trigger the notify component not inline but via a separate file.

To do so, in my functions.php, I've added this (inspired from what I've seen in the functions.php of Banks Child Theme) :

// Enqueue uikit assets
beans_add_smart_action( 'beans_uikit_enqueue_scripts', 'docteo_enqueue_uikit_assets', 5 );

function docteo_enqueue_uikit_assets() {

    if ( is_buddypress () ) {

    // If it is a BuddyPress page, add the theme js as a uikit fragment
    beans_compiler_add_fragment( 'uikit', get_stylesheet_directory_uri() . '/js/notify-set.js', 'js' );

    }

}

Then, in a folder called "js", in my theme, I've added a file with this (I've copied the snippet below from the UiKit notify component doc page) :

!(function( $ ) {

 $(function(){
            $("body").on("click", ".uk-button[data-message]", function(){
                UIkit.notify($(this).data());
            });
        })

} )( window.jQuery );

And it works ! But two problem remains :

• when I click on the button, the message appears twice ;
• I can't change the status message from its default appearance to, let's say, warning or success message. This, for instance, does not work : <button class="uk-button" data-message="This is a message." data-pos="bottom-left" status="success">Click me</button> : the notification looks the same.

Once again, thanks a lot, Thierry, for your help and your patience.

Mathieu