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

Question

我正在使用 jquery 加载 jsp。我有多个按钮。单击时，我进行了 jquery 调用，在对话框中加载了 jsp。我希望每次加载 jquery 对话框中的 jsp 时都执行文档就绪功能。分步说明：

这是 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;
     });

这是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>

每次加载 ratingDialog 时，我都希望执行其 document.ready 功能。在我的例子中，它只执行一次（第一次加载到对话框中）

Answer 1

将您的文档就绪代码移动到您的对话框回调怎么样？

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'); 
            }
        });
    });

将对话框调用移动到您的加载回调还可以确保它不会运行直到您的文件被检索。

Answer 2

您可以像下面这样在对话框中简单地使用 iFrame。

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

$(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++;

}

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

How to make document ready execute multiple times

javascript

jquery

jsp

document-ready

这是一个working example