I have jsp page with list of tablets. It acts something like this:
- when this tablet is already ordered, it calls myFunc() to change innerHtml of div so that new input field with class count appends to it.
- When i click Order button it calls post method in servlet, and if response is received it calls myFunc() to do the same as in case 1.
Also i have input onInput() event so that when i change value in input field with class count, it calls another post method to update order in database.
The problem is when innerHtml changes in case 1, onInput() works ok. But in case 2 it does the same, but onClick event doesn't work... I compared the html code but it shows the same for both cases.
function myFunc(parameter1, order_id, pack_count){
var footerId = "order-footer-" + parameter1;
var panelId = "panel-body-" + parameter1;
var id = order_id;
var p_count = pack_count;
var href = "<a href='/patient/bucket' class='btn btn-success'>To Bucket</a>"
var input = "" + "<h3>Added to <a href='/patient/bucket'>bucket</a> </h3>" +
"<input type='number' value='" + p_count + "' class='count' id='" + id + "'>";
document.getElementById(footerId).innerHTML = href
document.getElementById(panelId).innerHTML = input
}
$(document).ready(function(){
$(".myButton").click(function(e){
tabletId = $(this).val();
$.ajax({
type: "POST",
url: "neworder?tabletId=" + tabletId,
data: tabletId,
dataType: "html",
//if received a response from the server
success: function(response_order_id) {
var orderId = response_order_id.toString();
alert("OrderId="+orderId+"sdfds");
myFunc(tabletId, orderId, 1);
alert("Ordered tablet tablet ID: " + text + "Response: " + orderId.toString());
},
//If there was no response from the server
error: function(jqXHR, textStatus, errorThrown){
alert("No Response!");
console.log("Something really bad happened " + textStatus);
$("#ajaxResponse").html(jqXHR.responseText);
}
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="order/javascript/apps.js"></script>
<script type="text/javascript" src="order/javascript/add_to_order.js"></script>
<script type="text/javascript">
onload = function(){
var e = document.getElementById("refreshed");
if(e.value == "no") e.value = "yes";
else{e.value = "no"; location.reload();}
}
</script>
<script>
$(document).ready(function(){
$(".count").on('input', function(){
var pack_count = $(this).val();
var order_id = $(this).attr('id');
$.post("order?action=update_counter&pack_count=" + pack_count + "&order_id=" + order_id, function(data){
alert("Increment is successfull!");
})
});
});
</script>
</head>
<body>
<input type="hidden" id="refreshed" value="no">
<div class="container">
<div class="row">
<c:forEach items="${tablets}" var="tablet">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">
<a href="http://localhost:8086/patient/order?tabletId=${tablet.tabletId}" style="color: antiquewhite">${tablet.name}</a>
</div>
<div class="panel-body">
<div id="panel-body-${tablet.tabletId}"><img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"></div>
<div><h3>Price: ${tablet.price} $</h3></div>
</div>
<div class="panel-footer">
<div id="order-footer-${tablet.tabletId}">
<button type="button" id="myButton" class="btn btn-primary myButton" value="${tablet.tabletId}">Order</button>
</div>
</div>
</div>
</div>
<c:forEach items="${orders}" var="order">
<c:choose>
<c:when test="${order.tabletId == tablet.tabletId}">
<c:choose>
<c:when test="${order.patientId == id}">
<script type="text/javascript">
myFunc(${tablet.tabletId}, ${order.orderId}, ${order.packageCount});
</script>
</c:when>
</c:choose>
</c:when>
</c:choose>
</c:forEach>
</c:forEach>
</div>
</div>
</body>
</html>Send response to ajax
int orderId = orderDAO.getLastInsertedId();
String stringId = String.valueOf(orderId);
resp.setContentType("text/html;charset=UTF-8");
PrintWriter out = resp.getWriter();
out.print(stringId);
Aucun commentaire:
Enregistrer un commentaire