Auto Refresh ASP.NET without blinking page

See more:

C#

ASP.NET

Javascript

Ajax

jQuery

, +

first let me tell you my flow

I want to build seat reservation application(real time). I use c#, ajax, jquery also sql-server for database. I have 3 pages index.html(User Interface), .js(for jQuery , print seat, seat position also bridge for html and aspx), and aspx(which manipulate database)

when you run Index.html you'll see seats, you can click it and input your end time then your seat will change color to red. if current time is equal with your end time then your seat color from red back to green.

seat will change into red when you book it. and your no seat and endTime will insert into DB. when your endtime = current time -on DB has field status 0 and 1. 0 mean available and 1 mean booked- status change to 0.

it's all done but the color wouldn't back to green. whereas status has change to 0.

this my code in aspx. that get no seat also endtime from .html and .js and also get data from database which seat is still booked.

[WebMethod]
    [ScriptMethod(UseHttpGet = true)]
    public static string GetSeat()
    {
        string sql = "";
        SqlConnection conn = DBConnection.getConnection();
        conn.Open();
        sql = "UPDATE booking SET statusBooked = 0 WHERE CONVERT(char(5),[end], 108) = '" + DateTime.Now.ToString("hh:mm") + "'";
        SqlCommand _cdm = new SqlCommand(sql, conn);
        _cdm.ExecuteNonQuery();
        conn.Close();

        List<booking> bookList = new List<booking>();            
        conn.Open();
        sql = "Select noSeat from booking WHERE statusBooked = 1";
        SqlCommand cmd = new SqlCommand(sql, conn);
        SqlDataReader dr = cmd.ExecuteReader();            
        while (dr.Read())
        {
            booking book = new booking();
            book.noSeat = dr[0].ToString();
            book.end =(DateTime) dr[1];
            bookList.Add(book);
        }      
        conn.Close();

        JavaScriptSerializer serializer = new JavaScriptSerializer();            
        return serializer.Serialize(bookList).ToString(); 
    }

this is my ajax on .js that receive which seat number is booked and change into red I put setInterval on document ready. so it will be refresh every 2 second.

setInterval('_ajax()', 2000);

function _ajax(){
$.ajax({
    url: "Url.aspx/GetSeat",
    type: "GET",
    contentType: "application/json; charset=utf-8",

    success: function (response) {            
        var arr = JSON.parse(response.d);
        console.log(arr);
        objData = new Array();
        objData = arr;
        for (i = 0; i < objData.length; i++) {
            //console.log(objData[i].noSeat);
            jQuery('#' + objData[i].noSeat).addClass('seat-booked');
            jQuery('#class-' + objData[i].noSeat).attr('value', 'seat-booked');
            jQuery('#' + objData[i].noSeat).removeClass('seat-availiable');
            jQuery('#' + objData[i].noSeat).removeClass('selected');

        }
    },
    error: function () {
        alert("sorry, there was a problem!");
        console.log("error");
    },
    complete: function () {
        console.log("complete");
    }
});
}

it should be green automatically, because i only send number of seat booked from aspx and in .js I only change to red if noseat is equal of data I send from .aspx but if I reload Index.html manually. the seat is change to green. it works but not automatically. I used to html refres meta tag, and reload on page_load, but it make the page blinking. I want it refresh without blinking