0

This is a very basic question. I am using Serverpress for local development.I have been trying to create a dynamic dropdown.I did some reading and I found an example html,php and jquery script that suits my requirement. The php code is stores n a fike and the jquery calls it using load function. I am not sure where to place the php script so that the output will be passed on to jquery. Please help!

https://css-tricks.com/dynamic-dropdowns/

This is what I have been trying to recreate. Not sure where to place the getter.php!

0

Your problem involves a technique called REST API. WordPress supports it. All you need is to make a pluginregister_rest_field → pass your data through it.

What you want to do may seems simple but it is still lot of works. Also, remember to tighten plugin security.

  • Should I place the PHP file in my local folders or somewhere on the webpage? – Divya Ramana Oct 6 '19 at 5:04
  • Put it in where you build the site. From the question, I can say local. Anyway, if I were you, I would read 2 given links to understand how to build a plugin and how to communicate WP server from client. Without based knowledge, I couldn't help you with this complex task. – Star Light Oct 6 '19 at 9:11
0

There's a number of way to do the thing you're asking.

If your php function just spits out an array of options, you could consider adding the array to your site's footer with wp_localize_script() and then get the data out of by referencing the js object in your script. E.g.

// theme functions.php or a plugin file
function dropdown_options() {
  // modify to match your setup
  wp_enqueue_script( 'my-scripts', JS_DIR_URI . 'my-scripts.js', array('jquery'), null, true ); // main scripts file
  wp_localize_script( 'my-scripts', 'dropdownOptions', $array_of_dropdown_options );
}
add_action( 'wp_enqueue_scripts', 'dropdown_options' );

// in your js file, access dropdown options
dropdownOptions.someOption;

Another option would be to use the WP admin ajax to get the dropdown options whenever the dropdown selection changes. E.g.

// theme functions.php or a plugin file
function data_from_admin_ajax() {
  wp_enqueue_script( 'frontend-ajax', JS_DIR_URI . 'frontend-ajax.js', array('jquery'), null, true );
  wp_localize_script( 'frontend-ajax', 'frontend_ajax_object',
    array( 
      'ajaxurl' => admin_url( 'admin-ajax.php' ),
    )
  );
}
add_action( 'wp_enqueue_scripts', 'data_from_admin_ajax' );

add_action( 'wp_ajax_dropdown_options', 'my_awesome_dropdown_options_function' ); // logged in users
add_action( 'wp_ajax_nopriv_dropdown_options', 'my_awesome_dropdown_options_function' ); // logged out users
function my_awesome_dropdown_options_function() {
  // nonce check, if needed
  // capabilities check, if needed
  // check for required parameter, if needed
  // do stuff and push data to $response
  // return ajax response with wp_send_json( $response ) or wp_send_json_success( $response ) or wp_send_json_error( $response )
}

// frontend-ajax.js
jQuery(document).ready(function($) {
  $('.some-dropdown').on('change',function(){
    var data = {
        'action': 'dropdown_options',
        'dropdownValue': $(this).val()
    };    
    $.post(frontend_ajax_object.ajaxurl, data, function(response) {
        console.log(response);
    });
  });   
});

Or if you want, you could use the WP REST API instead of the admin ajax. In this case you probably need to add a custom endpoint, https://developer.wordpress.org/rest-api/extending-the-rest-api/adding-custom-endpoints/

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.