如何使文档准备好多次执行

I am loading a jsp using jquery. I have multiple buttons. On clicking, i am making a jquery call which loads a jsp in dialog box. I want the document ready function to be executed every time the jsp inside the jquery dialog box loads. Step by step explanation :

我正在使用jquery加载一个jsp。我有多个按钮。点击后，我正在进行一个jquery调用，在对话框中加载一个jsp。我希望每次加载jquery对话框中的jsp时都执行document ready函数。分步说明：

This is the jquery function which loads ratingDialog.jsp in the dialog box each time rate is clicked.

这是jquery函数，它在每次单击速率时在对话框中加载ratingDialog.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 ) {
         $("#showDialogMessage").hide();
         $('#reviewArea').val('');
         $('#source').attr('checked', false);
         $('#destination').attr('checked', false);
         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() {
     var index ;
    $(".rate").on("click", function() {
     // Display the dialog
     openRatingDialog(); 
     index = this.id;
     });

This is ratingDialog.jsp

这是ratingDialog.jsp

<link rel="stylesheet" href="dist/jquery.rating.css">
<div 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="rateStar" type="radio" name="rating" value="1" class="rateCls star"/>
        <input id="rateStar" type="radio" name="rating" value="2" class="rateCls star" />
        <input id="rateStar" type="radio" name="rating" value="3" class="rateCls star"/>
        <input id="rateStar" type="radio" name="rating" value="4" class="rateCls star"/>
        <input id="rateStar" type="radio" name="rating" 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="submit" value="Submit" style="margin : 18px 0px 0px 93px;"/>
</div>
<script src = "js/jquery.rating.js"></script>
</script>

Each time ratingDialog loads i want its document.ready function to be executed. In my case, it is executing only once(for the first time it loads inside the dialog)

每次ratingDialog加载我都希望它的document.ready函数被执行。在我的情况下，它只执行一次（第一次在对话框内加载）

2 个解决方案

#1

How about moving your document ready code to your dialog callback?

如何将文档就绪代码移动到对话框回调？

var rateDialog;
$('<div id="ratingloaderDiv"></div>')
    .load("ratingDialog.jsp", function() {
        rateDialog = $(this).dialog({
            autoOpen: true,
            minHeight:275,
            width: 400,
            height: 350,  
            open: function( event, ui ) {
                $("#showDialogMessage").hide();
                $('#reviewArea').val('');
                $('#source').attr('checked', false);
                $('#destination').attr('checked', false);

                // Document ready
                $(".rateStar").show();
                $(".rateCls").rating();
                alert('hi'); 
            }
        });
    });

Moving the dialog call to your load callback also ensures it doesn't run until your file is retrieved.

将对话框调用移动到加载回调还可确保在检索文件之前它不会运行。

#2

You could simply use an iFrame in your dialog like the below.

您可以在对话框中使用iFrame，如下所示。

Also, you will want to keep a reference to your dialog and destroy it when it is closed, otherwise you will be adding it to your page over and over again

此外，您需要保留对对话的引用并在关闭时将其销毁，否则您将一遍又一遍地将其添加到您的页面中

$(document).ready(function () {
    var rateDialog;
    function openRatingDialog() {
        rateDialog = $('<div id="ratingloaderDiv"><iframe id="ratingIframe" src="ratingDialog.html" width="200" height="200" frameborder="0" onload="parent.ratingsLoaded();"></iframe></div>')
            .dialog({
            autoOpen: true,
            minHeight: 275,
            width: 400,
            height: 350,
            open: function (event, ui) {
            },
            close: function (event, ui) {
                rateDialog.dialog('destroy').remove();
            }
        });
    }
    $(".rate").on("click", function () {
        // Display the dialog
        openRatingDialog();
    });
});
var curIndex=0;
function ratingsLoaded(){
            var name = 'rating'+curIndex
            var iframe = $('#ratingIframe').contents();
            iframe.find("#showDialogMessage").hide();
            iframe.find('#reviewArea').val('');
            iframe.find('#source').attr('checked', false);
            iframe.find('#destination').attr('checked', false);
            iframe.find('.rateCls').attr('name', name);
            curIndex++;

}

Here is a working example