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

Last Reply 3 months ago By arunkurmi

Posted 4 months 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 3 months ago.
Posted 3 months 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