[英]How to make 2 buttons work together in Java script that are getting created by a loop
我正在嘗試顯示從 java servlet 到 jsp 的數據。 我有這個 map，我將它轉移到 jsp 並且我正在循環它以便我可以獲取數據。 我在跨度標簽中顯示鍵值，在按鈕中顯示“值”。 使用循環會動態生成按鈕。 當用戶單擊按鈕時，我通過 Ajax 發送數據，並且我正在獲取要在 jsp 頁面上顯示的數據。 然后，我希望該按鈕在按下后被禁用，如果按下不同的按鈕，它將再次啟用。
JSP 頁
<%@page import="java.util.*"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Doctor's Dashboard</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
<%@include file="/CSS/doc.css"%>
</style>
<script type="text/javascript"
src="<%=request.getContextPath() %>/JS/doc.js"></script>
</head>
<body>
<div class="upcomingAppointments">
<span class="text">Upcoming Appointments</span><br><br>
<form id="form" name="form">
<c:forEach items="${dates}" var="element">
<span class="date">${element.key}</span> <input type="button" class="mybtn count" value="${element.value}"><br>
<input type="hidden" name="dateSelected" value="${element.key}">
</c:forEach>
</form>
<div id="patientDetails" style="display:none"></div>
</div>
<c:if test="${not empty noAppt }">
<span>${noAppt }</span>
</c:if>
</body>
</html>
JS頁面
$(document).ready(function(){
//Stops the submit request
$("#form").submit(function(e){
e.preventDefault();
});
//checks for the button click event
$(".mybtn").click(function(e){
//get the form data and then serialize that
dataString=$("form").serialize();
//make the AJAX request, dataType is set to json
//meaning we are expecting JSON data in response from the server
$.ajax({
type: "Post",
url: "/Doctor_Appointment_Application/Login",
data: dataString,
dataType: "json",
//if received a response from the server
success: function(data,textStatus,jqXHR){
//doc Name was correct so we have some information to display
$("#patientDetails").show(500);
$(data.pDetails).each(function(index,item){
var img=document.createElement('img');
img.src=item.userImage;
img.className+="image";
$("#patientDetails").append(img);
$("#patientDetails").append("<b>Full Name:</b> "+item.fName+" "+item.lName+"<br>");
$("#patientDetails").append("<b>Mobile:</b> "+item.mobile+"<br>");
$("#patientDetails").append("<b>Email:</b> "+item.email+"<br>");
$("#patientDetails").append("<b>Slots:</b> "+item.slot+"<br>");
});
},
//If there was no resonse from the server
error: function(jqXHR, textStatus, errorThrown){
console.log("Something really bad happened " + textStatus);
},
beforeSend: function(jqXHR, settings){
//adding some Dummy data to the request
settings.data += "&dummyData=whatever";
//disable the button until we get the response
$('.mybtn').attr("disabled", true);
},
//this is called after the response or error functions are finsihed
//so that we can take some action
complete: function(jqXHR, textStatus){
$('.mybtn').attr("disabled", true);
}
});
});
});
CSS 頁
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.text{
font-size: 20px;
font-weight: 550;
background-color: deepskyblue;
color: black;
border-radius: 17px;
padding: 10px;
margin: 2px;
}
.date{
margin-left: 10px;
margin-right: 7px;
font-size: 14px;
font-weight: bold;
}
.count {
background-color: greenyellow;
color: black;
font-weight: 500;
border-radius: 50%;
width:1.5%;
margin-bottom: 5px;
}
.image{
border: 1px solid #ddd;
border-radius: 20%;
box-shadow: -15px 10px 10px;
padding: 1px;
width:180px;
height:160px;
background-color:red;
float:left;
margin: 20px 50px 30px 20px;
float: left;
}
如您所見，我已禁用完整 function 中的按鈕，我這樣做是因為每當我單擊該按鈕時，它都會再次發送請求並且再次顯示數據。 這就是為什么我需要在單擊按鈕后禁用它。
任何建議表示贊賞。
正如我在評論中已經說過的那樣進行更改，然后您只需要使用$(this).closest("form").serialize(); 獲取最接近的表單數據，然后只需使用$(".mybtn").not($this).attr("disabled", false); 啟用所有按鈕，而不是按下的按鈕。
演示代碼：
$(document).ready(function() { //Stops the submit request $("#form").submit(function(e) { e.preventDefault(); }); //checks for the button click event $(".mybtn").click(function(e) { var $this = $(this)//use as selector dataString = $(this).closest("form").serialize(); //get closest form only console.log(dataString) /* $.ajax({ //your codes complete: function(jqXHR, textStatus) {*/ $this.attr("disabled", true); //set attr disable //enable all button not (this) $(".mybtn").not($this).attr("disabled", false); /* } });*/ }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="upcomingAppointments"> <span class="text">Upcoming Appointments</span><br><br> <form name="form"> <span class="date">1</span> <input type="button" class="mybtn count" value="acv"><br> <input type="hidden" name="dateSelected" value="1"> </form> <form name="form"> <span class="date">2</span> <input type="button" class="mybtn count" value="avc"><br> <input type="hidden" name="dateSelected" value="2"> </form> <form name="form"> <span class="date">3</span> <input type="button" class="mybtn count" value="acs"><br> <input type="hidden" name="dateSelected" value="3"> </form> <div id="patientDetails" style="display:none"></div> </div>
是否可以讓 await + setTimeout + for 循環一起工作？
[英]Is it possible to make await + setTimeout + for loop work together?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.