[Solved] jQuery Ajax Loading Image not working while async is set to false in ASP.Net

Last Reply 21 days ago By arunkurmi

Posted one month ago

jquery ajax loading image not working in chrome while async is set to false.

how can i function it keping async:false bcause i need it for later projects.

code is from my previous querstion.

Load content (image) on page scroll using jQuery Ajax and WebService in ASP.Net

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        var currentPage = 1;
        var TotalPage;
        $(window).scroll(function () {
            if ($(window).scrollTop() == ($(document).height() - $(window).height())) {
                if (currentPage < TotalPage) {
                    currentPage += 1;
                    getproductdata(currentPage);
                }
            }
        });
        $(document).ready(function () {
            getproductdata(currentPage);
        });
        function getproductdata(currentPageNumber) {
            $.ajax({
                url: 'WebService.asmx/GetProductpage',
                method: 'post',
                dataType: "json",
                async: false,
                data: { pageNumber: currentPageNumber, pageSize: 3 },
                success: function (data) {
                    if (data.length > 0) {
                        TotalPage = data[0].PageCount;
                        var table = $('#tblImages');
                        var rows = "";
                        $(data).each(function (index, emp) {
                            var coupon = emp.coupon;
                            rows += "<div class=trclass>"
                                + "<tr><td class=tdcolumn>"
                                + "<div class=tabledivprod>"
                            rows += '<img class=pdtimg src="data:image/jpg;base64,' + emp.Prodimage + '" />'
                             + "<div style=display:none class=couponcode>" + emp.couponcode + "</div>"
                            rows += "</div>" + "</td></tr>" + "</div><br/>"
                        });
                        table.append(rows);
                    }
                },
                beforeSend: function () {
                    $(".modal").show();
                },
                complete: function () {
                    $(".modal").hide();
                },
                error: function (err) {
                    alert(err);
                }
            });
        }
    </script>

 

You are viewing reply posted by: arunkurmi 21 days ago.
Posted 21 days ago

Hi jovceka,

