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

2023-12-08

我正在使用 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 函数。就我而言,它只执行一次(第一次在对话框中加载)


将文档就绪代码移至对话框回调怎么样?

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使文档准备好执行多次 的相关文章

随机推荐