同じページ内の複数のボタンをAjaxに送信

Question

私は50以上の多分、AjaxのWordPressの方法に単一の値を提出するような同じページに複数のボタンを持っています。彼らは次のようになります：

<input id="1-57977357564a7" class="button-primary" type="submit" value="Done"/> 
<input id="2-57977357564a7" class="button-primary" type="submit" value="Done"/> 
<input id="3-57977357564a9" class="button-primary" type="submit" value="Done"/> 
// And so on, more buttons 

各ボタンはあるデータベーステーブルの行で更新する必要があります。 それは私がidこの機能にはいくつかの方法を渡す必要があり

add_action('wp_ajax_update_completed_todos', 'update_completed_todos'); 
add_action('wp_ajax_nopriv_update_completed_todos', 'update_completed_todos'); 
function update_completed_todos() { 
    global $wpdb; 
    $table_name = $wpdb->prefix . 'todos'; 
    $id = '';// Need to pass the id here some how 
    $result = $wpdb->get_results("SELECT id FROM " . $table_name . " WHERE id = '" .$id."'"); 
    if (count ($result) > 0) { 
     $wpdb->update( 
      $table_name, 
      array( 
       'complete' => '10', 
      ), 
      array('id' => $id) 
     ); 
    } 
} 

アヤックス

使用 update_completed_todos()を呼び出す必要があります。
idを渡すには、Ajaxで何を書くべきですか？
そして、どのボタンをこのAjaxのターゲットにすることができますか？
Ajaxは値の代わりに idを渡すことができないため、ここでAjaxに値を渡すにはどうすればよいですか？
Ajaxは何かのようにする必要があります：

$.ajax({ 
    url: "<?php echo esc_js(admin_url('admin-ajax.php')) ?>", 
    type: "POST",// I am not sure 
    data: // Something I don't know here 
    //may be more here  
}); 

Answer 1

試してみてください。

HTML：

<input id="1-57977357564a7" class="button-primary" type="submit" value="Done" onclick="ajax($(this));return false;"/> 
<input id="2-57977357564a7" class="button-primary" type="submit" value="Done" onclick="ajax($(this));return false;"/> 
<input id="3-57977357564a9" class="button-primary" type="submit" value="Done" onclick="ajax($(this));return false;"/> 

Javascriptを：

function ajax($this) { 
    var id = $this.attr("id"); 


    $.ajax({ 
     method: "POST", 
     url: "your address", 
     dataType: "your response type", 
     data: { 
      id: id 
     }, 
     success: function (response) { 
      console.log(response); 
     } 
    }); 
} 

PHP：もちろん

if (isset($_POST["id"])) { 
    var_dump($_POST["id"]); 
    exit; 
} 

あなたのデータにdataTypeとし、URLを変更する必要があります。

wordpressの方法

Javascriptを：

function ajax($this) {//If you got error "Function ajax is not defined" declare this before document ready 
    var id = $this.attr("id"); 

    $.ajax({ 
     method: "POST", 
     url: "<?php echo esc_js(admin_url('admin-ajax.php')) ?>", 
     dataType: "text", 
     data: { 
      action: "update_completed_todos",// call the php function 
      id: id // store id 
     }, 
     success: function (response) { 
      console.log(response); 
     } 
    }); 
} 

PHP：

add_action('wp_ajax_update_completed_todos', 'update_completed_todos'); 
add_action('wp_ajax_nopriv_update_completed_todos', 'update_completed_todos'); 
function update_completed_todos() { 

    $id = $_POST['id'];// store id from ajax 
    //do something with this id 
}