submit button is not working in dialog

问题

I am loading a separate JSP using jquery in a dialog box. Dialog box has a button submit. I want to make ajax call on clicking submit. I am including submit.click on the dialog callback function but it is not working. Here is the step by step code.

First Jquery code to load 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(); 
     });
});

Here is the ratingdialog.jsp which is loaded into the dialog box

<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;"/>

Any help will be deeply appreciated.

回答1:

Give something like this a try:

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 File:

<% 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>

来源：https://stackoverflow.com/questions/29577728/submit-button-is-not-working-in-dialog