У меня есть форма, которая добавляет ссылки на базу данных, удаляет их и – вскоре – позволяет пользователю редактировать детали. Я использую jQuery и Ajax в основном для этого проекта и хотел бы сохранить все элементы управления на одной странице. Раньше, чтобы обрабатывать что-то вроде информации о другом веб-сайте (ссылку), я бы отправил пользователя на другую страницу PHP с полями форм, заполненными PHP из таблицы базы данных MySQL. Как это сделать с использованием модальной формы jQuery UI и вызывать детали отдельно для этой конкретной записи?
Вот что у меня есть,
<?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 }?> И вот jQuery, который я использую для удаления записей,
$(".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; });
Все работает отлично, просто нужно найти решение для редактирования. Благодаря!
* Обновлен, чтобы включить все поля, которые вы редактируете
Похоже, у вас есть правильная идея. Вероятно, вы захотите создать новый div на своей странице для редактирования модального диалога.
<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>
Когда пользователь нажимает кнопку редактирования, вы хотите заполнить скрытое поле и текстовое поле значениями ссылки, на которую они нажали, и затем включить диалог.
$('.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
Решено, просто обертывая каждую строку текста из PHP в <span class="theseDetails">blahblah</span> и используя $(".theseDetails").text() ; …. очень простое решение. 🙂