кнопка отправки не работает в диалоговом окне

Question

Я загружаю отдельный JSP, используя jquery в диалоговом окне. В диалоговом окне есть кнопка submit. Я хочу сделать ajax-вызов при нажатии submit. Я включаю submit.click в функцию обратного вызова диалогового окна, но он не работает. Вот пошаговый код.

Первый Jquery код для загрузки JSP:

function openRatingDialog() { 
var rateDialog = $('<div id="ratingloaderDiv"></div>') 
.load("ratingDialog.jsp").dialog({ 
    autoOpen: true, 
    minHeight:275, 
     width: 400, 
     height: 350, 
    open: function(event, ui) { 
     $(".rateCls").rating(); 
     $("#showDialogMessage").hide(); 
     $('#reviewArea').val(''); 
     $('#source').attr('checked', false); 
     $('#destination').attr('checked', false); 
     $("#submit").click(function(e) { 
      $("#showDialogMessage").hide(); 
      var index = sessionStorage.getItem("history_index"); 
      alert(index); 
      alert('submit clicked'); 
      alert(this.id); 
      var rating = jQuery('#starVin .star:checked').val(); 
      var review = $("#reviewArea").val(); 
      var ratingDetails; 
      if($('#source').is(":checked")&& $('#destination').is(":checked")) { 
       ratingDetails = "overallRating"; 
      } 
      else if ($('#source').is(":checked")) 
      { 
       ratingDetails = $("#source").val(); 
      } 
      else if ($('#destination').is(":checked")) 
      { 
       ratingDetails = $("#destination").val(); 
      } 
      else 
      { 
       ratingDetails = "vendorRating"; 
      } 
       var xmlhttp; 
       $("#submit").prop('disabled',true); 
        var url="rate?index="+index+"&rating="+rating+"&review="+review+"&ratingDetails="+ratingDetails; 
        if (window.XMLHttpRequest) 
        { 
         xmlhttp=new XMLHttpRequest(); 
        } 
        else 
        { 
         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
        } 
        xmlhttp.onreadystatechange=function() 
        { 

         if (xmlhttp.readyState==4 && xmlhttp.status==200) 
         { 
          document.getElementById("showDialogMessage").innerHTML=xmlhttp.responseText; 
          $("#showDialogMessage").show(); 
          $("#submit").removeAttr('disabled'); 
          if ($("#showDialogMessage:contains('Thanks')").length > 0) { 
           $("#"+index).hide(); 
           $("#msg"+index).show(); 
          } 
         } 
        } 

        xmlhttp.open("POST", url, true); 
        xmlhttp.send(); 
      }); 

     } 
    }); 
    } 
    $(document).ready(function() { 
$(".rate").on("click", function() { 
    // Display the dialog 
    var index = this.id; 
    sessionStorage.setItem("history_index", index); 
    openRatingDialog(); 
    }); 
}); 

Вот ratingdialog.jsp, который загружается в диалоговом окне

<form id="rateDialog" class="rateDialog" style="height:250px;width:500px;" title="Rating"> 
     <div id="showDialogMessage"></div> 
     <p style="font-size:15px;color:black;margin:5px 0px 0px 10px;"><label>Rate your overall satisfaction:</label></p> 
     <div id="starVin" style="display:block;"> 
     <input id="rateStars" type="radio" value="1" class="rateCls star"/> 
     <input id="rateStars" type="radio" value="2" class="rateCls star" /> 
     <input id="rateStars" type="radio" value="3" class="rateCls star"/> 
     <input id="rateStars" type="radio" value="4" class="rateCls star"/> 
     <input id="rateStars" type="radio" value="5" class="rateCls star"/> 
     </div> 
     <br/> 
     <p style="font-size:15px;color:black;margin:5px 0px 0px 10px;"><label>Please provide your review: </label></p> 
     <textarea id="reviewArea" name="reviewArea" rows="5"></textarea> 
     <p style="font-size:15px;color:black;margin:5px 0px 0px 10px;"><label><input type="checkbox" id="source" value="source" name="source"> Rating specific to source pincode</label></p> 
     <p style="font-size:15px;color:black;margin:5px 0px 0px 10px;"><label><input type="checkbox" id="destination" value="destination" name="destination"> Rating specific to destination pincode</label></p> 
     <input id="submit" type="button" value="Submit" style="margin : 18px 0px 0px 93px;"/> 

Любая помощь будет глубоко признателен ,

Answer 1

Дайте что-то вроде этого попробовать:

var dialogId = 0; // Global variable 

function openRatingDialog() { 
    var id = dialogId++; 
    var rateDialog = $('<div id="ratingloaderDiv"></div>') 
    .load("ratingDialog.jsp?id="+ id).dialog({ 
     autoOpen: true, 
     minHeight:275, 
     width: 400, 
     height: 350, 
     open: function(event, ui) { 
      $(".rateCls"+ id).rating(); 
      $("#showDialogMessage"+ id).hide(); 
      $('#reviewArea'+ id).val(''); 
      $('#source'+ id).attr('checked', false); 
      $('#destination'+ id).attr('checked', false); 
      $("#submit"+ id).click(function(e) { 
      [...] 

JSP Файл:

<% String id = request.getParameter("id"); %> 

<form id="rateDialog<%=id%>" class="rateDialog<%=id%>" style="height:250px;width:500px;" title="Rating"> 
    <div id="showDialogMessage<%=id%>"></div> 
    <p style="font-size:15px;color:black;margin:5px 0px 0px 10px;"><label>Rate your overall satisfaction:</label></p> 
    <div id="starVin<%=id%>" style="display:block;"> 
    <input id="rateStars<%=id%>" type="radio" value="1" class="rateCls<%=id%> star<%=id%>"/> 
    <input id="rateStars<%=id%>" type="radio" value="2" class="rateCls<%=id%> star<%=id%>" /> 
    <input id="rateStars<%=id%>" type="radio" value="3" class="rateCls<%=id%> star<%=id%>"/> 
    <input id="rateStars<%=id%>" type="radio" value="4" class="rateCls<%=id%> star<%=id%>"/> 
    <input id="rateStars<%=id%>" type="radio" value="5" class="rateCls<%=id%> star<%=id%>"/> 
    </div> 
    <br/> 
    <p style="font-size:15px;color:black;margin:5px 0px 0px 10px;"><label>Please provide your review: </label></p> 
    <textarea id="reviewArea<%=id%>" name="reviewArea" rows="5"></textarea> 
    <p style="font-size:15px;color:black;margin:5px 0px 0px 10px;"><label><input type="checkbox" id="source<%=id%>" value="source" name="source"> Rating specific to source pincode</label></p> 
    <p style="font-size:15px;color:black;margin:5px 0px 0px 10px;"><label><input type="checkbox" id="destination<%=id%>" value="destination" name="destination"> Rating specific to destination pincode</label></p> 
    <input id="submit<%=id%>" type="button" value="Submit" style="margin : 18px 0px 0px 93px;"/> 
</form>