如何使文档准备好多次执行 [英] How to make document ready execute multiple times
问题描述
我正在使用jquery加载一个jsp。我有多个按钮。点击后，我正在进行一个jquery调用，在对话框中加载一个jsp。我希望每次加载jquery对话框中的jsp时都执行document ready函数。
分步说明：
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函数，每次点击率时都会在对话框中加载ratingDialog.jsp。
This is the jquery function which loads ratingDialog.jsp in the dialog box each time rate is clicked.
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
This is 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函数被执行。在我的情况下，它只执行一次（第一次在对话框内加载）
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)
推荐答案
如何移动文档准备好对话框回调的代码？
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.
这篇关于如何使文档准备好多次执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
