PHP, jQuery kullanarak modal formu doldurma alanlar

2 Cevap php

- Yakında - Ben, bir veritabanına bağlantılar ekler onları siler bir form var, ve kullanıcı bilgilerini düzenlemek için izin verir. Ben bu proje üzerinde yoğun jQuery ve Ajax kullanıyorum ve aynı sayfadaki tüm kontrol altında tutmak istiyorum. Geçmişte, başka bir web sitesinde (link giriş) hakkında ayrıntılar gibi bir şey düzenleme işlemek için, ben bir MySQL veritabanı tablosundan PHP ile doldurulan form alanları ile başka bir PHP sayfaya kullanıcıyı göndermiş olurdu. Bunu nasıl bir jQuery UI kalıcı formunu kullanarak ve söz konusu giriş için ayrı ayrı detayları arayarak başarırız?

İşte ne var bugüne kadar-

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

Ve burada ben silmek için kullanıyorum jQuery girişleri-

$(".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;
});

Her şey gayet güzel çalışıyor, sadece düzenlemek için bir çözüm bulmak gerekiyor. Teşekkürler!

2 Cevap

* Updated to include all of the fields you are editing

Eğer doğru fikri var gibi geliyor. Muhtemelen düzenleme kalıcı bir iletişim için sayfa üzerinde yeni bir div oluşturmak isterim.

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

Kullanıcı düzenle düğmesini tıkladığında onlar tıkladım bağlantı değerleri ile gizli bir alan ve metin kutusunu doldurmak ve sonra iletişim kutusunu açmak isteyeceksiniz.

$('.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

.... Çözümü çok basit; sadece <span class="theseDetails">blahblah</span> olarak PHP metnin her satırı sarma ve $(".theseDetails").text() ile çözüldü. :)

etiketler