Unable to get JQuery to work in the backend

  • I am trying to customize a plugin (https://github.com/QuizandSurveyMaster/quiz_master_next ) . The plugin has a form in the backend which lets you create questions and its answers with different types of options for the question . This form has a drop down ( screenshot below) : https://drive.google.com/file/d/1FR0kUMJBc98KfG06u9_-q4Cn2pIv6nLc/view?usp=sharing . When a particular <option> is chosen from the drop down I want to append another drop down to the form . To do this I am trying to use my own Jquery script .

    Here is the code which creates the question settings form in the plugin:

    function qsm_settings_questions_tab() {
	global $mlwQuizMasterNext;
	$mlwQuizMasterNext->pluginHelper->register_quiz_settings_tabs( __( 'Questions', 'quiz-master-next' ), 'qsm_options_questions_tab_content' );
}
add_action( 'plugins_loaded', 'qsm_settings_questions_tab', 5 );

    I am enqueing my Jquery script in the qsm_options_questions_tab_content() function like below :

    function qsm_options_questions_tab_content() { 

wp_enqueue_script( 'micromodal_script', plugins_url( '../../js/micromodal.min.js', __FILE__ ) );
// This is my Jquery script 
	wp_enqueue_script( 'min_max', plugins_url( '../../js/minmax.js', __FILE__ ) , array() , false, true );
	wp_enqueue_script( 'qsm_admin_question_js', plugins_url( '../../js/qsm-admin-question.js', __FILE__ ), array( 'backbone', 'underscore', 'jquery-ui-sortable', 'wp-util', 'micromodal_script', 'qmn_admin_js' ), $mlwQuizMasterNext->version, true );

}

    I am seeing my JS being loaded at the end after the Jquery core being loaded in the HTML source code like below :

    <script type='text/javascript' src='https://localhost/testwp/wp-admin/load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils&ver=5.2.9'></script>

    <script type='text/javascript' src='https://localhost/testwp/wp-content/plugins/quiz_master_next-master/php/admin/../../js/minmax.js?ver=5.2.9'></script>

    However , JQuery selectors doesnt seem to work at all allthough vanilla Javascipt is working all right ( console.log(“hi”) in the below code . The Jquery script is intended to be triggered on change of select drop down . Here is the code :

    jQuery(function () {
	console.log("hi");
   jQuery('#question_type').on('change', function() {
		alert( this.value );
		console.log('hi');
	jQuery('#testbutton').on('click' , function() {
		console.log("hi");
	});
	}); 
});

    For testing purposes I had a button inserted in the form and even a simple Jquery on click is failing . Could someone please provide any pointers as to why Jquery is not working ?

Viewing 4 replies - 1 through 4 (of 4 total)

  • You need to use the correct hook to enqueue the admin script

    https://developer.www.ads-software.com/reference/hooks/admin_enqueue_scripts/

    e.g.

    add_action(
    'admin_enqueue_scripts',
    function() {
      wp_enqueue_script( ....   
    }
);
    • This reply was modified 3 years, 9 months ago by Alan Fuller.
    Thread Starter Rajarshi Bose

    (@truthsearcher83)

    I had tried with the admin_enqueue_scripts hook initially but even that doesnt work . 

    function enqueue_min_max () {
	//wp_enqueue_script( 'min_max', plugins_url( '../../js/minmax.js', __FILE__ ) , array() , false, true );
} 

add_action( 'admin_enqueue_scripts', 'enqueue_min_max', 999 );

    What is odd is any vanilla JS seems to be working but JQuery is not . I am absolutely stuck with this for two days .

    • This reply was modified 3 years, 9 months ago by Rajarshi Bose.

    is minmax.js dependent on jQuery? in which case array() should be array('jquery)

    Moderator bcworkz

    (@bcworkz)

    Ummm… if your last snippet is an accurate representation of your actual code, the wp_enqueue_script() call is commented out and will not execute. You don’t want // at the head of the line if you want the code to execute.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Unable to get JQuery to work in the backend’ is closed to new replies.