Как получить значения из цикла foreach php в jquery

Question

Я работаю над плагином в Wordpress, в котором я храню значения в новой таблице, которая создается при активации плагинов, отлично работает.

Теперь я принес значение из таблицы, как следующего

 <tbody> 
       <?php 
       global $wpdb; 
       $result = $wpdb->get_results("SELECT * FROM wp_ajc_images"); 
       foreach ($result as $row) { 
        ?> 
        <tr id="list_item"> 
         <td width="12%"> 
          <img src="<?php echo $row->ajc_img_path ?>" width="100"> 
         </td> 
         <td width="22%"> 
          <input type="text" class="img_link" value="<?php $row->ajc_img_link ?>" size="30"> 
          <input type="hidden" class="ajc_field_id" value="<?php echo $row->ajc_img_id ?>"> 
         </td> 
         <td width="26%"> 
          <textarea rows="3" class="img_description"><?php $row->ajc_img_description ?></textarea> 
         </td> 
         <td width="22%"> 
          <input type="text" class="img_title" value="<?php $row->ajc_img_title ?>" size="30"> 
         </td> 
         <td width="20%"> 
          <input type="submit" id="update" value="Update"> 
          <button class="delete">Delete</button> 
         </td> 
        </tr> 
        <?php 
       } 
       ?> 
</tbody> 

после загрузки данных я отображение значений в виде списка.

Теперь я хочу, чтобы обновить значения полей ввода и текстовое поле через AJAX, для которого я написал следующий код

add_action('wp_ajax_ajc_update_values', 'ajc_update_value'); 
add_action('wp_ajax_nopriv_ajc_update_values', 'ajc_update_value'); 

add_action("admin_head", "ajc_input_ajax"); 
function ajc_input_ajax() 
{ 
    ?> 
    <script type="text/javascript"> 
     jQuery(document).ready(function() { 

      jQuery("#update").click(function() { 
       var id = jQuery('.ajc_field_id').val(); 
       var update_link = jQuery('.img_link').val(); 
       var update_desc = jQuery('.img_description').val(); 
       var update_title = jQuery('.img_title').val(); 

       alert(id); 

       var data = { 
        action: 'ajc_update_values', 
        ajc_id: id, 
        ajc_update_link: update_link, 
        ajc_update_desc: update_desc, 
        ajc_update_title: update_title 
       }; 

       alert(data.toSource()); 

       jQuery.post('<?php echo admin_url('admin-ajax.php'); ?>', data, function (result) { 
        // alert(result); 
       }); 
      }); 

     }); 
    </script> 
    <?php 
} 

//Updating values in database 
function ajc_update_value() 
{ 
    $id = $_POST['ajc_id']; 
    $link = $_POST['ajc_update_link']; 
    $desc = $_POST['ajc_update_desc']; 
    $title = $_POST['ajc_update_title']; 

    global $wpdb; 
    $wpdb->update(
     'wp_ajc_images', 
    array(
     'ajc_img_title' => $title, 
     'ajc_img_description' => $desc, 
     'ajc_img_link' => $link 
    ), 
     array('ajc_img_id' => $id) 
    ) 
    die(); 
    return true; 
} 

При нажатии на кнопку обновления первого элемента он предупреждает меня правильно, например, ID. (12) и обновите его, но когда я нажимаю кнопку останова элемента обновления, он предупреждает меня о первом элементе (12), и данные не обновляются.

Надеюсь, вы поймете мой вопрос.

Answer 1

Попробуйте этот код. добавить идентификатор к каждому полей как id="img_link_<?php echo $row->ajc_img_id; ?>"

HTML код

код

<tbody> 
<?php 
global $wpdb; 
$result = $wpdb->get_results("SELECT * FROM wp_ajc_images"); 
foreach ($result as $row) { 
?> 
<tr id="list_item"> 
    <td width="12%"> 
     <img src="<?php echo $row->ajc_img_path ?>" width="100"> 
    </td> 
    <td width="22%"> 
     <input type="text" id="img_link_<?php echo $row->ajc_img_id; ?>" class="img_link" value="<?php $row->ajc_img_link ?>" size="30"> 
     <input type="hidden" class="ajc_field_id" value="<?php echo $row->ajc_img_id; ?>"> 
    </td> 
    <td width="26%"> 
     <textarea rows="3" id="img_description_<?php echo $row->ajc_img_id; ?>" class="img_description"><?php $row->ajc_img_description ?></textarea> 
    </td> 
    <td width="22%"> 
     <input type="text" id="img_title_<?php echo $row->ajc_img_id; ?>" class="img_title" value="<?php $row->ajc_img_title ?>" size="30"> 
    </td> 
    <td width="20%"> 
     <input type="submit" data-id="<?php echo $row->ajc_img_id; ?>" id="update" value="Update"> 
     <button class="delete">Delete</button> 
    </td> 
</tr> 
<?php 
} 
?> 
</tbody> 

Script

<script type="text/javascript"> 
jQuery(document).ready(function() { 

jQuery("#update").click(function() { 

    var id =jQuery(this).attr('data-id'); 
    var update_link = jQuery('#img_link'+id).val(); 
    var update_desc = jQuery('#img_description'+id).val(); 
    var update_title = jQuery('#img_title'+id).val(); 

    alert(id); 

    var data = { 
     action: 'ajc_update_values', 
     ajc_id: id, 
     ajc_update_link: update_link, 
     ajc_update_desc: update_desc, 
     ajc_update_title: update_title 
    }; 

    alert(data.toSource()); 

    jQuery.post('<?php echo admin_url('admin-ajax.php'); ?>', data, function (result) { 
     // alert(result); 
    }); 
}); 

}); 
</script> 

Answer 2

Вы отображающее значения на основе имени класса и там может быть много элементов с тем же именем класса. То, что вам нужно сделать, это указать целевое значение <tr> и получить значения только от <tr>.

Так что ваш код JQuery должен выглядеть следующим образом:

jQuery("#update").click(function() { 
    var id = $(this).parents('tr').find('.ajc_field_id').val(); 
    var update_link = $(this).parents('tr').find('.img_link').val(); 
    var update_desc = $(this).parents('tr').find('.img_description').val(); 
    var update_title = $(this).parents('tr').find('.img_title').val(); 

    alert(id); 

    var data = { 
     action: 'ajc_update_values', 
     ajc_id: id, 
     ajc_update_link: update_link, 
     ajc_update_desc: update_desc, 
     ajc_update_title: update_title 
    }; 

    alert(data.toSource()); 

    jQuery.post('<?php echo admin_url('admin-ajax.php'); ?>', data, function (result) { 
     // alert(result); 
    }); 
}); 

Вам просто нужно добавить $ (это) .parents ('Tr') найти перед выбором значений из каждого элемента..