Custom Fields
Re-Envisioned › Support › MB Relationships › Show data from related post/term after selection
- This topic has 2 replies, 2 voices, and was last updated 1 year, 4 months ago by
brandonjp.
-
CreatorTopic
-
October 9, 2019 at 4:32 AM #16442
brandonjp
ParticipantI’m trying to create a display on an Admin Edit Post form that will show meta from a relational field after the related post/term is selected.
Is there a built-in way to do this?
If not, Any tips on creating this? (I’m guessing I’ll use JS to make a custom request to get the data and populate a Custom HTML MB field)
-
CreatorTopic
-
AuthorReplies
-
October 10, 2019 at 2:45 PM #16457
Anh Tran
KeymasterHi,
Do you mean showing the data dynamically, based on the user selection of related posts/terms? If yes, then I think you’ll have to do that your way with JS + custom HTML field.
October 15, 2019 at 3:04 AM #16518brandonjp
ParticipantI ended up accomplishing this using a Custom HTML field & a little PHP and JS.
If anyone else ends up needing direction on this, here are a few links. This is not a drop-in solution for you but hopefully helps get you started.
PHP to handle an incoming AJAX request for term metadata & return JSON:
/** // ————————- // Fetch Taxonomy Term & Meta // ————————- // GOAL: When a user selects a taxonomy term (from a MetaBox.io field) this helps fetch // the term & it's metadata and returns JSON so the JS can load it into a Custom HTML block // ————————- // FORUM – https://metabox.io/support/topic/show-data-from-related-post-term-after-selection/ // PHP – https://gist.github.com/21fed6266453de7ba76b3d2bc0e5a06f // JS – https://gist.github.com/3b636d0c7e55ce6dc58ceba3de9a974e // ————————- **/ // Gets meta data for a term and returns JSON function get_json_term_meta() { global $wpdb; $termID = $_GET['termID']; $field = $_GET['field']; if (!empty($termID)) { if (empty($field)) { $data = get_term_meta($termID); $term = get_term($termID); // add the term name $data['term_name'] = [$term->name]; if (!empty($data['related_customer'])) { $relCustomer = get_term($data['related_customer'][0]); // add the customer name $data['related_customer_name'] = [$relCustomer->name]; } } else { $data = get_term_meta($termID, $field); } echo wp_send_json($data); } wp_die(); } add_action('wp_ajax_get_json_term_meta', 'get_json_term_meta'); // Gets a term and returns JSON function get_json_term() { global $wpdb; $termID = $_GET['termID']; $field = $_GET['field']; if (!empty($termID)) { if (empty($field)) { $data = get_term($termID); } else { $data = get_term($termID, $field); } echo wp_send_json($data); } wp_die(); } add_action('wp_ajax_get_json_term', 'get_json_term'); JS to fetch the taxonomy term metadata and place it into the page:
// ————————- // Fetch Taxonomy Term & Meta // ————————- // GOAL: When a user selects a taxonomy term (from a MetaBox.io field) this fetches the // term & it's metadata and loads it into a Custom HTML block // ————————- // FORUM – https://metabox.io/support/topic/show-data-from-related-post-term-after-selection/ // PHP – https://gist.github.com/21fed6266453de7ba76b3d2bc0e5a06f // JS – https://gist.github.com/3b636d0c7e55ce6dc58ceba3de9a974e // ————————- // fetch taxonomy metadata and load it into view let get_job_tax_html = function get_job_tax_html(tax) { let htmlField = `.${tax}_html`; jQuery(`${htmlField}`).slideUp(); // jQuery(`${htmlField}`).addClass('hidden'); jQuery(`${htmlField} .rwmb-input > *`).empty(); let termID = jQuery('#' + tax).val(); if (termID !== '') { let data = { action: 'get_json_term_meta', termID: termID }; let jqReq = jQuery.get(ajaxurl, data); jqReq.done(function(response) { // console.log(tax, response); jQuery.each(response, function(key, val) { // use this on first run to create the HTML to place inside the Custom HTML field // jQuery(`<span class="${key}">${val[0]}</span>`).appendTo(`${htmlField} .rwmb-input`); // as long as html structure is in place, this will inject the matching data if (val.length) jQuery(`${htmlField} .rwmb-input .${key}`).text(val[0]); }); // jQuery(`${htmlField}`).removeClass('hidden'); jQuery(`${htmlField}`).slideDown(); }); } } // PM – fetch term meta on init & then again on change get_job_tax_html('job_pm_taxonomy'); jQuery('select#job_pm_taxonomy').change(function() { get_job_tax_html('job_pm_taxonomy'); }); // Contact – fetch term meta on init & then again on change get_job_tax_html('job_contact_taxonomy'); jQuery('select#job_contact_taxonomy').change(function() { get_job_tax_html('job_contact_taxonomy'); }); Add Custom HTML field with html to support the incoming term metadata (I also give it a custom class):
After selecting a taxonomy it populates the Custom HTML like so:
-
AuthorReplies
- You must be logged in to reply to this topic.