Error in ajax "Uncaught ReferenceError: responseParsedJSON is not defined"?

Viewed 46

I am working on a project in which I am stuck in the issue where I want to get available beds while checking if the ward selected has already taken the bed no if taken show only available beds else show all beds.

I have used ajax as a solution however I seem to get an error thrown in .

The code is :

FORM code of bed and wards select tags:

 <div class="form-group">
                           
                                    <div class="form-select">
                                        <select name="Ward" id="Ward" onChange="fetchAvailableBeds();">
                                    <option value="0">--Select Ward No---</option>
                                    <option value="ward1">1</option>
                                    <option value="ward2">2</option>
                                    <option value="ward3">3</option>
                                    <option value="ward4">4</option>
                                    <option value="ward5">5</option>
                                    <option value="ward6">6</option>
                                    <option value="ward7">7</option>
                                    <option value="ward8">8</option>
                                    <option value="ward9">9</option>
                                    <option value="ward10">10</option>
                                    <option value="ward11">11</option>
                                    <option value="ward12">12</option>
                                </select>
                                <span class="select-icon"><i class="zmdi zmdi-chevron-down"></i></span>
                            </div>
                                 </div>
                                 <div class="form-group">
                            
                                    <div class="form-select">
                                        <select name="bed" id="bed">     
                                    <option value="0">--Select Bed No---</option>
                                   
                                </select>

The AJAX CODE :

 <script type="text/javascript">
    function fetchAvailableBeds()
{
    var wardNo = $("#Ward").val();
    $.ajax({
    url     : "<%=request.getContextPath()%>/FilterBeds",//Servlet Name
    data    : {Ward:wardNo},
    type    : "GET",
    success : function(data, textStatus, jqXHR)
    {
        var bedDetails = responseParsedJSON.bedDetails;
        if(bedDetails.length > 0)
        {
            $('#bed').empty().append('<option>--Select Bed--</option>');
            for(var i=0;i<bedDetails.length;i++)
            {
                $('#bed').append('<option value="'+bedDetails[i].name+'">'+bedDetails[i].id+'</option>' );
            }
        }
        else
        {
            $('#bed').empty().append( '<option>--No Beds Available--</option>');
        }

     }
  });
}

        </script>

Servlet code:

@WebServlet(name = "FilterBeds", urlPatterns = {"/FilterBeds"})
public class FilterBeds extends HttpServlet {
 @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        try (PrintWriter out = response.getWriter()) {
            BedFiltering fl= new BedFiltering();
            int wardNo = Integer.parseInt(request.getParameter("Ward"));
            List<Beds> bedlist = fl.filterBeds(wardNo);
            Gson json = new Gson();
            String BedList = json.toJson(bedlist);
            response.setContentType("text/html");
            response.getWriter().write(BedList);
            
        }
    }

   
}

The DAO Class:

public List<Beds> filterBeds(int wardno) {

    //Getting all the wardnos
List<Integer> WardList = getSavedWardNumbers(wardno);

//List to hold data 
List<Beds> beddetails = new ArrayList<Beds>();
    for (int i = 1; i < 12; i++) {
        if (!WardList.contains(i)) {
            Beds bed = new Beds();
            bed.setBedNo(i);
            beddetails.add(bed);
        }
    }
return beddetails;
}

/*The method for getting ward nos*/
private List<Integer> getSavedWardNumbers(int wardno) {
 List ward = new ArrayList<>();
    
    try{
       Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/hms", "root", "");
        PreparedStatement s = conn.prepareStatement("SELECT BedNo FROM bedmanagement WHERE Ward_no=? ");
        s.setInt(1, wardno);
        ResultSet rs = s.executeQuery();
        while (rs.next()) {
            Beds beds = new Beds();
            beds.setWardNo(rs.getInt("BedNo"));
            ward.add(beds);
        }     
    }catch(SQLException e) {
    e.printStackTrace();
    }
    
    return ward;
}

Well this is my first ajax coding , so if any silly mistakes please excuse me , thanks for the help in advance.

1 Answers

I was able to solve it thanks to swati help . Well hope the below code can help someone:

 <script type="text/javascript">
    function fetchAvailableBeds()
{
    var wardNo = $("#Ward").val();
    $.ajax({
    url     : "<%=request.getContextPath()%>/FilterBeds",//Servlet Name
    data    : {Ward:wardNo},
    dataType: 'json',
    type    : "GET",
     success : function(data, textStatus, jqXHR)
    {
        console.log(data);
        var respons = data;
        var bedDetails = respons;
        if(bedDetails.length > 0)
        {
            $('#bed').empty().append('<option>--Select Bed--</option>');
            for(var i=0;i<bedDetails.length;i++)
            {
                $('#bed').append('<option value="'+bedDetails[i]+'">'+bedDetails[i]+'</option>' );
            }
        }
        else
        {
            $('#bed').empty().append( '<option>--No Beds Available--</option>');
        }

     }
  });
}


        </script>
Related