Delaying Jquery Document Ready Execution -Tutorial Savvy

“JQUERY 1.9.1” provides ‘HOLD READY’ feature to get delay in Jquery Document ready function execution.
This feature is typically helpful when a method has some dependencies like getting some ajax response before executing.
The Syntax for the method is :-

$.holdReady(boolean value ) : TRUE : Delays teh READY function to be executed.
: FALSE : Activates the READY function to be executed.

In this Demo, “Document ready function is getting delayed until the Student Servlet give response .Once the response is arrived the ready function calls the listing student in DOM”.
The Project Structure :-

The Student Java object Student.java

package com.sandeep.data.object;

public class Student {
 
 private String name;
 private String mark;

 public String getName() {
  return name;
 }

 public void setName(String name) {
  this.name = name;
 }

 public String getMark() {
  return mark;
 }

 public void setMark(String mark) {
  this.mark = mark;
 }

}

The Data Service for generate static student data StudentDataService.java,

package com.sandeep.data.service;

import java.util.ArrayList;
import java.util.List;
import com.sandeep.data.object.Student;

public class StudentDataService {

 public static List<Student> getStudentList() {

  List<Student> listOfStudent = new ArrayList<Student>();

  Student aStudent = new Student();

  for (int i = 1; i <= 20; i++) {

   aStudent = new Student();

   aStudent.setName("Sandeep" + i);

   aStudent.setMark("20" + i);

   listOfStudent.add(aStudent);
  }

  return listOfStudent;

 }
}

The java Servlet that returns List of Student StudentDataServlet.java,

package com.sandeep.json.data.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.sandeep.data.object.Student;
import com.sandeep.data.service.StudentDataService;

public class StudentDataServlet extends HttpServlet {

 private static final long serialVersionUID = 1L;

 public StudentDataServlet() {
  super();
 }

 protected void doGet(HttpServletRequest request,
   HttpServletResponse response) throws ServletException, IOException {

  response.setContentType("application/json");
  PrintWriter out = response.getWriter();
  List<Student> lisOfStudent = StudentDataService.getStudentList();
  
  
  Gson gson = new GsonBuilder().setPrettyPrinting().create();
  String json = gson.toJson(lisOfStudent);
  out.print(json);

 }

 protected void doPost(HttpServletRequest request,
   HttpServletResponse response) throws ServletException, IOException {

  doGet(request, response);
 }

}

The HTML and JQUERY code for Demo hold-ready-test.html,

<!doctype html>
<html lang="en">
    
    <head>
        <title>jQuery Hold Ready Demo</title>
        <style>
            .red-student {
                color:red;
            }
            .green-student {
                color:green;
            }
            .student-container {
                list-style-type: none;
            }
        </style>
    </head>
    
    <body>
        <ul class="student-container"></ul>
        <script src="js/jquery-1.9.1.min.js"></script>
        <script>
            var JQUERY_METHODS = {

                /*It Stores the ajax response*/
                Loaded_Data: null,

                /*Appends student names in UL container*/
                listAllStudent: function () {

                    var listOfStudent = JQUERY_METHODS.Loaded_Data,

                        studentContainer = $('.student-container'),

                        index, aStudent, colorClass;

                    for (index in listOfStudent) {

                        colorClass = (index % 2 === 0) ? "red-student" : "green-student";

                        aStudent = listOfStudent[index];

                        studentContainer.append("<li class='" + colorClass + "'>" + aStudent.name + "</li>")
                    }

                },
                /*Makes an Ajax Request to Download Student data*/
                downloadStudentData: function () {

                    var requestStudent = $.ajax({
                        type: "POST",
                        url: "StudentDataServlet"
                    });

                    requestStudent.done(function (studentData) {

                        JQUERY_METHODS.Loaded_Data = studentData;

                        /*
                         *holdReady : 'false' activates the jquery document ready function execution
                         * Here it waits for ajax request to respond back so that Student data will be available
                         * for listOfStudent method which is called in document ready.
                         */
                        $.holdReady(false);
                    });
                }
            };

            /*holReady : 'true' function delays the jquery document ready function execution*/
            $.holdReady(true);

            /*Triggers Ajax call for Student data*/
            JQUERY_METHODS.downloadStudentData();

            $(document).ready(function () {

                JQUERY_METHODS.listAllStudent();
            })
        </script>
    </body>

</html>

Output of demo,

Mar 24, 2013Sandeep

Delaying Jquery Document Ready Execution

Related

Sandeep