【问题标题】:How to make document ready execute multiple times如何使文档准备好执行多次
【发布时间】:2015-04-11 06:26:04
【问题描述】:

我正在使用 jquery 加载 jsp。我有多个按钮。单击时,我正在进行一个 jquery 调用,它在对话框中加载一个 jsp。我希望每次加载 jquery 对话框中的 jsp 时都执行文档就绪功能。 一步一步的解释:

这是每次点击率时在对话框中加载 ratingDialog.jsp 的 jquery 函数。

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

【问题讨论】:

  • ready 是一个事件。它发生一次(每页加载)。你不能做任何事情让它发生不止一次。但是,您可以做一千零一件事来让代码多次执行以响应该事件。
  • 您是否阅读过“脚本执行”部分,here?尽管它不涵盖您的确切用例,但它是相关的。尝试对您的 ratingloaderDiv 进行硬编码,而不是在每个 .load() 处重新创建它。
  • 此外,您可以安全地从加载的内容中删除 $(document).ready(function() {...}) 包装器,因为它不可能在页面的 ready 事件之前运行。
  • 问题是我试图在对话框中添加星级。单选按钮第一次变成了星星。但是,如果我们再次单击速率按钮,单选按钮不会转换为星号。单选按钮出现一会儿然后消失。我正在使用这个插件fyneworks.com/jquery/star-rating
  • 我已经确定了问题所在。由于单选按钮的名称相同,因此将总星数放在第一个对话框中。所以现在问题被简化为每次加载 jsp 时为单选按钮提供不同的名称。我已经单独添加了这个问题。请帮忙。我从过去的 2-3 小时就被困在这上面了。 stackoverflow.com/questions/29575594/…

标签: javascript jquery jsp document-ready


【解决方案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'); 
            }
        });
    });

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

【讨论】:

    【解决方案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++;
    
    }
    

    这是working example

    【讨论】:

    • 是的,先生。我已将这两行与对话框的打开回调挂钩。现在我遇到了不同的问题。我已将其作为单独的问题发布。请帮助stackoverflow.com/questions/29575594/…
    • @user3681970 查看我上面的编辑和更新的示例页面。他们将解决这两个问题
    • iFrame 应该不是必需的 - '.load()' 应该是完全足够的 - 只需要正确编码。此外,在 dist/jquery.rating.css 中使用适当的#showDialogMessage: {display:none} 指令,可以完全省去ratingsLoaded()。据我了解,重命名.rateCls 按钮的想法是针对编码错误的.load() 的一种解决方法,并且在每次重新加载时正确替换对话框时将被克服 - 因此也应该是不必要的。
    • @Roamer-1888 你说得对,乔希和我刚刚发现我的测试页面中的问题是由于我在正在加载的页面中再次加载 jquery
    • @user3681970 Josh 下面的回答实际上更适合这个问题,但请务必删除对话框,以免重复添加
    猜你喜欢
    • 2012-02-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-07-08
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多