Ajax:将复选框功能转换为Wordpress中的输入字段和更新按钮

Ajax: convert checkbox function to input field and update button in Wordpress

本文关键字：输入 字段 按钮 更新 Wordpress 复选框 功能 转换 Ajax      更新时间：2023-09-26

复选框只有2个值:0和1。但我要做的是把日期和时间在文本输入(而不是复选框)，而不是更新它与提交按钮更新与Ajax。请帮助将复选框转换为输入字段和更新按钮，如下所示:

<input id="post_author_credit_update" name="post_author_credit" value="2015-08-22 11:00 PM" type="text"/>';
<input id="post_author_credit_update" name="post_author_credit" type="submit" class="button updatemeta button-small"  value="Update"/>

实际的复选框

<input id="post_author_credit_update" name="post_author_credit" value="1" type="checkbox"<?php checked( get_post_meta( $post->ID, 'post_author_credit', true ), 1, false ); ?>/>

和负责保存值的脚本:

 function ajax_save_post_author_credit() {
    // Verify that the incoming request is coming with the security nonce
    if( wp_verify_nonce( $_REQUEST['nonce'], 'ajax_post_author_credit_nonce' ) ) {
        // Set the value of the post meta based on the post data coming via the JavaScript
        $post_author_credit = '';
        if( isset( $_POST['post_author_credit'] ) && 'true' == $_POST['post_author_credit'] ) {
            $post_author_credit = 1;
        } // end if
        // Attempt to update the post meta data. If it succeeds, send 1; otherwise, send 0.
        if( update_post_meta( $_POST['post_id'], 'post_author_credit', $post_author_credit ) ) {
            die( '1' );
        } else {
            die( '0' );
        } // end if/else
    } else {
        // Send -1 if the attempt to save via Ajax was completed invalid.
        die( '-1' );
    } // end if 
 } // end ajax_save_post_author_credit
} // end class
new Post_Author_Credit();

. ./插件/文章作者/js/admin.js: 

(function($) {
$(function() {
    $('#post_author_credit_update').click(function(evt) {
        $.post(ajaxurl, {
            action:             'save_post_author_credit',
            nonce:              $('#ajax_post_author_credit_nonce').text(),
            post_id:            $('#post_ID').val(),
            post_author_credit: $(this).is(':checked')
            }, function(response) {
                $( "#ajax_response" ).text( "UPDATED" ).show().fadeOut( 1000 );
        });
    });
});
})(jQuery);

Thanks in advance

我花了一整天的时间寻找和学习，最后我自己做了。以防将来有人需要它。您必须自己添加自定义元框。

add_action( 'admin_enqueue_scripts','your_script' );
function your_script() {
wp_enqueue_style( 'style_register', plugins_url( '/css/style.css', __FILE__ ) );
wp_enqueue_script( 'script_register', plugins_url( '/js/admin.js', __FILE__ ) );
}
<input id="the_field" name="the_field" value="your_value" type="text"/>
<input id="meta_update" name="meta_update" class="button updatemeta button-small"  value="Update"/>
<?php $html .= '<span id="ajax_meta_nonce" class="hidden">' . wp_create_nonce( 'ajax_meta_nonce' ) . '</span>'; echo $html; ?>
<span class="ajax_response_span"></span>

行动:

add_action( 'wp_ajax_save_value', 'meta_save_ajax' ); 
function meta_save_ajax( $post_id ) {
if( wp_verify_nonce( $_REQUEST['nonce'], 'ajax_meta_nonce' ) ) {
if( update_post_meta( $_POST['post_id'], 'your_meta_key', sanitize_text_field( $_POST[ 'your_meta_key' ] ) ) )
{ die( '1' );
}
else
{ die( '0' ); }
}
else { die( '-1' ); }
}

JS: 

(function($) {
$(function() {
    $('#meta_update').click(function(evt) {
        var my_val = $('#the_field').val();
        $.post(ajaxurl, {
            action:             'save_value',
            nonce:              $('#ajax_info_box_nonce').text(),
            post_id:            $('#post_ID').val(),
            your_meta_key:       my_val                      
            }, function(response) {
                if( 1 == response) { $(".ajax_response_span" ).text( "The request was successful and saving of the data succeeded." ).show().fadeOut( 1000 ); }
                else
                if( 0 == response ) { $( ".ajax_response_span" ).text( "The request was successful but saving the data failed." ).show().fadeOut( 1000 ); }
                else
                if( -1 == response ) { $( ".ajax_response_span" ).text( "The request failed the security check." ).show().fadeOut( 1000 ); }
        });
    });
});
})(jQuery);
相关文章：