수정버튼만 만들면 된다

◆ 현재

>오류1 : 수정버튼 기능 구현하기

성공

---

◆ 시도

◆ card.js에서 선택 회원정보를 디폴트로 addcard.html을 불러오기

                    $(document).on("click", "button[name='delete']", async function () {
                        //'members'에서 회원 ID 가져오기
                        // Firestore의 "members" 컬렉션에서 모든 문서를 가져옵니다.
                        const membersSnapshot = await getDocs(collection(db, "members"));                    
                        // 가져온 문서 각각에 대해 ID와 데이터를 콘솔에 출력하고 일치하는 문서를 삭제합니다.
                        membersSnapshot.forEach(async (doc) => {
                            const row = doc.data(); //'row'가 해당 문서의 id
                            const name = row['name'];                    
                            // name 필드가 data.name과 일치하는 경우
                            if (name === data.name) {
                                localStorage.setItem('selectedMemberId', row);// localStorage에 회원 ID 저장
                                // addcard.html이 상위 폴더에 있을 때 경로 지정
                                window.location.href = '../addcard.html';
                            }else{
                                alert("수정페이지로 이동 실패")
                            }
                        });
                    })

 

오류발생 : 'revise'버튼이 기능을 안됨.

Uncaught TypeError: reviseBtn is not a function
    at HTMLButtonElement.onclick (index.html:1:1)
onclick @ index.html:1Understand this errorAI

 

... 오타수정. (함수에 이름 'riviseBtn'으로 수정)

 

페이지 이동은 하는데 빈칸으로 이동됨

아... 데이터 반영하는걸 빼먹음

◆ 선택한 회원정보 디폴트값으로 받아오기

다른 js파일에서 변수 가져오기

 

//cardModal.js

                    $(document).on("click", "button[name='reviseBtn']", async function () {
                        //'members'에서 회원 ID 가져오기
                        // Firestore의 "members" 컬렉션에서 모든 문서를 가져옵니다.
                        const membersSnapshot = await getDocs(collection(db, "members"));                    
                        // 가져온 문서 각각에 대해 ID와 데이터를 콘솔에 출력하고 일치하는 문서를 삭제합니다.
                        membersSnapshot.forEach(async (doc) => {
                            const row = doc.data(); //'row'가 해당 문서의 id
                            const name = row['name'];                    
                            // name 필드가 data.name과 일치하는 경우
                            if (name === data.name) {
                                localStorage.setItem('selectedMemberName', row.name);// localStorage에 회원 ID 저장
                                // addcard.html이 상위 폴더에 있을 때 경로 지정
                                window.location.href = `../addcard.html?name=${encodeURIComponent(selectedMemberName)}`;
                                 // 이름을 URL 파라미터로 전달;
                            }else{
                                console.log("이름 다름")
                            }
                        });
                    })

/////////////////////////////////////////////////////////////////
// addcard.js
// 모달 수정했습니다
const nameParam = getQueryParam('selectedMemberName');
let documentId = null; // Firebase 문서ID

// 파라미터 name 값이 존재할 경우, 해당 값으로 데이터 가져오기
if (nameParam) {

 

오류발생

cardmodal.js:209 Uncaught (in promise) ReferenceError: selectedMemberName is not defined
    at cardmodal.js:209:99
    at index.esm2017.js:20411:52
    at index.esm2017.js:14944:33
    at Bi.inorderTraversal (index.esm2017.js:2512:87)
    at Pi.inorderTraversal (index.esm2017.js:2419:14)
    at Nd.forEach (index.esm2017.js:14944:9)
    at np.forEach (index.esm2017.js:20411:35)
    at HTMLButtonElement.<anonymous> (cardmodal.js:202:41)

 

아 바보.. 이름을 그대로 보내면 되잖아. id 필요없어...

◆ 다른 .js 파일로 이름 보내기 - URL 형태로 보내

//modal.js
// 수정 버튼 클릭 이벤트
$modalModi.click(function () {
    localStorage.setItem('name', $modalName.text()); //.js
    window.location.href = `addcard.html?name=${$modalName.text()}`;
});

////////////////////////
// addCard.ks
// url에서 name 파라미터 가져오기
function getQueryParam(param) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(param);
}

const nameParam = getQueryParam('name');
let documentId = null; // Firebase 문서ID

// 파라미터 name 값이 존재할 경우 해당 값으로 데이터 가져오기
if (nameParam) {
    $(document).ready(async function () { ...

됨. 성공

---

◆ 기억할 것

◆ window.location.href 속성을 이용해 새로운 URL로 이동하기

데이터를 페이지 간에 URL 쿼리 파라미터로 전달하는 방식입니다.

window.location.href = addcard.html?name=${$modalName.text()}; // .js

◆ 로컬 스토리지에 데이터를 저장하기

$modalName.text() 값이 name이라는 키로 로컬 스토리지에 저장됩니다.

이후에 다른 페이지에서 이 값을 불러오려면 localStorage.getItem('name')을 사용하면 됩니다.

localStorage.setItem('name', $modalName.text()); //.js

 

◆다른 페이지에서 회원정보 수정하기

https://fkkmemi.github.io/ff/ff-022/#%ED%94%84%EB%A1%9C%ED%95%84%EC%88%98%EC%A0%95

 

오늘 중요한 것을 정리하면서 기억할 필요가 있는 것 1~2가지

 

삭제, 수정버튼을 만든다고 시간이 오래 걸렸는데 해내서 기분이 좋습니다.

 

// 데이터를 페이지 간에 URL 쿼리 파라미터로 전달하기
window.location.href = addcard.html?name=${$modalName.text()};

// 로컬 스토리지에 데이터를 저장하기
localStorage.setItem('name', $modalName.text());

// 다른 페이지에서 로컬스토리지에 저장된 값을 불러오기
localStorage.getItem('name')