|
:: 게시판
:: 이전 게시판
|
- PGR21 관련된 질문 및 건의는 [건의 게시판]을 이용바랍니다.
- (2013년 3월 이전) 오래된 질문글은 [이전 질문 게시판]에 있습니다. 통합 규정을 준수해 주십시오. (2015.12.25.)
통합규정 1.3 이용안내 인용"Pgr은 '명문화된 삭제규정'이 반드시 필요하지 않은 분을 환영합니다.법 없이도 사는 사람, 남에게 상처를 주지 않으면서 같이 이야기 나눌 수 있는 분이면 좋겠습니다."
17/05/25 03:27
현재 submit2() 코드에서 alert(data)는 잘 나오는데 그 다음 코드가 작동 안된다는 말씀이시죠?
제가 자바는 몰라서 ㅠㅠ 도움이 못 되어드릴 것 같은데.. alert(data)는 잘 뜨는데 그 다음 코드가 안되는건 좀 이상하네요.. 혹시 data포멧이 html elements가 아닌가요?
17/05/25 09:16
alert값을 보니 해당 페이지 전체를 data로 가져와서 넣는거라 html elements맞는걸로 알고 있습니다 ㅠ
17/05/25 10:04
저 .html(data) 코드 바로 밑줄에 Console.log($('#search')) 하셨을 경우 뭐라고 뜨나요? Scope문젠가 싶기도 해서..
일단 소스보기로 <div id=search></div>부분에 데이터가 들어갔는지 확인해보세요!
17/05/25 11:38
콘솔에쳐보면 [div#search]만 나오네요 ㅠ 소스보기해도 <div id="search"></div> 이값만 나와있고 새로 들어가야하는 div내용이 들어가있지가 않네요.
17/05/25 11:48
해당 요소에 data가 들어가는지 확인해 보기 위해 $("#search").html(data); 이후에 console.log($('#search').html());를 넣어 보고 실행해보세요.
혹시 res_start.jsp에서 출력되는 내용 즉 data 매개변수 값을 알려주실 수 있나요? 저도 URL 주시면 한 번 살펴보겠습니다. ^^;
17/05/25 11:55
form태그를 제거해주세요. form 태그때문에 submit시에 페이지가 새로고침되서 안된것처럼 느껴진겁니다.
button에 type=submit도 제거해주시구용. 추가적으로 res_start 파일의 메타태그나 css,js 파일까지 다 가져오는건 비효율적인것 같네요.
17/05/25 13:52
이미 류크님께서 잘 살펴주셔서 다 해결이 되었네요. 그렇지만서도 개인적인 의견 몇 가지 적습니다.
- 개인적으로 (폼 컨트롤 + HTTP 요청)의 경우에는 <form> 요소로 묶어주는 게 더욱 의미에 맞는 게 아닌가 하고 생각하고 있습니다. (스크린 리더도 살펴보긴 해야겠지만 제 기억으로는 <form> 요소를 읽어주지는 않는 것으로 기억해서 굳이 스크린 리더 사용자를 위해서 <form> 요소를 읽히기 위해 <form> 요소를 사용해야 하는 이유는 따로 없을 것 같긴 합니다. 근데 <label> 요소와 폼 컨트롤을 매칭시켜 읽어주는 부분은 <form> 요소에 포함되지 않으면 안 읽어줄 수도 있을까 하네요. 이러한 고려점들이 있을법 할 것 같기도 한데 정확히는 테스트를 해봐야겠습니다.) - 따라서 <form> 요소를 사용한다면 <form> 요소의 submit 이벤트 발생시 해당 submit 이벤트 핸들러에서 event.preventDefault();를 사용해 새로고침을 막아주는 트릭이 필요할 겁니다. - 이벤트 핸들러 연결시 jQuery를 이용하실테니 event.preventDefault();도 괜찮고 마지막에 return false;를 사용하시는 것 또한 괜찮습니다. (그게 아니면 고려해야할 점이 있습니다.) - 다만 <input type="submit"> 이냐 <button type="submit"> 이냐는 좀 갈릴 텐데 (<button type="button">은 의미적으로 덜 구체적이어서 아쉽다고 보았고 엔터 동작을 잡아서 해당 버튼과 연결 시켜주지 않기 때문에 일단 패스 했습니다.) <button> 요소에는 내용 입력(<button>내용</button>)이 가능하다는 점을 활용할 부분은 아니기도 하고 일부 구형 웹 브라우저에서 <button type="submit">의 동작에 문제가 있다는 점에서 저는 <input type="submit>을 추천하고 싶습니다. - 한 가지 추가로 참고할 것은 <form> 요소 없이 <input type="submit> 혹은 <button type="submit>을 사용하면 일부 웹 브라우저들에서는 폼 컨트롤에서 사용자가 엔터시 이에 반응하여 해당 버튼이 클릭되지만 일부 웹 브라우저에서는 반응하지 않아 크로스 브라우징이 안 되는 상황이 발생할 수도 있습니다. (대부분의 최신 웹 브라우저는 엔터에 반응하지 않습니다.) (어차피 그렇게 처리한다면 반응하지 않는 웹 브라우저를 고려하여 사용자의 원활한 브라우징을 위해 직접 엔터키 입력시 폼이 전송되도록 스크립트를 짜는 게 좋을 것이긴 하지만요.) - 음.. 그리고 제가 알기로 <button> 요소의 type 속성의 기본값은 submit이고 <button>과 <button type="submit">은 동일한 것으로 알고 있는데.. 류크님께서 따로 제거를 추천 하셔서 잘못알고 있나 싶습니다. 혹 다른 점이 있는지 궁금하네요. - 앗 <form> 요소의 한 가지 더 좋은 점은 비JavaScript 사용자들을 위해서도 간단하게 폼 전송이 작동하게 할 수 있다는 점이 있겠네요. (다만 요즘에 JavaScript를 사용하지 않는 환경은 현실적으로 거의 고려 대상이 아니긴 하지만요.) 정리하자면 ----- HTML ----- <form> <폼 컨트롤> <폼 컨트롤2> ... <input type="submit"> </form> ----- JS ----- <form> 요소 submit 이벤트 핸들러 (event) { event.preventDefault(); Ajax 요청 } 저도 공부하는 게 중구난방이라서 많이 까먹었을 것이고 그래서 틀린 게 많을 수 있으니 참고만 하시고 확실히 인터넷 찾아보시고 잘 마크업 하시길 바라겠습니다. ^^; ----------------------------------- 혹시나 해서 추가로 좀 더 구체적으로 보강할 부분을 적어봅니다. - 엔터를 누를시 폼 전송 동작을 하는 폼 컨트롤이 무엇이냐는 웹 브라우저마다 다릅니다. (더 구체적으로는 적지 않을게요.) - <input type="text"> 혹은 <input type="password"> 요소가 1개 있고 해당 요소에서 엔터를 누르는 경우 <input type="submit"> 혹은 <button type="submit"> 요소가 없어도 폼 전송이 됩니다. - <form> 요소로 감싸지지 않은 경우 IE 11 버전 미만에서 <input type="text"> 혹은 <input type="password"> 요소에서 엔터를 누르면 <input type="submit"> 혹은 <button type="submit"> 요소가 클릭되는데 (앞서 말한 크로스 브라우징 문제) 이 때 가장 처음에 있는 요소만 클릭됩니다.
17/05/25 14:01
정성이 느껴지는 댓글 감사합니다!!!! 필요한 부분만 찾아서 주먹구구식으로 넣다보니 소스가 엉키고 제가 원하는 결과를 실행하려는데 머리속에서 로직이 많이 엉키네요 ㅠㅠ. 과제가 간단한 호텔예약만드는거라 우선 급한불부터끄고 프로젝트에는 처음부터 완성도있는 소스를 보고 구조를 참고해야할거같네요!
17/05/25 14:08
사실 <form> 요소를 사용하지 않고 예를 들어 <button type="button">으로만 처리 한다던가(<button>이나 <button type="submit>은 앞서 말한 것처럼 크로스 브라우징 문제가 있어서..) 식으로도 많이 Ajax 버튼을 처리 합니다. 저는 추천하지는 않습니다만 뭐 저 또한 나중에 생각이 바뀔 수 있는 것이니깐요. 프론트 엔드에서 폼 하나 짜는데도 고려할 거 다 고려하자면 족히 수백 가지는 나올 겁니다. 크크 하지만 암만 다 알고 있어도 시간 앞에 장사 없죠. 프로젝트하실 때도 조금씩 검색하셔서 보완하시면서 하시면 훌륭한 프로젝트가 될 거에요. 과제 잘 끝내시길 바라겠습니다. ^^;
|
||||||||||