jquery in wordpress plugin with depdendency

This is my first page of the plugin    


          <?php
        /*
        Plugin Name: guard_search plugin
        Description: Search Plugon
        Author: mazhar
        */   

wp_enqueue_script( 'my-ajax-handle', plugin_dir_url( _FILE_ ) . 'guards_search/js/ajax.js', array( 'jquery' ) );
        wp_localize_script( 'my-ajax-handle', 'the_ajax_script', array( 'ajaxurl' => admin_url('admin-ajax.php' )));

       wp_register_style('jquery.formstyler', plugin_dir_url( _FILE_ ) . 'guards_search/css/jquery.formstyler.css');
        wp_enqueue_style('jquery.formstyler');

        wp_register_style('jquery.formstyler', plugin_dir_url( _FILE_ ) . 'guards_search/js/jquery.formstyler.min.js');
        wp_enqueue_style('jquery.formstyler');

        wp_register_script('prefix_bootstrap', plugin_dir_url( _FILE_ ) . 'guards_search/js/bootstrap.min.js');
        wp_enqueue_script('prefix_bootstrap');

        wp_register_style('prefix_bootstrap', plugin_dir_url( _FILE_ ) . 'guards_search/css/bootstrap.min.css');
        wp_enqueue_style('prefix_bootstrap');

        add_action( 'wp_ajax_models_click', 'models_click');
        add_action( 'wp_ajax_nopriv_models_click', 'models_click');

        add_action( 'wp_ajax_reset_years', 'reset_years');
        add_action( 'wp_ajax_nopriv_reset_years', 'reset_years');

This is my ajax.js where the problems lies where styler is undefined(problem) which is the part of jquery's formstyller plugin mentioned in my first page.

 jQuery(document).ready(function() {
   jQuery('input, select').styler({
                selectSearch: true,
            });
 });

1) My first question is how will i use jquery in my first page.

2) My second question is if i may how can i transport jquery.formstyller plugin in my ajax.js.

This is my first page of the plugin    


          <?php
        /*
        Plugin Name: guard_search plugin
        Description: Search Plugon
        Author: mazhar
        */   

wp_enqueue_script( 'my-ajax-handle', plugin_dir_url( _FILE_ ) . 'guards_search/js/ajax.js', array( 'jquery' ) );
        wp_localize_script( 'my-ajax-handle', 'the_ajax_script', array( 'ajaxurl' => admin_url('admin-ajax.php' )));

       wp_register_style('jquery.formstyler', plugin_dir_url( _FILE_ ) . 'guards_search/css/jquery.formstyler.css');
        wp_enqueue_style('jquery.formstyler');

        wp_register_style('jquery.formstyler', plugin_dir_url( _FILE_ ) . 'guards_search/js/jquery.formstyler.min.js');
        wp_enqueue_style('jquery.formstyler');

        wp_register_script('prefix_bootstrap', plugin_dir_url( _FILE_ ) . 'guards_search/js/bootstrap.min.js');
        wp_enqueue_script('prefix_bootstrap');

        wp_register_style('prefix_bootstrap', plugin_dir_url( _FILE_ ) . 'guards_search/css/bootstrap.min.css');
        wp_enqueue_style('prefix_bootstrap');

        add_action( 'wp_ajax_models_click', 'models_click');
        add_action( 'wp_ajax_nopriv_models_click', 'models_click');

        add_action( 'wp_ajax_reset_years', 'reset_years');
        add_action( 'wp_ajax_nopriv_reset_years', 'reset_years');

This is my ajax.js where the problems lies where styler is undefined(problem) which is the part of jquery's formstyller plugin mentioned in my first page.

 jQuery(document).ready(function() {
   jQuery('input, select').styler({
                selectSearch: true,
            });
 });

1) My first question is how will i use jquery in my first page.

2) My second question is if i may how can i transport jquery.formstyller plugin in my ajax.js.

• plugin-development
• jquery

Share Improve this question asked Oct 30, 2018 at 7:39 mazttmaztt 10566 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You will have to load jquery.formstyler first to use it in your ajax.js. You can add it as another dependancie like jquery itself.

wp_enqueue_script( 'my-ajax-handle', plugin_dir_url( _FILE_ ) . 'guards_search/js/ajax.js', array( 'jquery', 'jquery.formstyler' ) );

Also you have a little syntax issue in:

wp_register_style('jquery.formstyler', plugin_dir_url( _FILE_ ) . 'guards_search/js/jquery.formstyler.min.js');

It should be register script, not style. same with the line below wp_enqueue_style('jquery.formstyler');. add as wp_enqueue_script('jquery.formstyler'); script instead as style!