아약스 팝업 DIV 양식을 먼저 JSP 페이지에서 여러 번

Question

를 제출한다

Main.jsp

<div id="backgroundPopup"></div> 
<div class="sharePost"> 
</div> 

<s:iterator var="msge" value="messageList"> 
    <div class="message" id="<s:property value="messageid"/>_<s:property value="ReceivedById"/>"> 
     <s:property value="messageid"/> 
<span class="share"> 
      <a href="#" id="sharethis" title="share this">Share</a> 
</span> 
<span class="sharecount"> 
      <s:if test="%{totalShare>0}"> 
      <s:property value="totalShare"/> 
      </s:if> 
    </span> 
</div> 
</s:iterate> 
<script> 

     event.preventDefault(); 
     var msgid=$(this).parents('.message').attr('id'); 
     var msgid1=msgid.substring(0,msgid.lastIndexOf('_')); 
     var receiverid= msgid.substring(msgid.lastIndexOf('_')+1); 

     var dataString = 'messageid='+ msgid1+'&receivedById='+receiverid; 
     alert(dataString); 
     if($('#'+msgid+' .sharecount').html("")) 
     { 
      $('#'+msgid+' .sharecount').html("0"); 
     } 
     $shareNo= parseInt($('#'+msgid+' .sharecount').html(), 10); 
     $shareNo++; 
     $('#'+msgid+' .sharecount').html(""+$shareNo); 
     $.ajax({ 
      type: "POST", 
      url: "fetchSharePage", 
      dataType: "text html", 
      data: dataString, 
      success: function(data) { 
       $("#backgroundPopup").css("opacity", "0.7"); 
       $("#backgroundPopup").fadeIn(0001); 
       $(".sharePost").html(data); 
       } 
     }); 

    }); 

</script> 

이 내가 공유 페이지 containig 메시지 세부 정보를 가져 오기 할 첫 JSP 페이지입니다. 이 페이지는 shareIt.jsp의 메시지 세부 정보를 올바르게 가져옵니다. shareIt은 팝업 div입니다. 여기에 사용

shareIt.jsp

<div class="share-data"> 
    <h1>Share this to your profile 
    </h1> 

    <div id="messages_and_pages"> 
     <div id="messages" class="messages"> 
      <s:iterator var="msge" value="messageList"> 
       <div class="message" id="<s:property value="messageid"/>"> 
        <s:property value="messageid"/> 
       </div> 
      <input type="hidden" value="<s:property value="messageid"/>" 
        id="message-id"> 
      <input type="hidden" value="<s:property value="sentBy"/>" 
        id="sent-by"> 
      <input type="hidden" value="<s:property value="authorId"/>" 
        id="author"> 
      </s:iterate> 
<div class="action-set"> 
     <input id="share-ok" type="submit" value="Share"> 
     <input id="share-cancle" type="button" value="Cancel"> 
</div> 

<script> 

     $(document).on('click', '#share-ok', function(event){ 

      var msgid=$("#message-id").val(); 
      var author=$("#author").val(); 
      var shareString = 'messageid='+ msgid+ '&authorId='+author; 

      event.preventDefault(); 
      alert(shareString); 

      $.ajax({ 
       type: "POST", 
       url: "shareThisMessage", 
       dataType: "text html", 
       data: shareString, 
       success: function(data) { 
        $(".sharePost").html(data); 
        $(".share-data").hide(1000); 
        $(".sharePost").html(""); 

       } 
      }); 
     }); 
     $(document).on('click', '#share-cancle', function(event){ 
      hidePopup(); 
     }); 
     function hidePopup() { 
      $("#backgroundPopup").fadeOut("normal"); 
      $(".share-data").hide(); 
      $(".sharePost").html(""); 
     } 
     $(this).keyup(function(event) { 
      if (event.which == 27) { 
       hidePopup(); 
      } 
     }); 

    </script> 

CSS는

.share-data{ 
    border: 1px solid #c6c6c6; 
    background-color: white; 
    margin-bottom: 6px; 
    margin-top: 6px; 
    position: fixed; 
    z-index: 5; 
    top: 50%; 
    left: 50%; 
    width:600px; 
    background:#6b6a63; 
    margin-left: -304px; 
    margin-top: -280px; 
} 
#backgroundPopup { 
    z-index:4; 
    position: fixed; 
    display:none; 
    height:100%; 
    width:100%; 
    background:#000000; 
    top:0px; 
    left:0px; 
} 

코드가 제대로 작동합니다. 이 3 회 다음

를 제출한다

1 시간 양식 나는 또 다른 메시지를 클릭하면 다음 1 시간

를 제출한다 공유 buttom의 버튼을 공유 클릭하는 동안 문제는 내가 다른 메시지를 클릭하면 버튼을 공유하다 의 7 번을 제출하고 있습니다.

여러 번 제출하는 이유가 표시되지 않습니다. 난 당신이 shareit.jsp라고했습니다 때마다 한 번, 당신의 CSTE 연구진은 여러 번 호출되는 의심

$(document).off('click', '#share-ok'); 
$(document).on('click', '#share-ok', function(event){ .... 

에 전에 해제 호출

Answer 1

봅니다 호출합니다.

몇 가지 다른 문제가 있습니다. shareit.jsp의 iterator가 하나의 항목 이상을 반환한다고 가정하면 message-id, sent-by 및 author와 같은 id를 가진 다중 태그를 생성하게됩니다. ID는 고유해야합니다.

<s:property value="messageid"/> shareit.jsp에서 <div>이 있는데 이는 </div>이되어야한다고 생각합니다. 또한이 두 태그를 닫는 위치는 어디에도 표시되지 않습니다. <div id="messages_and_pages"> 및 <div id="messages" class="messages">.