диалоговые работы Jqueryui только один раз

Question

у меня есть, как сценарий, как вы можете увидеть ниже:

<div id="divContentRating"> 
<div id="divAskForRating"> 
    Yeni tasarımımızı beğendiniz mi? 
    <br /> 
    <a id="likeIcon" href="javascript:void(0)"><img src="/Images/like.jpg"/></a> 
    <a id="neutralIcon" href="javascript:void(0)"><img src="/Images/neutral.jpg"/></a> 
    <a id="unlikeIcon" href="javascript:void(0)"><img src="/Images/unlike.jpg"/></a> 
</div> 
<div id="divPositiveRating"> 
    <div> 
     <img src="/Images/like.jpg"/> Yeni tasarımımızı beğendiniz. <br /> 
     <a href="javascript:void(0)" class="updateRate">Güncelle</a> 
    </div> 
</div> 
<div id="divNegativeRating"> 
    <div> 
     <img src="/Images/unlike.jpg"/> Yeni tasarımımızı beğenmediniz. <br /> 
     <a href="javascript:void(0)" class="updateRate">Güncelle</a> 
    </div> 
</div> 
<div id="divNeutralRating"> 
    <div> 
     <img src="/Images/neutral.jpg"/> Yeni tasarımımız hakkında görüşünüz yok. <br /> 
     <a href="javascript:void(0)" class="updateRate">Güncelle</a> 
    </div> 
</div> 
<div id="negativeRatingReasonDialog" style="display: none"> 
    <div> 
     Yeni tasarımımızı beğenmediniz.<br /> 
     <textarea id="Comment" rows="3"></textarea><br /> 
    </div> 
</div> 

<input type="hidden" id="HasRated" value="false"> 
<input type="hidden" id="Rate" value=""> 
<input type="hidden" id="ContentKey" value="LANDING_PAGE"> 
<input type="hidden" id="RatingId" value=""> 
<input type="hidden" id="ParticipantId" value=""> 

<script type="text/javascript"> 
$(document).ready(function() { 
    var protocol = location.protocol; 
    var host = window.location.host; 

    if ($("#HasRated").val() == "true") 
    { 
     var rate = $("#Rate").val(); 
     if (rate == 1) { 
      setPositiveRatedView(); 
     } 
     else if (rate == 0) { 
      setNeutralRatedView(); 
     } 
     else if (rate == -1) { 
      setNegativeRatedView(); 
     } 
     else { 
      setNotRatedView(); 
     } 
    } 
    else { 
     setNotRatedView(); 
    } 

    $("#likeIcon").click(function() { 
     setPositiveRatedView(); 
     ratePage(1, ""); 
    }); 

    $("#neutralIcon").click(function() { 
     setNeutralRatedView(); 
     ratePage(0, ""); 
    }); 

    $("#unlikeIcon").click(function() { 
     setNegativeRatedView(); 
     alert("hey"); 
     DisplayCommentPopup(); 
    }); 

    $(".updateRate").click(function() { 
     setNotRatedView(); 
    }); 

    function DisplayCommentPopup() 
    { 
     var dialogDiv = $("#negativeRatingReasonDialog"); 

     var _options = { 
      modal: true, 
      closeOnEscape: false, 
      width: 200, 
      height: 100, 
      close: function (ev, ui) 
      { 
       $(this).remove(); 
      }, 
      buttons: { 
       "Paylaş": function() { 
        var comment = $("#Comment").val(); 
        ratePage(-1, comment); 
        dialogDiv.dialog("close"); 
       }, 
       "Çıkış": function() { 
        ratePage(-1, ""); 
        dialogDiv.dialog("close"); 
       } 
      } 
     }; 

     dialogDiv.dialog(_options); 

     dialogDiv.dialog("open"); 
    } 

    function setNotRatedView() { 
     $("#divNeutralRating").fadeOut(); 
     $("#divPositiveRating").fadeOut(); 
     $("#divAskForRating").fadeIn(); 
     $("#divNegativeRating").fadeOut(); 
    } 

    function setPositiveRatedView() 
    { 
     $("#divNegativeRating").fadeOut(); 
     $("#divNeutralRating").fadeOut(); 
     $("#divAskForRating").fadeOut(); 
     $("#divPositiveRating").fadeIn(); 
    } 

    function setNegativeRatedView() { 
     $("#divNeutralRating").fadeOut(); 
     $("#divPositiveRating").fadeOut(); 
     $("#divAskForRating").fadeOut(); 
     $("#divNegativeRating").fadeIn(); 
    } 

    function setNeutralRatedView() { 
     $("#divNegativeRating").fadeOut(); 
     $("#divPositiveRating").fadeOut(); 
     $("#divAskForRating").fadeOut(); 
     $("#divNeutralRating").fadeIn(); 
    } 

    function ratePage(rating, comment) 
    { 
     var contentKey = $("#ContentKey").val(); 
     var hasRated = $("#HasRated").val(); 
     var ratingId = $("#RatingId").val(); 
     var participantId = $("#ParticipantId").val(); 

     var url = 
      protocol + '//' + host + '/ContentRating.aspx?contentKey=' + contentKey + '&rating=' + rating + '&ratingUpdate=' + hasRated + 
      '&ratingId=' + ratingId + '&participantId=' + participantId + '&comment=' + comment; 

     $.ajax({ 
      url: url, 
      dataType: 'json', 
      type: 'POST', 
      cache: false, 
      success: function(data) { 
       $("#HasRated").val(data.HasRated); 
       $("#Rate").val(data.Rate); 
       $("#ContentKey").val(data.ContentKey); 
       $("#RatingId").val(data.RatingId); 
       $("#ParticipantId").val(data.ParticipantId); 
       $("#Comment").val(data.Comment); 
       alert('HasRated: ' + data.HasRated + ' Rate: ' + data.Rate + ' ContentKey: ' + data.ContentKey + ' RatingId: ' + data.RatingId + ' ParticipantId: ' + data.ParticipantId + ' Comment: ' + data.Comment) 
      }, 
      error: function(data) { 
       alert('ERROR: ' + data); 
      } 
     }); 
    } 
}); 

диалог, который я открываю в DisplayCommentPopup метода появляется только один раз. Для второй попытки это не сработает. Как я могу найти проблему? У вас есть идеи?

Спасибо заранее,

Answer 1

При закрытии вы удалите его, чтобы он не может дисплей:

close: function (ev, ui) { 
      $(this).remove(); 
     }, 

Как и в сторону, я бы переработать диалоговым кодом, чтобы быть:

var dialogDiv = $("#negativeRatingReasonDialog"); 
var _options = { 
    modal: true, 
    closeOnEscape: false, 
    autoOpen:false, 
    width: 300, 
    height: 300, 
    close: function (ev, ui) { 
     // $(this).remove(); 
    }, 
    buttons: { 
     "Paylaş": function() { 
      var comment = $("#Comment").val(); 
      ratePage(-1, comment); 
      dialogDiv.dialog("close"); 
     }, 
      "Çıkış": function() { 
      ratePage(-1, ""); 
      dialogDiv.dialog("close"); 
     } 
    } 
}; 

dialogDiv.dialog(_options); 

function DisplayCommentPopup() { 
    dialogDiv.dialog("open"); 
} 

Таким образом, он только получает «диалог» один раз, а затем вы можете открыть его по мере необходимости: обратите внимание на добавленную опцию autoOpen:false,.