Check this sample. now take its reference.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <style type="text/css">
        .pdtimg
        {
            width: 100px;
            height: 100px;
        }
        .modal
        {
            position: fixed;
            z-index: 999;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            background-color: Black;
            filter: alpha(opacity=60);
            opacity: 0.6;
            -moz-opacity: 0.8;
        }
        .center
        {
            z-index: 1000;
            margin: 100px auto;
            padding: 10px;
            width: 130px;
            background-color: White;
            border-radius: 10px;
            filter: alpha(opacity=100);
            opacity: 1;
            -moz-opacity: 1;
        }
        .center img
        {
            height: 128px;
            width: 128px;
        }
    </style>
    <script type="text/javascript">
        var currentPage = 0;
        var TotalPage;
        $(window).scroll(function () {
            if ($(window).scrollTop() >= ($(document).height() - $(window).height()) * .8) {
                getproductdata();
            }
        });
        $(document).ready(function () {
            getproductdata(currentPage);
        });
        function getproductdata() {
            currentPage++;
            if (currentPage == 1 || currentPage <= TotalPage) {
                $.ajax({
                    url: 'WebService.asmx/GetProductpage',
                    method: 'post',
                    dataType: "json",
                    async: false,
                    data: { pageNumber: currentPage, pageSize: 3 },
                    success: function (data) {
                        if (data.length > 0) {
                            TotalPage = data[0].PageCount;
                            var table = $('#tblImages');
                            var rows = "";
                            $(data).each(function (index, emp) {
                                var coupon = emp.coupon;
                                rows += "<div class=trclass>"
                                + "<tr><td class=tdcolumn>"
                                + "<div class=tabledivprod>"
                                rows += '<img class=pdtimg src="data:image/jpg;base64,' + emp.Prodimage + '" />'
                                     + "<div style=display:none class=couponcode>" + emp.couponcode + "</div>"
                                rows += "</div>" + "</td></tr>" + "</div><br/>"
                            });
                            table.append(rows);
                        }
                    },
                    beforeSend: function () {
                        $(".modal").show();
                    },
                    complete: function () {
                        setTimeout(function () {
                            $(".modal").hide();
                        }, 1000);
                    },
                    error: function (err) {
                        alert(err);
                    }
                });
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="tblImages">
        </div>
        <div class="modal" style="display: none">
            <div class="center">
                <img alt="" src="Loader.gif" />
            </div>
        </div>
    </div>
    </form>
</body>
</html>

WebService

C#

[WebMethod]
public void GetProductpage(int pageNumber, int pageSize)
{
    //System.Threading.Thread.Sleep(1000);
    List<Products> details = new List<Products>();
    string cs = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(cs))
    {
        SqlCommand cmd = new SqlCommand("sp_products_page", con);
        cmd.CommandType = System.Data.CommandType.StoredProcedure;

        cmd.Parameters.Add(new SqlParameter()
        {
            ParameterName = "@PageNumber",
            Value = pageNumber
        });

        cmd.Parameters.Add(new SqlParameter()
        {
            ParameterName = "@PageSize",
            Value = pageSize
        });

        cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;

        using (var sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            DataTable TableData = new DataTable();
            TableData.Clear();
            sda.Fill(TableData);
            foreach (DataRow dtrow in TableData.Rows)
            {
                Products user = new Products();
                byte[] arrpicture = new byte[0];
                user.Productid = Convert.ToInt32(dtrow["Id"].ToString());
                user.Productname = dtrow["Name"].ToString();
                arrpicture = (byte[])dtrow["Data"];
                user.Prodimage = Convert.ToBase64String(arrpicture);
                user.PageCount = Convert.ToInt32(cmd.Parameters["@PageCount"].Value);
                details.Add(user);
            }
        }

    }

    JavaScriptSerializer js = new JavaScriptSerializer();
    Context.Response.Write(js.Serialize(details));

}
public class Products
{
    public int Productid;
    public string Prodimage;
    public string Productname;
    public int PageCount;
}

VB.Net

    <WebMethod()> _
    Public Sub GetProductpage(ByVal pageNumber As Integer, ByVal pageSize As Integer)
        Dim details As List(Of Products) = New List(Of Products)()
        Dim cs As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using con As SqlConnection = New SqlConnection(cs)
            Dim cmd As SqlCommand = New SqlCommand("sp_products_page", con)
            cmd.CommandType = System.Data.CommandType.StoredProcedure
            cmd.Parameters.Add(New SqlParameter() With {
                .ParameterName = "@PageNumber",
                .Value = pageNumber
            })
            cmd.Parameters.Add(New SqlParameter() With {
                .ParameterName = "@PageSize",
                .Value = pageSize
            })
            cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output

            Using sda = New SqlDataAdapter()
                cmd.Connection = con
                sda.SelectCommand = cmd
                Dim TableData As DataTable = New DataTable()
                TableData.Clear()
                sda.Fill(TableData)

                For Each dtrow As DataRow In TableData.Rows
                    Dim user As Products = New Products()
                    Dim arrpicture As Byte() = New Byte(-1) {}
                    user.Productid = Convert.ToInt32(dtrow("Id").ToString())
                    user.Productname = dtrow("Name").ToString()
                    arrpicture = CType(dtrow("Data"), Byte())
                    user.Prodimage = Convert.ToBase64String(arrpicture)
                    user.PageCount = Convert.ToInt32(cmd.Parameters("@PageCount").Value)
                    details.Add(user)
                Next
            End Using
        End Using

        Dim js As JavaScriptSerializer = New JavaScriptSerializer()
        Context.Response.Write(js.Serialize(details))
    End Sub
    Public Class Products
        Public Productid As Integer
        Public Prodimage As String
        Public Productname As String
        Public PageCount As Integer
    End Class

Screenshot