mettre à jour les données à l'aide de jquery

Question

J'ai une page qui répertorie les enregistrements d'un appel de base de données. Je veux avoir un lien 'edit' sur chaque ligne qui fera apparaître une boîte de dialogue Jquery afin que la ligne puisse être éditée. Ma question est comment puis-je transmettre les données de la ligne sélectionnée à la boîte de dialogue jquery afin qu'il puisse être modifié? J'ai le code qui ouvre jquery popup mais les zones de texte sont vides.

<div id="boxes"> 

<div id="dialog2" class="window"> 
<form method="post" action="update_books_a.php"> 
    <input name="name" type="text" value="<?php echo $ing['book_name']; ?>"/>
 
    <input name="author" type="text" value="<?php echo $ing['author']; ?>"/> 

    <input type="hidden" name="book_id" value="<?php print $ing['book_id'];?>" /> 
    

 
<input type="submit" value="Update" class="close"/> 
</form> 
</div>

code myphp est

$select=mysql_query("select * from books where book_id='$book_id'") or die(mysql_error()); 
while($ing=mysql_fetch_array($select)) 
{ 
?> 
<tr> 
    <td><a href="#dialog2" name="modal"><?php echo $ing['book_name'];?></a></td> 
    <td><?php echo $ing['author'];?></td></tr> 

le code jquery est

$(document).ready(function() { 

    //select all the a tag with name equal to modal 
    $('a[name=modal]').click(function(e) { 
     //Cancel the link behavior 
     e.preventDefault(); 

     //Get the A tag 
     var id = $(this).attr('href'); 

     //Get the screen height and width 
     var maskHeight = $(document).height(); 
     var maskWidth = $(window).width(); 

     //Set heigth and width to mask to fill up the whole screen 
     $('#mask').css({'width':maskWidth,'height':maskHeight}); 

     //transition effect 
     $('#mask').fadeIn(1000); 
     $('#mask').fadeTo("slow",0.8); 

     //Get the window height and width 
     var winH = $(window).height(); 
     var winW = $(window).width(); 

     //Set the popup window to center 
     $(id).css('top', winH/2-$(id).height()/2); 
     $(id).css('left', winW/2-$(id).width()/2); 

     //transition effect 
     $(id).fadeIn(2000); 

    }); 

    //if close button is clicked 
    $('.window .close').click(function (e) { 
     //Cancel the link behavior 
     e.preventDefault(); 

     $('#mask').hide(); 
     $('.window').hide(); 
    }); 

    //if mask is clicked 
    $('#mask').click(function() { 
     $(this).hide(); 
     $('.window').hide(); 
    }); 

}); 



body { 
font-family:verdana; 
font-size:15px; 
} 

a {color:#333; text-decoration:none} 
a:hover {color:#ccc; text-decoration:none} 

#mask { 
    position:absolute; 
    left:0; 
    top:0; 
    z-index:9000; 
    background-color:#000; 
    display:none; 
} 

#boxes .window { 
    position:absolute; 
    left:0; 
    top:0; 
    width:440px; 
    height:200px; 
    display:none; 
    z-index:9999; 
    padding:20px; 
} 



#boxes #dialog2 { 
    background:url(../images/notice.png) no-repeat 0 0 transparent; 
    width:326px; 
    height:229px; 
    padding:50px 0 20px 25px; 
}

Answer 1

Vous pouvez extraire la valeur de texte de chaque élément en utilisant la méthode .text().
Si vous avez besoin de la valeur html vous pouvez utiliser .html() ou yourNode.innerHTML

Answer 2

Vous n'avez pas book_id dans la table, donc je ne peux pas remplir l'entrée cachée pour vous. Mais le code ci-dessous vous montre comment le faire pour book_name et author, donc j'espère que cela vous donne assez pour commencer.

Vous devez ajouter le code à votre gestionnaire de clic, après cette ligne:

//Cancel the link behavior 
e.preventDefault(); 

Ajouter ce code:

// Copy book_name 
$("#dialog2 input[name=name]").val($(this).text()); 

// Copy author 
$("#dialog2 input[name=author]").val($(this).parent().next("td").text());