Support » Plugin: BP Profile Search » Chosen js or Select2 javascript for multiselect box

  • Resolved amkh

    (@amkh)


    I wanted to style the multiselect boxes so I was trying to implement something like chosen js or select2 js for the multiselect boxes in search . How can i do that?

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Andrea Tarantini

    (@dontdream)

    Hello amkh,

    You can customize the form template you are using.

    Edit the template of your choice, add the wp_enqueue_script() function to enqueue the Chosen or Select2 script, and add the inline JavaScript to change the plain multiselect to the enhanced type.

    Make sure you move the modified template to the ‘buddypress/members’ directory in your theme’s root, otherwise it will be overwritten during the next BP Profile Search update.

    PS: if you are not a developer and need step-by-step instructions, please let me know and I’ll try to provide them as soon as I have some available time.

    I am a beginner and don’t have much experience. So it would be great if you can give me step by step instructions.

    Plugin Author Andrea Tarantini

    (@dontdream)

    Got it. I’ll post the instructions here as soon as I have a chance to test them.

    actually i tried to do it myself and this is the code i’ve added to the template file.

    function enqueue_select2_jquery() {
    wp_register_script( ‘select2jquery’, ‘https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js’,array(‘jquery’), null, true );
    wp_register_style( ‘select2mincss’, ‘https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css’ );
    wp_enqueue_style( ‘select2mincss’ );
    wp_enqueue_script( ‘select2jquery’ );
    }
    add_action( ‘wp_enqueue_scripts’, ‘enqueue_select2_jquery’ );
    <script type=”text/javascript”>
    $(document).ready(function($) {
    $(‘multiselectbox’).select2();
    });
    </script>

    However once i add it the page does not load. Can you tell me what i am doing wrong?

    Plugin Author Andrea Tarantini

    (@dontdream)

    Hi,

    If the page doesn’t load, you should get some errors in your error log or in the browser’s console. Could you please post them here?

    If you don’t see any errors, change WP_DEBUG to true in your wp-config.php file.

    It gives me this error in the console:
    Failed to load resource: the server responded with a status of 500 (Internal Server Error)

    and when i try to debug i get the following message

    Parse error: syntax error, unexpected ‘:’ in …/buddypress/members/bps-form-sample-1.php on line 12 Notice: ob_end_flush(): failed to send buffer of zlib output compression (0) in …/wp-includes/functions.php on line 3743

    • This reply was modified 10 months ago by  amkh.
    Plugin Author Andrea Tarantini

    (@dontdream)

    I’m trying to reproduce this on my system, I’ll keep you informed.

    Plugin Author Andrea Tarantini

    (@dontdream)

    Hi @amkh,

    I found a way to make it work. If you are using the bps-form-legacy template, open the file bps-form-legacy.php, locate the initial lines:

    	$F = bps_escaped_form_data ();
    
    	$toggle_id = 'bps_toggle'. $F->id;

    and replace them with:

    	$F = bps_escaped_form_data ();
    
    	wp_enqueue_script ('select2-js', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js', array ('jquery'));
    	wp_enqueue_style ('select2-css', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css');
    ?>
    <script>
    	jQuery(document).ready(function($) {
    		$('.bps_form select').select2();
    	});
    </script>
    <?php
    
    	$toggle_id = 'bps_toggle'. $F->id;

    Hope this helps!

    it works!! thanks a lot

    Plugin Author Andrea Tarantini

    (@dontdream)

    Great! You are welcome.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Chosen js or Select2 javascript for multiselect box’ is closed to new replies.