Populate dropdown with Child Pages based on Parent Page chosen

  • I’m trying to populate the Child Page dropdown with that of the selected Parent Page – If a specific Parent page is chosen it should fill the second dropdown with all Child pages listed under that parent.

    Once the submit button is clicked, it would then direct users to the selected child page.

    In the first dropdown, I’ve pulled the necessary Parent pages based on their page ids. I’m stuck from here. What do I do to achieve getting the secondary dropdown 100% working?

    
<div id="pages">
    <h2><?php _e('pages:'); ?></h2>
    <form action="<?php bloginfo('url'); ?>" method="get">

        <!-- Parent Page dropdown -->
        <?php wp_dropdown_pages( array(
          'include' => array( 119, 467, 857, 1027, 404 ), // Array of Parent Page IDs to include.
        ) ); ?>

        <!-- Child Page dropdown -->
        <?php wp_dropdown_pages( array(
          'include' => array( ), // Array based on selected Parent Page.
        ) ); ?>

    <input type="submit" name="submit" value="view" />
    </form>
</div>
    • This topic was modified 2 years, 11 months ago by zuh093.
    • This topic was modified 2 years, 11 months ago by zuh093.
    • This topic was modified 2 years, 11 months ago by zuh093.
Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello @zuh093

    You have to use jQuery Ajax functionality here.

    You have to make an Ajax call on the Drop-down selection of parent pages, after that, you have to pass the parent id of the page in that Ajax data then you have to create a PHP function in the action of Ajax by getting that parent ID in that function then this parent ID has to be put in the code given below:

    <?php wp_dropdown_pages(array('child_of' => $parent_id,'show_option_none'=> 'Select A Child Page')); ?>

    After this, on the success of Ajax, it replaces the drop-down HTML of the child page with the drop-down of the old child page.

    I hope it will work for you.

    Thanks

    Moderator bcworkz

    (@bcworkz)

    Ajax in WP has a few quirks over generic Ajax on a generic web page. Review this article on jQuery in the Plugin Handbook, as well as the two subsequent pages on Ajax and server side PHP. Note that the various examples when all tied together will not be fully functional. Each example reasonably illustrates a concept, but despite the appearance that they’d all work together when combined, that wasn’t the intention.

    I noticed in your earlier topic you did an Ajax call passing data as a string like so:
    data: 'action=my_special_action'
    For PHP to properly parse passed data into a $_POST array, the data needs to be in JS object form:
    data: { action : 'my_special_action'}
    Add more object properties as desired.

    Ajax in WP can be tricky if you’re new to it. I recommend first simply getting static data to make a round trip from client to server and back to client. Don’t do anything extra or fancy, just the bare minimum to send data back and forth. Once you have it working, then you can expand upon it to have it do something useful like getting a list of children.

    FWIW, hard coding IDs isn’t the best practice. It makes future maintenance difficult. It’s fine for now while you focus on getting other elements working. In the future it’d be better to query for the pages using some criteria that’s accessible to end users. Even if it’s simply a custom field with a specific value. Query for all pages with that value to compose the list.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Populate dropdown with Child Pages based on Parent Page chosen’ is closed to new replies.