코딩해징징징징
72
2016-09-29 21:06:56
5
3248

모달창 띄우기 질문입니다!


리스트를 클릭하면 각 리스트에 들어있는 데이터의 모달창이 나와야 하는데 두번째 리스트를 클릭하면

아무런 반응이 없습니다ㅠㅠ 대체 왜 이럴까요ㅠㅠㅠ


<div class="roomrang_cardall_div_dh">

    <article id="popbutton" data-roomno="<%=article.getRoom_no()%>">

      <img src="./assets/images/picture1.jpg" class="roomrang_card_img_dh">

      <div class="roomrang_card_text_mar_dh">

        <img src="./assets/images/월세.jpg"/>

        <text class="roomrang_montly_textsize_dh roomrang_modal_content_margin_dh" name="room_roomtype_money">1000/60

          <text class="roomrang_montly_textsize_dh" name="room_floor"><%=article.getRoom_floor()%>/<%=article.getRoom_building_floor() %>층</text>

        </text>

      </div>

      <text class="roomrang_textcenter_title_target" name="roomrang_card_add"><%=article.getRoom_title()%></text>

      <p class="roomrang_textcenter_content_target" name="roomrang_main_content1"><%=article.getRoom_content()%></p>

    </article>

  </div>

</div>


<div id="pocket"></div>


<%}} }%>

<div>

      <a href="roomsubmit.jsp">

        <button type="button" id="btn_room_write" class="btn btn-primary user_roomwrite_sub_btn_dh">방 등록</button>

      </a>

    </div>

    

<script>

$(document).ready(function(){

$('#popbutton').click(function(){ /*popupbutton이라고 id가 지정된 애를 클릭하면*/

console.log('안녕');

// 1. fetch modal.inc.html

$('#pocket').load('roomContents2.jsp', { /*포켓안에 */

room_no: $(this).data('roomno') /*pocket안에 text가 보인다.*/

}, function(){

$('#roomrang_modal1').modal('show'); 

});

});

});

</script>

여기까지가 리스트들과 모달창을 클릭하면 동작하는 스크립트입니다


<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="roomrang_modal1" role="dialog" tabindex="-1">

     <div class="modal-dialog roomrangmodal-dialog_dh">

         <div class="modal-content">

           <div class="modal-header room_modal-header">

           <button type="button" class="close" data-dismiss="modal">x</button>

             <p class="room_infotitle_modal-title_dahee">

             <%=article.getRoom_no() %>

         <%=article.getRoom_title() %> <!-- 여기부터 디비가 안먹히는듯.. -->

       </p>

             <p class="room_info_modal_title2_dh">1000/6

               <text name="room_roomtype roomrang_modal_content_margin_dh"><%=article.getRoom_type() %></text>

               <text name="room_thisroom_number roomrang_modal_content_margin_dh">쓰리룸</text>

               <text name="room_floor"><%=article.getRoom_floor() %>/<%=article.getRoom_building_floor() %>층</p>

           </div> 

           <div class="modal_body room_modal-body">

             <p class="room_info_modal_dahee">*매물정보*</p>

             <p class="room_info_modal_dahee roomrang_modal_content_margin_dh">관리비

               <text name="room_cost" class="roomrang_modal_content_margins_dh">3만원</text>

               <text>전용면적</text>

               <text name="room_extent" class="roomrang_modal_content_margins_dh"><%=article.getRoom_extent() %></text>

               <text class="roomrang_modal_content_margin_dh">입주가능일</text>

               <text name="room_due_date">날짜협의</text>

             </p>

             <p class="room_info_modal_dahee roomrang_modal_info2_dh roomrang_modal_content_margin_dh">주차여부

               <text name="room_park_check" class="roomrang_modal_content_marginsd_dh"><%=article.getRoom_park_check() %></text>

                 <text>반려동물</text>

                   <text name="room_pet"><%=article.getMatching_pet() %></text>

             </p>

             <hr class="room_line">

             <div id="myCarousel" class="carousel slide roomrang_carousel_boxsize_dh" data-ride="carousel">

               <!-- Indicators -->

               <ol class="carousel-indicators">

                 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

                 <li data-target="#myCarousel" data-slide-to="1"></li>

                 <li data-target="#myCarousel" data-slide-to="2"></li>

                 <li data-target="#myCarousel" data-slide-to="3"></li>

               </ol>


               <!-- Wrapper for slides -->

               <div class="carousel-inner" role="listbox">

                 <div class="item active roomrang_carousel_img_size_dh">

                   <img src="./assets/images/roomimage.png" alt="방 이미지" name="roomrnag_room_img1">

                   <div class="carousel-caption">

                   </div>

                 </div>


                 <div class="item roomrang_carousel_img_size_dh">

                   <img src="./assets/images/room.jpg" alt="방 이미지" name="roomrnag_room_img2">

                   <div class="carousel-caption">

                   </div>

                 </div>


                 <div class="item roomrang_carousel_img_size_dh">

                   <img src="./assets/images/roomimage.png" alt="방 이미지" name="roomrnag_room_img3">

                   <div class="carousel-caption">

                   </div>

                 </div>

                 <div class="item roomrang_carousel_img_size_dh">

                   <img src="./assets/images/room.jpg" alt="방 이미지" name="roomrnag_room_img4">

                   <div class="carousel-caption">

                   </div>

                 </div>

               </div>


               <!-- Left and right controls -->

               <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">

                 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

                 <span class="sr-only">Previous</span>

               </a>

               <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

                 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

                 <span class="sr-only">Next</span>

               </a>

             </div>

             

             <div class="room_modal_text_radius">

               <p class="roomrang_textcenter_content_target_modal" ><%=article.getRoom_content() %></p>

             </div>

             <div class="roomrang_modal_agent_info_dh">

               <img class="roomrang_profile_img" src="./assets/images/이수만.jpg"/>

               <p class="room_profile_intro room_profile_intro_office" ><%=article.getAgent_office_name() %></p>

               <p class="room_profile_intro" ><%=article.getAgent_boss() %></p>

               <p class="room_profile_intro" ><%=article.getAgent_tel() %></p>

               <img src="./assets/images/askbtn.png" class="user_matchingCon_btn">

               <button class="btn btn-primary" onclick="document.location.href='updatemodule.jsp?room_no=<%=article.getRoom_no()%>'">글 수정</button>

               <button class="btn btn-primary" onclick="document.location.href='roomdeletePro.jsp?room_no=<%=article.getRoom_no()%>'">글 삭제</button>

             </div>

           </div>

         </div>

     </div>

    </div>


