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 :
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;
});
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>
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.
You could simply use an iFrame in your dialog like the below.
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
来源：https://stackoverflow.com/questions/29574854/how-to-make-document-ready-execute-multiple-times