我有一个奇怪的问题。我正在使用jquery星级插件。如果我的JS代码中有断点,则仅单选按钮会转换为星形,否则不会转换。我将逐步解释代码。此jquery代码将ratingDialog.jsp加载到jquery对话框中
function openRatingDialog() { dialogId++; var rateDialog = $('<div id="ratingloaderDiv"></div>') .load("ratingDialog.jsp?id="+ dialogId).dialog({ autoOpen: true, minHeight:275, width: 400, height: 350, open: function( event, ui ) { var rating; console.log('first'); $('.rateCls'+dialogId).rating({ callback:function(value,link) { rating = value; } }); console.log('first'); $("#showDialogMessage"+ dialogId).hide(); $('#reviewArea'+ dialogId).val(''); $('#source'+ dialogId).attr('checked', false); $('#destination'+ dialogId).attr('checked', false); $("#submit"+ dialogId).click(function(e) { var index = sessionStorage.getItem("history_index"); alert(index); alert('submit clicked'); $("#showDialogMessage"+ dialogId).hide(); var review = $("#reviewArea"+dialogId).val(); var ratingDetails; if($('#source'+ dialogId).is(":checked")&& $('#destination'+ dialogId).is(":checked")) { ratingDetails = "overallRating"; } else if ($('#source'+ dialogId).is(":checked")) { ratingDetails = $("#source"+ dialogId).val(); } else if ($('#destination'+ dialogId).is(":checked")) { ratingDetails = $("#destination"+ dialogId).val(); } else { ratingDetails = "vendorRating"; } var xmlhttp; $("#submit"+ dialogId).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"+ dialogId).innerHTML=xmlhttp.responseText; $("#showDialogMessage"+ dialogId).show(); $("#submit"+ dialogId).removeAttr('disabled'); if ($("#showDialogMessage+dialogId: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); console.log('first'); openRatingDialog(); console.log('first'); }); });
这是ratingDialog.jsp
<% 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%>"/> <input id="rateStars<%=id%>" type="radio" value="2" class="rateCls<%=id%>" /> <input id="rateStars<%=id%>" type="radio" value="3" class="rateCls<%=id%>"/> <input id="rateStars<%=id%>" type="radio" value="4" class="rateCls<%=id%>"/> <input id="rateStars<%=id%>" type="radio" value="5" class="rateCls<%=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;"/>
我正在对动作类进行ajax调用。请询问是否需要任何详细信息。
就像我在这里建议的那样,尝试将您的dialog调用放在load回调中,以确保仅在获取JSP之后才触发。另外,请考虑将您dialogId的变量分配给局部变量,以免出现值不匹配的情况,以防在检索第一个对话框之前请求第二个对话框。
dialog
load
dialogId
var dialogId = 0; var rateDialog; function openRatingDialog() { var id = dialogId++; $('<div id="ratingloaderDiv"></div>').load("ratingDialog.jsp?id="+ id, function() { rateDialog = $(this).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) { [...] }); }); }