여기가 모달로 뜨는 부분입니다ㅠㅠㅠㅠ대체 왜 하나밖에 안눌릴까요ㅠㅠㅠㅠ

0
0
  • 답변 5

  • 단설
    622
    2016-09-29 21:15:42


        <article id="popbutton" data-roomno="<%=article.getRoom_no()%>">
    
          <img src="./assets/images/picture1.jpg" class="roomrang_card_img_dh">
    
          <div class="roomrang_card_text_mar_dh">
    
            <img src="./assets/images/월세.jpg"/>
    
            <text class="roomrang_montly_textsize_dh roomrang_modal_content_margin_dh" name="room_roomtype_money">1000/60
    
              <text class="roomrang_montly_textsize_dh" name="room_floor"><%=article.getRoom_floor()%>/<%=article.getRoom_building_floor() %>층</text>
    
            </text>
    
          </div>
    
          <text class="roomrang_textcenter_title_target" name="roomrang_card_add"><%=article.getRoom_title()%></text>
    
          <p class="roomrang_textcenter_content_target" name="roomrang_main_content1"><%=article.getRoom_content()%></p>
    
        </article>

    혹시 지금 이 부분이 여러개 생성되는 상황인가요?



    3
  • 코딩해징징징징
    72
    2016-09-29 21:20:19

    그 부분은 지금 캡쳐화면으로 떠있는 상황입니다!

    첫번째 

    이 리스트는 모달창이 뜨는데 그 뒤에있는 리스트는 아무런 반응이 없습니다ㅠㅠㅠㅠㅠ

    0
  • 단설
    622
    2016-09-29 21:21:20

    그러니까 저 부분이 여러 개 생성되고, 첫번째 것은 정상적으로 되는데 두번째부터 반응이 안 되는건 아마 id를 써서 그럴겁니다.

    html 제원상 id는 한 객체만 가질 수 있거든요. class로 바꿔서 하도록 해보세요.

    3
  • 코딩해징징징징
    72
    2016-09-29 21:22:49

    헐 대박ㅠㅠㅠㅠㅠㅠㅠ진짜 감사합니다ㅠㅠㅠㅠㅠ바로 됐어요ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ엉엉

    정말감사합니다ㅠㅠㅠ최고최고 짱이에요ㅠㅠㅠㅠ코딩고수님ㅠㅠ

    0
  • 미오리
    94
    2016-10-12 19:17:42

    잘 모르겠네요 화이팅하세요(아니)

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.