Comment obtenir des valeurs de foreach boucle de php dans jquery

Question

Je travaille sur un plugin dans Wordpress dans lequel je stocke des valeurs dans la nouvelle table qui est créée sur l'activation de plugin son fonctionnement parfaitement.

Maintenant, j'alla chercher les valeurs de la table comme suit

 <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> 

après l'extraction des données que j'afficher les valeurs sous forme de liste.

Maintenant, je veux mettre à jour les valeurs des champs d'entrée et textarea par ajax pour lesquels j'écrit le code suivant

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; 
} 

Lorsque je clique sur le premier bouton de mise à jour de l'article, il me prévient par exemple le droit id. (12) et le mettre à jour, mais lorsque je clique sur le reste du bouton de mise à jour de l'élément, il m'indique l'ID du premier élément (12) et les données ne sont pas mises à jour.

J'espère que vous comprendrez ma question.

Answer 1

Essayez ce code. ajouter id à tous les champs comme id="img_link_<?php echo $row->ajc_img_id; ?>"

code 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> 

code 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

vous affichez des valeurs basées sur un nom de classe et il pourrait y être plusieurs éléments avec le même nom de classe. Ce que vous devez faire est de cibler <tr> spécifique et obtenir des valeurs de ce <tr> seulement.

donc votre code jQuery devrait ressembler à ceci:

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); 
    }); 
}); 

Il vous suffit d'ajouter $ (this) .parents ('tr') trouver avant de sélectionner des valeurs de chaque élément..