How to make 2 buttons work together in Java script that are getting created by a loop

Question

I am trying to display data from a java servlet to a jsp. I have this map which I am transferring to the jsp and I am looping on it so that I can get the data. I am displaying the key value in a span tag and the "value" in the button. With a loop there is generated dynamically buttons. When the user clicks on the button, I am sending the data through Ajax and I am getting the data to show on the jsp page. Then, I want the button to get disabled once it is pressed and it will be enabled again if a different button is pressed.

JSP PAGE

<%@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"%>    




Doctor's Dashboard



    




    
    Upcoming Appointments


    
            
                ${element.key}  

                
            
             
        
    
    
        ${noAppt }

JS PAGE

$(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("Full Name: "+item.fName+" "+item.lName+"
");
                        $("#patientDetails").append("Mobile: "+item.mobile+"
");
                        $("#patientDetails").append("Email: "+item.email+"
");
                        $("#patientDetails").append("Slots: "+item.slot+"
");

                    });
             },
                
                //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 PAGE

* {
    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;
}

As you can see, I have disabled the button in the complete function, I did that because whenever I was clicking on the button, it was sending the request again and the data was getting displayed again. So that is why I need to disable the button once it is clicked.

Any suggestion is appreciated.

Swati · Accepted Answer

As i already said in comment make that changes and then you just need to use $(this).closest("form").serialize(); to get closest form data and then simply use $(".mybtn").not($this).attr("disabled", false); to enable all button and not the button which is pressed.

Demo Code :

$(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);
    /* }
    });*/
  });
});



  Upcoming Appointments


  
    1 

    
  
  
    2 

    
  
  
    3

How to make 2 buttons work together in Java script that are getting created by a loop

Answers (1)

Related Questions