sonicneo

ในการเขียนโปรแกรมโดยใช้เทคนิค Ajax มาใช้สิ่งที่ได้คือทำให้ Application มีความ smooth ขึ้น  ทำให้หน้า page นั้นไม่ต้อง refresh

แต่การใช้เทคนิคนี้ทำให้ผู้ใช้งานแทบไม่เห็นความแตกต่างว่า  หน้า Page  นั้นๆได้ทำงานเสร็จแล้วหรือยัง  ทำให้เกิดความสับสนได้

วันนี้เลยมาแนะนำวิธีสร้าง  loading message รอขณะที่ ajax ทำงานซึ่งจะทำให้ผู้ใช้งานรู้ว่าขณะนี้ application กำลังทำงาน

1. สร้าง  div ที่จะแสดง loading message

<div id="loading">

      <div id="messageZone">Loading</div>

</div>

2. เขียน css style เพื่อแสดงข้อความ

<style type="text/css">

      #loading {

          color: #369;

          display: none;

          font-weight: bold;

          margin: 1em 0;

          padding-left: 20px;

          zIndex = 100010;

          position = fixed;

            border = solid red 1px;

            backgroundColor = white;

            left = "50%";

            bottom = "50%";

            width = "50%";

            height = "50%";

          }

    

</style>

3. เขียน jQuery โดยใช้ ajxStart และ ajaxStop เพื่อเรียกให้ #loading แสดงและซ่อนเมื่อ ajax ทำงาน

<script type="text/javascript">          

           jQuery('#loading').ajaxStart(function() {

              jQuery (this).show();

                  }).ajaxStop(function() {

                          jQuery (this).hide();

                  });   

        });

</script>

4. เขียน ใช้ jQuery เรียกให้ฝั่ง Server อาจะเรียกไปที่ Servlet หรือ Struts Controller

<script type="text/javascript"> 

function goSubmit(){

var path  =  '${pageContext.request.contextPath}/Controller.do’;

            jQuery.ajax({

               type: "POST",

               url: path,

               success: function(data) {

                jQuery("#employee").html(data)

                  },

               dataType: "html", 

               cache: false

 });

}

</script>