我在JSP中有一个JSP，我有一个for循环。在for循环中，我打印星级，在桌子的不同单元格中具有评级。在进行ajax通话后，明星们不会来。只是单选按钮即将到来我正在使用这个插件http://www.fyneworks.com/jquery/star-rating/。这是我的一步一步的代码。我删除了一些部分以使其变得简单。 第一个JSP代码：
<div class="book-right" id="ajaxTest">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.rating.js"></script>
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
<--table + some intermediate loop code --->
<c:forEach var="leg" items="${option.legs}" varStatus="loopCounter3">
<div>
<input type="radio" name="rating-${loopCounter2.index}" value="1" class="rating-star" />
<input type="radio" name="rating-${loopCounter2.index}" value="2" class="rating-star" />
<input type="radio" name="rating-${loopCounter2.index}" value="3" class="rating-star" />
<input type="radio" name="rating-${loopCounter2.index}" value="4" class="rating-star" />
<input type="radio" name="rating-${loopCounter2.index}" value="5" class="rating-star" />
</div>
<input type="hidden" id="avgRating" name="avgRating" value="${leg.courierProduct.rating}"></input>
<script>
var avgRating = $('#avgRating').val();
$('.rating-star').rating('select', avgRating);
</script>
</c:forEach>
这是我的ajax电话：
function loadXMLDoc()
{
var xmlhttp;
var filtervalue=document.getElementById('filter1').value;
var url="FilterRender?filtervalue="+filtervalue;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("ajaxTest").innerHTML=xmlhttp.responseText;
var preference = document.getElementById("pref_id").value;
if(preference== '1')
{
$("#myTable").tablesorter({
sortList : [[2,0]],
headers: {
0: {
sorter: false
},
4: {
sorter: false
} } });
}
else if(preference== '2')
{
$("#myTable").tablesorter({
sortList : [[1,0]],
headers: {
0: {
sorter: false
},
4: {
sorter: false
} } });
}
else
{
$("#myTable").tablesorter({
headers: {
//make the first column un-sortable
0: {
sorter: false
},
//make the fourth column un-sortable
4: {
sorter: false
} } });
}
var avgRating = $('#avgRating').val();
alert('called');
$('.rating-star').rating().rating('select', avgRating );
$('.rating-star').rating('readOnly',true);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
在Ajax调用之后我加载了这个div：
<div class="book-right" id="ajax">
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript" src = "js/jquery.rating.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
<c:choose>
<c:when test="${fn:length(routes) == 1 and fn:length(routes[0].options) == 0}">
<div style="padding:216px;width:800px !important">
<span style="font-size: 20px; font-weight: bolder;margin: 90px;">Sorry! Currently we have no service found for this route.</span>
</div>
</c:when>
<c:otherwise>
<table id="myTable" class="tablesorter" width="769" border="0" cellspacing="0" cellpadding="0" class="sortable">
<thead>
<tr>
<th width="24%" height="67" align="center" bgcolor="#f7f6f6">
<span class="ser service"> Service Provider</span>
</th>
<th width="21%" height="67" align="center" bgcolor="#f7f6f6">
<span class = "ser icon1 icon2" >Delivery Time
</span>
</th>
<th width="16%" height="67" align="center" bgcolor="#f7f6f6">
<span class = "ser icon1 icon3">Cost
</span>
</th>
<th width="15%" height="67" bgcolor="#f7f6f6" align="center">
<span class="ser">Ratings </span>
</th>
<th width="17%" height="67" align="center" bgcolor="#f7f6f6">
</th>
</tr>
</thead>
<tbody>
<c:set var="filtervalue" scope="session" value="${param.filtervalue}"/>
<c:forEach var="route" items="${routes}" varStatus="loopCounter">
<c:forEach var="option" items="${route.options}"
varStatus="loopCounter2">
<tr>
<c:if test="${option.duration<=filtervalue}">
<td><div>
<c:forEach var="leg" items="${option.legs}"
varStatus="loopCounter3">
<span class="item"> <img
src="img/vendor_logos/<c:out value="${leg.courierProduct.logoName}" />"></span>
</c:forEach>
</div></td>
<td><span><c:out value="${option.duration}" /> days</span></td>
<td><span class="cost" style="font-size: 23px;"><img
src="img/rs.png">
<c:out value="${option.totalCost}" />/-</span></td>
<td>
<c:forEach var="leg" items="${option.legs}" varStatus="loopCounter3">
<div>
<input type="radio" name="rating-${loopCounter2.index}" value="1" class="rating-star"/>
<input type="radio" name="rating-${loopCounter2.index}" value="2" class="rating-star"/>
<input type="radio" name="rating-${loopCounter2.index}" value="3" class="rating-star"/>
<input type="radio" name="rating-${loopCounter2.index}" value="4" class="rating-star"/>
<input type="radio" name="rating-${loopCounter2.index}" value="5" class="rating-star"/>
</div>
<input type= "hidden" id="avgRating" name="avgRating" value= "${leg.courierProduct.rating}"></input>
<script>
var avgRating = $('#avgRating').val();
alert('called');
$('.rating-star').rating().rating('select', avgRating );
$('.rating-star').rating('readOnly',true)
</script>
</c:forEach>
</td>
<td>
<div id="${loopCounter2}" class="details" >
<span class="det"><a href="#">Details</a>
<span class="fulv">
<div class="col">
<p>Cost - Rs-<c:out value="${option.cost}" /></p>
<p>Service Tax - Rs - <c:out value="${option.serviceTax}"/></p>
<p>Total - Rs - <c:out value="${option.totalCost}"/></p>
</div><!--ocl-->
</span><!--fulv-->
</span>
<span class="book"><a
href="BookingConfirmAction?routeIndex=${loopCounter.index}&routeOptionIndex=${loopCounter2.index }">Book Now</a></span>
</div>
<!--details-->
</td>
</c:if>
</tr>
</c:forEach>
<!-- <br> -->
</c:forEach>
</tbody>
</table>
</c:otherwise>
</c:choose>
</div>
我已经提供了完整的第二个JSP代码（由AJAX加载）以供参考。我是初学者。非常感谢任何帮助。请询问是否需要显示更多代码