Remplissage de champs sous forme modale en utilisant PHP, jQuery

Question

J'ai un formulaire qui ajoute des liens à une base de données, les supprime, et - bientôt - permet à l'utilisateur de modifier les détails. J'utilise jQuery et Ajax fortement sur ce projet et voudrais garder tout le contrôle dans la même page. Dans le passé, pour manipuler quelque chose comme des détails sur un autre site web (entrée de lien), j'aurais envoyé l'utilisateur à une autre page PHP avec des champs de formulaire peuplés de PHP à partir d'une table de base de données MySQL. Comment est-ce que j'accomplis ceci using un formulaire modal d'interface de jQuery et appelez les détails individuellement pour cette entrée particulière?

Voici ce que j'ai tellement Extrême-

<?php while ($linkDetails = mysql_fetch_assoc($getLinks)) {?> 
<div class="linkBox ui-corner-all" id="linkID<?php echo $linkDetails['id'];?>"> 
<div class="linkHeader"><?php echo $linkDetails['title'];?></div> 
<div class="linkDescription"><p><?php echo $linkDetails['description'];?></p> 
<p><strong>Link:</strong><br/> 
<span class="link"><a href="<?php echo $linkDetails['url'];?>" target="_blank"><?php echo $linkDetails['url'];?></a></span></p></div> 
<p align="right"> 
<span class="control"> 
<span class="delete addButton ui-state-default">Delete</span> 
<span class="edit addButton ui-state-default">Edit</span> 
</span> 
</p> 
</div> 
<?php }?> 

Et voici le jQuery que j'utilise pour supprimer entries-

$(".delete").click(function() { 
     var parent = $(this).closest('div'); 
     var id = parent.attr('id'); 
     $("#delete-confirm").dialog({ 
        resizable: false, 
        modal: true, 
        title: 'Delete Link?', 
        buttons: { 
         'Delete': function() { 
     var dataString = 'id='+ id ; 
     $.ajax({ 
     type: "POST", 
     url: "../includes/forms/delete_link.php", 
     data: dataString, 
     cache: false, 
     success: function() 
     { 
      parent.fadeOut('slow'); 
      $("#delete-confirm").dialog('close');  
     } 
     });         
         }, 
         Cancel: function() { 
          $(this).dialog('close'); 
         } 
        } 
       }); 
     return false; 
}); 

Tout fonctionne très bien, juste besoin de trouver un solution à éditer. Merci!

Answer 1

* Mise à jour pour inclure tous les champs que vous modifiez

Il semble que vous avez la bonne idée. Vous voudrez probablement créer une nouvelle div sur votre page pour la boîte de dialogue d'édition modale.

<div id="dialog-edit" style="background-color:#CCC;display:none;"> 
    <input type="hidden" id="editLinkId" value="" /> 
    Link Name: <input type="text" id="txtLinkTitle" class="text" /> 
    Link Description <input type="text" id="txtLinkDescription" class="text" /> 
    Link URL <input type="text" id="txtLinkURL" class="text" /> 
</div> 

Lorsque l'utilisateur clique sur le bouton d'édition vous voulez remplir le champ caché et la zone de texte avec les valeurs du lien qu'ils ont cliqué sur, puis tourner la boîte de dialogue sur.

$('.edit').click(function() { 
      //populate the fields in the edit dialog. 
      var parent = $(this).closest('div'); 
      var id = parent.attr('id'); 

      $("#editLinkId").val(id); 

      //get the title field 
      var title = $(parent).find('.linkHeader').html(); 
      var description = $(parent).find('.linkDescription p').html(); 
      var url = $(parent).find('.linkDescription span a').attr("href"); 
      $("#txtLinkTitle").val(title); 
      $("#txtLinkDescription").val(description); 
      $("#txtLinkURL").val(url); 

      $("#dialog-edit").dialog({ 
       bgiframe: true, 
       autoOpen: false, 
       width: 400, 
       height: 400, 
       modal: true, 
       title: 'Update Link', 
       buttons: { 
        'Update link': function() { 
         //code to update link goes here...most likely an ajax call. 

         var linkID = $("#linkID").val(); 
         var linkTitle = $("#txtLinkTitle").val() 
         var linkDescription = $("#txtLinkDescription").val() 
         var linkURL = $("#txtLinkURL").val() 
         $.ajax({ 
          type: "GET", 
          url: "ajax_calls.php?function=updateLink&linkID=" + linkID + "&linkTitle=" + linkTitle + "&linkDescription=" + linkDescription + "&linkURL=" + linkURL, 
          dataType: "text", 
          error: function (request, status, error) { 
           alert("An error occured while trying to complete your request: " + error); 
          }, 
          success: function (msg) { 
           //success, do something 
          }, 
          complete: function() { 
           //do whatever you want 
          } 
         }); //end ajax 
         //close dialog 
         $(this).dialog('close'); 
        }, 
        Cancel: function() { 
         $(this).dialog('close'); 
        } 
       }, 
       close: function() { 
        $(this).dialog("destroy"); 
       } 
      }); //end .dialog() 

      $("#dialog-edit").show(); 
      $("#dialog-edit").dialog("open"); 

     }) //end edit click 

Answer 2

résolu en enroulant simplement chaque ligne de texte à partir du PHP en <span class="theseDetails">blahblah</span> et en utilisant $(".theseDetails").text(), .... solution très simple. :)