Abhee Abhee - 2 months ago 14
jQuery Question

How to append custom metabox fields with jQuery in post

I am trying to add custom meta box in post programmatically, but js gives an error,the goal is when I click add button,the same text area box is append which
was created previously. My code for crating custom metabox in function.php file in twenty seventeen theme is:

// including custom js files here
function wptuts_scripts_with_jquery() {
wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/myjs.js', array( 'jquery' ));
}
add_action( 'admin_enqueue_scripts', 'wptuts_scripts_with_jquery' );

// starting custom meta box
add_action( 'add_meta_boxes', 'm_param_meta_box_add' );
function m_param_meta_box_add() {
add_meta_box( 'm_param_post', 'Box Title', 'm_param_post_meta_box_cb', 'post', 'normal', 'high' );
}

function m_param_post_meta_box_cb( $post )
{
$values = get_post_custom( $post->ID );
if ( isset( $values['m_meta_description'] ) ) {
$m_meta_description_text = esc_attr( $values['m_meta_description'][0] );
}
wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' );

?>

<div id="info"></div>
<label> Name: </label>
<textarea rows="1" cols="20" name="m_meta_description" ><?php echo $m_meta_description_text; ?></textarea>

<button type="button" name="add" id="add">Add</button><br><br>

<?php
} // close m_param_post_meta_box_cb function

add_action( 'save_post', 'cd_meta_box_save' );
function cd_meta_box_save( $post_id )
{
// Bail if we're doing an auto save
if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

// if our nonce isn't there, or we can't verify it, bail
if( !isset( $_POST['meta_box_nonce'] ) || !wp_verify_nonce( $_POST['meta_box_nonce'], 'my_meta_box_nonce' ) ) return;

// if our current user can't edit this post, bail
if( !current_user_can( 'edit_post' ) ) return;

// Make sure your data is set before trying to save it
if( isset( $_POST['m_meta_description'] ) ) {
update_post_meta( $post_id, 'm_meta_description', wp_kses( $_POST['m_meta_description']) );
}
}


my js code error is:"Uncaught TypeError: $ is not a function
at myjs.js:2
"

my js code is:

// <script type="text/javascript">
$(document).ready(
function(){
$("#add").click(function(){
$("#info").append('fname<input type="text" name="name[]">');
})
}
);
// </script>

Answer Source

Try using this:

    jQuery(document).ready(
        function(){
            jQuery("#add").click(function(){
                jQuery("#info").append('fname<input type="text" name="name[]">');
            })
        }
    );

According to this article, when WordPress’ jQuery is loaded, it uses compatibility mode, which is a mechanism for avoiding conflicts with other language libraries:

What this boils down to is that you can’t use the dollar sign directly as you would in other projects. When writing jQuery for WordPress you need to use jQuery instead.