Hello,
I am trying to put in place repeatable fields with drop-down lists containing terms from custom taxonomies. It is displayed beneath the editor field in one of my custom post type.
Here is what I cannot achieve:
- simply return the html for the drop-down lists (works fine when I try with inputs for example)
- attribute values to dynamic options
In the end I got the 'Add a screening' (equal to "Add new field") button but when I click on it nothing happens; none of the fields appear.
My code is in the function.php file. This is the first part of the code with the drop-down lists which seems to cause me trouble - it was obtained more from tweaks of numerous copy and paste than from my little knowledge of php:
function print_screening_field($cnt, $p = null) {
if ($p === null) {
$a = $b = '';
} else {
$a = $p['screeningName'];
$b = $p['screeningCountry'];
$festivalterms = get_terms('festival', 'hide_empty=0');
$countryterms = get_terms('country', 'hide_empty=0');
$html = '';
$html .= '<li>';
$html .= '<label>Screening: </label>';
$html .= '<select>';
foreach ($festivalterms as $term) {
$html .= '<option>';
$html .= $term->name;
$html .= '</option>';
}
$html .= '</select>';
$html .= '<label>Country: </label>';
$html .= '<select>';
foreach ($countryterms as $term) {
$html .= '<option>';
$html .= $term->name;
$html .= '</option>';
}
$html .= '</select>';
$html .= '<button class="remove">Remove</button>';
$html .= '</li>';
}
return $html;
}This is the second part of the code; the meta box part with jQuery:
function screening_details_meta_box(){
global $post;
$custom = get_post_custom($post->ID);
$data = get_post_meta($post->ID,"screeningDetails",true);
?>
<h4>OTHER SCREENINGS</h4>
<?php
echo '<ul id="data_items">';
$d = 0;
if (count($data) > 0){
foreach((array)$data as $p ){
if ( isset($p['screeningName']) || isset($p['screeningCountry']) ){
echo print_screening_field($d,$p);
$d = $d +1;
}
}
}
echo '</ul>';
?>
<span id="here"></span>
<button class="add"><?php echo __('Add a screening'); ?></button>
<script>
var $ =jQuery.noConflict();
$(document).ready(function() {
var count = <?php echo $d; ?>;
$(".add").click(function() {
count = count + 1;
$('#data_items').append('<? echo implode('',explode("\n",print_screening_field('count'))); ?>'.replace(/count/g, count));
return false;
});
$(".remove").live('click', function() {
$(this).parent().remove();
});
});
</script>
<style>#data_items {list-style: none;}</style>
<?php
}As in case I don't find a solution, I can use the following piece of code with the screening_details_meta_box function (the one that contains the jQuery bit). But it means I am loosing the drop-down lists:
function print_screening_field($cnt, $p = null) {
if ($p === null){
$a = $b = '';
} else {
$a = $p['screeningName'];
$b = $p['screeningCountry'];
$festivalterms = get_terms('festival', 'hide_empty=0');
$countryterms = get_terms('country', 'hide_empty=0');
}
return <<<HTML
<li>
<label>Screening:</label>
<input type="text" name="screeningDetails[$cnt][screeningName]" value="$a"/>
<label>Country:</label>
<input type="text" name="screeningDetails[$cnt][screeningCountry]" value="$b"/>
<button class="remove">Remove</button>
</li>
HTML
;
}I would like to avoid any plugins. If you could simply mention the technical and exact terms describing what I am trying to do, it would be helping me in my research already.
Thank you