확실히 안간단합니다
본문
모달띄우고 거기서
ajax로 데이터 수정 또는 삭제했는데요.
변경된 내용이 반영된 상태를 보여주고 싶은데 어떻게 할 수 있을까요?
var idx = $("#btn_delete").val();
var mb_id = $(this).data("mb_id");
var wr_id = $(this).data("wr_id");
$.ajax({
type: "POST",
url:"../bigbra/modal_delete.php",
data: {
"sa_idx": idx,
"mb_id": mb_id,
"wr_id": wr_id
},
dataType : "text",
async: false,
cache: false,
success: function(data, textStatus) {
sql = data.sql;
document.getElementsByClassName("tablink1")[0].click();
}
여기서 뭔가를 해야 할 것 같은데요
});
페이지에서 모달 띄울때는
$(".modal_<?php echo $write['wr_id']?>").click(function () {
var num = $(this).data("num") ;
$("#show_modal_<?php echo $write['wr_id']?>").load("../bigbra/modal.php?mb_id=<?php echo $member['mb_id']?>&bo_table=<?php echo $bo_table?>&wr_id=<?php echo $wr_id?>&num="+num);
});
이런식으로 띄우면서 데이터를 모달안에 불러왔었습니다,
이제 모달안에서 해당 데이터를 수정 또는 삭제한 뒤에 그 결과가 반영된 상태의 내용을 보여주고자하는데
쉽지 않아보입니다, 방법이나 조언이 있을까요?
모달이 닫힌 다움에 다시 해당 모달을 띄우면 될거 같은데 그닥 좋은 방법은 아닌거 같구요 ㅎ
답변 2
다음을 참고하셔서 원하시는 형태로 로직을 구현하시면 어떨까 합니다.
$.ajax({
type: "POST",
url: "../bigbra/modal_delete.php",
data: {
"sa_idx": idx,
"mb_id": mb_id,
"wr_id": wr_id
},
dataType: "json", // 예상되는 반환 형식에 따라 변경할 수 있습니다.
success: function(response) {
if (response.success) {
// 성공적으로 수정 또는 삭제되었다면 모달 내용을 갱신합니다.
updateModalContent(response.data);
} else {
// 실패한 경우에 대한 처리
alert("수정 또는 삭제에 실패했습니다.");
}
},
error: function(xhr, textStatus, errorThrown) {
// AJAX 요청 실패 시에 대한 처리
console.error("AJAX 요청에 실패했습니다:", textStatus, errorThrown);
}
});
function updateModalContent(data) {
// 모달 내용을 갱신하는 로직을 작성합니다.
// 예를 들어, 모달 내용을 새로 불러오는 방법이나 수동으로 DOM을 수정하는 방법 등을 사용할 수 있습니다.
// data를 이용하여 모달의 내용을 업데이트합니다.
}
번번이 감사합니다, 현재 내용을 보여주는 <table></table>을 remove시키고 그자리에 새로운 내용을 불어오면 될거 같습니다, 표를 만들어놓고 데이터만 뿌려야 할건데 그게 핵갈리넹 ㅎ
다음과 같은 방법으로 하면 되지 않을까 생각합니다.
$.ajax({
type: "POST",
url: "../bigbra/modal_delete.php",
data: {
"sa_idx": idx,
"mb_id": mb_id,
"wr_id": wr_id
},
dataType: "json", // 예상되는 반환 형식에 따라 변경할 수 있습니다.
success: function(response) {
if (response.success) {
// 성공적으로 수정 또는 삭제되었다면 모달 내용을 업데이트합니다.
updateModalContent(response.data);
} else {
// 실패한 경우에 대한 처리
alert("수정 또는 삭제에 실패했습니다.");
}
},
error: function(xhr, textStatus, errorThrown) {
// AJAX 요청 실패 시에 대한 처리
console.error("AJAX 요청에 실패했습니다:", textStatus, errorThrown);
}
});
function updateModalContent(data) {
// 이전 테이블을 삭제합니다.
$("#tableContainer").empty();
// 새로운 데이터를 이용하여 테이블을 생성합니다.
var tableHtml = "<table>";
// 데이터를 반복하여 테이블에 추가합니다.
data.forEach(function(row) {
tableHtml += "<tr>";
tableHtml += "<td>" + row.column1 + "</td>"; // 예시: 데이터의 열(column)에 따라 변경해야 합니다.
tableHtml += "<td>" + row.column2 + "</td>"; // 예시: 데이터의 열(column)에 따라 변경해야 합니다.
// 필요한 만큼 열을 추가합니다.
tableHtml += "</tr>";
});
tableHtml += "</table>";
// 테이블을 새로운 데이터로 갱신합니다.
$("#tableContainer").html(tableHtml);
}
감사합니다,,거의 답이 나온거 같습니다,
스크립트안에 html로 어떻게 해야 하나 생각했었는데,,
