locked
The top carousel slider part of the razor view is displayed for a second before updating a <div> with the partial view . RRS feed

  • Question

  • User706400337 posted

    I have different categories on my Index.cshtml and on clicking of any of the categories, I am displaying the products of that category. The html containing the product list is updated with a partial view on the success of $.ajax. The products are displayed according to the category selected, but for a fraction of a second the top part of the view is displayed before the updating of the <div>.

    My Index page.

     <section id="portfolio" class="section-bg">
            <div class="container" id="focusdiv" tabindex="-1">
                <header class="section-header">
                    <h3 class="section-title">Our Portfolio</h3>
                </header>
                <div id="listproducts" class="text-center">
    
                    <ul id="portfolio-flters">
                        <li><a id="all" href="#">All </a></li>
                        <li>
                            <a id="inserts" href="#" data-toggle="popover" title="The optimum usage of the Insert has to be determined by having a controlled low flank wear to reuse the Insert.
                           Reworking can be done only on Inserts with minimum Flank Wear or regular Flank Wear.">
                                Inserts
                            </a>
                        </li>
                        <li><a id="cutters" href="#">Cutters</a></li>
                        <li><a id="angular" href="#">Angular Heads</a></li>
                        <li><a id="special" href="#">Specialized-Customized</a></li>
                        <li><a id="dialholders" href="#">Dial Holders</a></li>
    
    
                    </ul>
                    <input id="currentcategory" type="hidden" value="all" />
                </div>
                
                <div id="displayproducts">
                    
                    @{Html.RenderAction("AllProducts" );}
                   
                </div>
    
            </div>
        </section><!-- #portfolio -->
    

    My partial view

    @model Monotech.Models.ProductViewModel
    
    @if (Model.Products != null)
    {    
    <div id="firstdiv" class="container">
        <div class="row">
    
    
    
            @foreach (var product in Model.Products)
            {
    
                <div class="col-sm-4 col-lg-3">
                    <div class="product">
                        <a href="#" class="img-prod">
                            @if (product.ImageUrl != null)
                            {
                                <img class="img-fluid" src="@Url.Content(product.ImageUrl)">
                            }
                        </a>
    
    
                        <div class="portfolio-info">
                            <h4>@product.Name</h4>
                        </div>
    
                    </div>
                </div>
            }
        </div>
        </div>
        <div>
    
            <nav aria-label="Page navigation example">
                <ul class="pagination">
    
                    @if (Model.Pager != null && Model.Pager.TotalPages > 1)
                    {
    
                        if (Model.Pager.CurrentPage > 1)
                        {
                            <li>
                                <a href="#" data-pageNo="@Model.Pager.CurrentPage - 1">Previous</a>
                            </li>
    
                        }
    
                        for (var page = Model.Pager.StartPage; page <= Model.Pager.EndPage; page++)
                        {
                            string activeClass = Model.Pager.CurrentPage == page ? "active bg-info" : string.Empty;
    
                            <li>
                                <a href="#" data-pageNo="@page">@page</a>
                            </li>
    
                        }
    
                        if (Model.Pager.CurrentPage < Model.Pager.TotalPages)
                        {
                            <li>
                                <a href="#" data-pageNo="@Model.Pager.CurrentPage + 1">Next</a>
                            </li>
    
    
    
                        }
                    }
                </ul>
            </nav>
        </div>
        }
    

    My $.ajax function():

    $("#dialholders").click(function () {
            var category = 'dialholders';
            $("#currentcategory").val(category);
            $.ajax({
                url: "/Home/ToolsCategory",
                type: "GET",
                data: {
                    category: category
                },
                success: function (data) {
    
                    $("#displayproducts").html(data);
                   
                    $("#focusdiv").attr("tabindex", -1).focus();
                   // $('body').scrollTo('#focusdiv'); 
                },
            });
        });
    

    The action method of the Home controller

    [HttpGet]
    public ActionResult ToolsCategory(string category, int? pageNo)
    {
        ProductViewModel products = new ProductViewModel();
        ProductView productview = new ProductView();
        var pageSize = 10;
        int totalRecords;
    
        pageNo = pageNo.HasValue ? pageNo.Value > 0 ? pageNo.Value : 1 : 1;
        if (category == "all" || category == null)
        {
            totalRecords = productview.GetAllProductsCount();
            products.Products = productview.GetAllProducts(pageNo.Value, pageSize);
        }
        else
        {
            totalRecords = productview.GetProductsCategoryCount(category);
            products.Products = productview.GetProductsCategoryWise(category, pageNo.Value);
        }
        products.Categories = productview.GetCategories();
        products.Pager = new Pager(totalRecords, pageNo, pageSize);
    
        return PartialView("_Products", products);
    }
    

    Please help me understand why this is happening.

    Tuesday, April 27, 2021 2:17 PM

All replies

  • User287926715 posted

    Hi sunitav76,

    How do you switch the carousel ? Is it implemented using third-party plug-ins or some Css and js written by yourself?I used your code and did not reproduce your problem.

    Best Regards,

    ChaoDeng

    Wednesday, April 28, 2021 8:30 AM
  • User706400337 posted

    Hi Chao,

    I am not getting the problem when I run the project locally, 

    I am sharing the link of the hosted website:

    https://monotechengineering.somee.com/

    Here if you notice, then changing the categories will show this problem before refreshing the products contents.

    Please help me solve this.

    Sunita

    Wednesday, April 28, 2021 9:05 AM
  • User287926715 posted

    Hi sunitav76,

    I saw the problem you said. Did you have this problem before deployment?

    When I opened your webpage and loaded it, I found this error. What does this JS do, I think it may be caused by this.

    Best Regards,

    ChaoDeng

    Tuesday, May 4, 2021 6:27 AM
  • User706400337 posted

    Hi Chao,

    I am getting the same problem before deployment also. I didn't notice this error, I thought it was added by the hosting company to display some ads. Will check into it and see if it is causing the problem.

    Thanks a lot for your help.

    Sunita

    Tuesday, May 4, 2021 7:03 AM