Support

Account

Register Login

Home › Forums › Backend Issues (wp-admin) › jQuery Auto Populate

Solved

jQuery Auto Populate

  • Hi,

    I have 2 select fields

    1. Country (Namibia, Uganda)
    2. Area (Area 1 Namibia, Area 2 Namibia, Area 1 Uganda, Area 2 Uganda)

    Is there hook/filter to auto populate select field area with jquery based on country selection?
    – I want to show areas filtered by country
    – I have 10 countries so I don’t want to use conditional logic
    – Areas for every country are added trough option page (comma separated)

    Here is screenshot from options page where admin enters available select values: http://i.imgur.com/r5Q9v5c.png

    So on post type, there are 2 select fields: Country and Area, and then based on selected country I want to populate field Area.

    Thanks in advanced

    BR
    Vlado

  • Hi @bobz

    Thanks for the question.

    At the moment this kind of event driven select field is not yet possible with the core of ACF.

    It is something I will look at in the near future, but for now you will need to write some custom AJAX to listen to a change event on the first select and then use PHP / AJAX to return the possible choices for the second select.

    You can use jQuery to then populate the second select form with these choices.

    Hope that helps.

    Thanks
    E

  • Ok, thanks I will try to figure out something.

    BR
    V

  • Hi,

    I’m not quite sure how to do this correct.

    – I have function that returns me list of Areas: http://pastebin.com/Y0Z1YPwQ
    Function accepts 1 param (Selected country) and that param is passed via ajax, so function returns me array of areas

    – Can I somehow now call ‘acf/load_field/’ filter or should I use jquery to populate ‘Areas’ select field?

    Thanks in advanced

    BR
    V

  • Hi @bobz

    Load_value filter documentation can be found here:
    http://www.advancedcustomfields.com/resources/filters/acfload_value/

    Thanks for posting your code. the function will work in a normal PHP syntax environment, but please note that an AJAX call does not pass parameters.

    You will need to post the data from jQuery and you will need to write a listener function in PHP to get the $_POST data and then pass that to you above function.

    Please read up on the PW docs as to how to use jQuery and AJAX in your functions.php

    Thanks
    E

  • Hi E,

    I have one more question pls, here is my js code: http://pastebin.com/hejnDsgg
    What I do here is:

    1. I have 3 different post types where I want to use this auto populate
    2. Every post type has different id for select menu, so I have put their id into variables to make life easier

    3. I get selected value from ‘Select Country’
    4. I do AJAX to get list of areas and cities for that country

    5. I get response as comma seperated (eg: city1,city2,city3)
    6. I do with jquery each:
    $( '#' + selector_area ).append( $('<option></option>').val(text).html(text) )

    This is how I append values as options under my select menu.

    Now everything here works fine, but problem is that saved value is not selected or displayed.
    Every time I refresh ‘Edit posts’ area is not correct so I need to select area every time I edit and save post.

    Any advice please?

    BR
    V

  • Hi @bobz

    I think the issue is that because on page load, the select field does not contain any value because it has no option element to select.

    This means, your JS can’t find the origional value to select when you update the DOM with new option elements.

    Perhaps in your PHP AJA function, you can lookup the value for the field, and include this ‘selected’ data for the option you want selected.

    To do this, you will need to change the way you post pack your data as a comma separated string wont allow for this kind of data.

    Try using JSON to return an array of items, plus the selected value if it has one!

    Does that help?

  • Hi E,

    Thanks for reply.
    I have found a solution like this,
    – when I enqueue and localize script i lookup for a values in database and save them in localized variables.
    Then after I load all values in select menu i just set option as selected.

    Important thing is that it works

    BR
    V

  • Hi,

    I have written little tutorial on how to achieve this, so I might just share it here: jQuery Auto Populate

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘jQuery Auto Populate’ is closed to new replies.