本文介绍了提交按钮不起作用对话框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在一个对话框中使用jquery加载单独的JSP。对话框有一个按钮提交。我想使AJAX调用上点击提交。我包括submit.click在对话框的回调函数,但它不能正常工作。下面是一步code中的一步。
I am loading a separate JSP using jquery in a dialog box. Dialog box has a button submit. I want to make ajax call on clicking submit. I am including submit.click on the dialog callback function but it is not working. Here is the step by step code.
首先Jquery的code加载JSP:
First Jquery code to load 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 ) {
$(".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() {
$(".rate").on("click", function() {
// Display the dialog
var index = this.id;
sessionStorage.setItem("history_index", index);
openRatingDialog();
});
});
下面是被加载到对话框ratingdialog.jsp
Here is the ratingdialog.jsp which is loaded into the dialog box
<form 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="rateStars" type="radio" value="1" class="rateCls star"/>
<input id="rateStars" type="radio" value="2" class="rateCls star" />
<input id="rateStars" type="radio" value="3" class="rateCls star"/>
<input id="rateStars" type="radio" value="4" class="rateCls star"/>
<input id="rateStars" type="radio" 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="button" value="Submit" style="margin : 18px 0px 0px 93px;"/>
任何帮助会深深AP preciated。
Any help will be deeply appreciated.
推荐答案
给出这样的一个尝试:
var dialogId = 0; // Global variable
function openRatingDialog() {
var id = dialogId++;
var rateDialog = $('<div id="ratingloaderDiv"></div>')
.load("ratingDialog.jsp?id="+ id).dialog({
autoOpen: true,
minHeight:275,
width: 400,
height: 350,
open: function( event, ui ) {
$(".rateCls"+ id).rating();
$("#showDialogMessage"+ id).hide();
$('#reviewArea'+ id).val('');
$('#source'+ id).attr('checked', false);
$('#destination'+ id).attr('checked', false);
$("#submit"+ id).click(function(e) {
[...]
JSP文件:
JSP File:
<% String id = request.getParameter("id"); %>
<form id="rateDialog<%=id%>" class="rateDialog<%=id%>" style="height:250px;width:500px;" title="Rating">
<div id="showDialogMessage<%=id%>"></div>
<p style="font-size:15px;color:black;margin:5px 0px 0px 10px;"><label>Rate your overall satisfaction:</label></p>
<div id="starVin<%=id%>" style="display:block;">
<input id="rateStars<%=id%>" type="radio" value="1" class="rateCls<%=id%> star<%=id%>"/>
<input id="rateStars<%=id%>" type="radio" value="2" class="rateCls<%=id%> star<%=id%>" />
<input id="rateStars<%=id%>" type="radio" value="3" class="rateCls<%=id%> star<%=id%>"/>
<input id="rateStars<%=id%>" type="radio" value="4" class="rateCls<%=id%> star<%=id%>"/>
<input id="rateStars<%=id%>" type="radio" value="5" class="rateCls<%=id%> star<%=id%>"/>
</div>
<br/>
<p style="font-size:15px;color:black;margin:5px 0px 0px 10px;"><label>Please provide your review: </label></p>
<textarea id="reviewArea<%=id%>" name="reviewArea" rows="5"></textarea>
<p style="font-size:15px;color:black;margin:5px 0px 0px 10px;"><label><input type="checkbox" id="source<%=id%>" 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<%=id%>" value="destination" name="destination"> Rating specific to destination pincode</label></p>
<input id="submit<%=id%>" type="button" value="Submit" style="margin : 18px 0px 0px 93px;"/>
</form>
这篇关于提交按钮不起作用对话框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!