0

I'd like use Semantic UI Dropdown (https://semantic-ui.com/modules/dropdown.html) in my custom metabox for the plugin I making. I added the codes like that:

// Styles
wp_enqueue_style( 'semantic-ui', '/wp-content/plugins/mypluginfolder/semantic.css');
wp_enqueue_style( 'semantic-ui-b', '/wp-content/plugins/mypluginfolder/dropdown.css');
// Scripts
wp_enqueue_script( 'semantic-ui-c', '/wp-content/plugins/mypluginfolder/semantic.js',array('jquery'), false, true );
wp_enqueue_script( 'semantic-ui-d', '/wp-content/plugins/mypluginfolder/dropdown.js',array('semantic-ui-c','jquery'), false, true );
wp_enqueue_script( 'semantic-ui-f', '/wp-content/plugins/mypluginfolder/index.js',array('semantic-ui-d','semantic-ui-c','jquery'), false, true );

and I tried to insert a form like in the example

    <div class="ui sub header">Multiple</div>
<div class="ui fluid multiple search selection dropdown">
  <input name="tags" type="hidden">
  <i class="dropdown icon"></i>
  <div class="default text">Skills</div>
  <div class="menu">
    <div class="item" data-value="angular">Angular</div>
<div class="item" data-value="css">CSS</div>
<div class="item" data-value="design">Graphic Design</div>
<div class="item" data-value="ember">Ember</div>
<div class="item" data-value="html">HTML</div>
<div class="item" data-value="ia">Information Architecture</div>
<div class="item" data-value="javascript">Javascript</div>
<div class="item" data-value="mech">Mechanical Engineering</div>
<div class="item" data-value="meteor">Meteor</div>
<div class="item" data-value="node">NodeJS</div>
<div class="item" data-value="plumbing">Plumbing</div>
<div class="item" data-value="python">Python</div>
<div class="item" data-value="rails">Rails</div>
<div class="item" data-value="react">React</div>
<div class="item" data-value="repair">Kitchen Repair</div>
<div class="item" data-value="ruby">Ruby</div>
<div class="item" data-value="ui">UI Design</div>
<div class="item" data-value="ux">User Experience</div>
  </div>
</div>

and in the file index.js

$('.tag.example .ui.dropdown')
  .dropdown({
    allowAdditions: true
  });

but not works!

Where am I doing wrong?

  • Why you are using /wp-content relative path? I guess it's a plugin? You could use plugin_dir_url(__FILE__) to get current file directory? It might be problem in the file url? check console and give here a screenshot of errors/warnings. – Sajjadur Rahman Sagor May 7 '18 at 16:22
  • You're absolutely right! I was wrong path. I did not understand where the problem was I had written the url without plugin_dir_url (__ FILE__) but the problem was in the final part of the url, damn me! Thanks so much – Vincenzo Auriemma May 7 '18 at 17:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.