Asp.net webform infinity scroll

Question

I have a page shows product catalog populated by a webmethod. When user click on image he is redirect to details page. When user come back to catalog id like page scroll bottom at the product visited

How can i accomplish this

my html

<div class="articoli">
 </div>

my javascript

<script>
$(document).ready(function () {
    var Skip = 9;
    var Take = 9;

    function Load(Skip, Take) {
        $('#divPostsLoader').html('<img src="Images/loading.gif" height="100" />');

        $.ajax({
            type: "POST",
            url: "page.aspx/LoadProduct",
            data: "{ Skip:" + Skip + ", Take:" + Take + " }",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                if (data != "") {
                    //accodo dati a div
                    $('.articoli').append(data.d);
                }
                $('#divPostsLoader').empty();

            },

            error: function () {
                alert('error');
            }
        })
    };

    $(window).scroll(function () {
        if ($(window).scrollTop() == ($(document).height() - $(window).height())) {
            Load(Skip, Take);
            Skip = Skip + 9;
        }
    });
});

my c# webmethod

[System.Web.Services.WebMethod]
public static string LoadProduct(int Skip, int Take)
{
    StringBuilder GetProduct = new StringBuilder();

    MyDataBaseEntities db = new MyDataBaseEntities();
    var prod = (from a in db.TAB
                select a).Skip(Skip).Take(Take);

    foreach (var a in prod)
    {
        var Codart = a.Codart;
        var Prezz = a.Prezz;
        var pathimg = a.pathimg;

        GetProduct.Append("<div class=\"col-md-4\">");
        GetProduct.Append("<div class=\"col-md-6 text-left\">");
        GetProduct.AppendFormat(string.Format("<a href='Details.aspx?Articolo={0}' class=\"codart\" >", Codart));
        GetProduct.AppendFormat("<span class=\"codart\">{0}</span>", Codart);
        GetProduct.Append("</a>");
        GetProduct.Append("</div> ");
        GetProduct.Append("<div class=\"col-md-6 text-right\" style=\"color:gray;font-size:large;\">");
        GetProduct.AppendFormat(string.Format("{0:c}",  Prezz));
        GetProduct.Append("</div> ");
        GetProduct.AppendFormat(string.Format("<a href='Details.aspx?Articolo={0}' class=\"codart\" >", Codart));
        GetProduct.AppendFormat(string.Format("<img src='{0}' class='img-responsive MyImage' alt='{1}'/>", pathimg, Codart));
        GetProduct.Append("</a>");
        GetProduct.Append("</div> ");
    }
    return GetProduct.ToString();
}

how can i scroll bottom at page load?

RKrogh · Answer 1 · 2017-07-26T10:13:51.133

0

Try adding an Id to the item(s) you want to scroll to. You can then, depending on how you want to tackle it, either href or assign said Id through a script to initiate a scroll. Here you can see more details on how to scroll to a specific part of your page by using the component's Id.

I would add a unique Id to each item in your list. Then I would write a script to read/set a variable to which item to scroll to. Mind you, I'm writing this on a whim so you might need to correct or alter it to fit your needs.

You can use this to save and read cookies with jquery.

The script could be something like this:

var scrollToId;

$(document).ready(function () {
    var cookie = $.cookie('last_clicked_id');
    if (cookie != '') {
        scrollToId = cookie;
    } else {
        scrollToId = '#';
    }
    $("html, body").animate({ scrollTop: $(scrollToId).offset().top }, 1000);
});

$('.productItemClass')
    .on('click',
        function() {
            $.cookie('last_clicked_id', $(this).attr('id'));
        });

edited Jul 26 '17 at 10:13

answered Jul 26 '17 at 08:55

RKrogh

397
2
10

tks for help. I know anchor beavior but in this case how can i write an anchor in webmetod? Should i use session variable in detaisl page to assinge id to the session ? – jon Jul 26 '17 at 09:03
Do I understand you correctly. The flow is like this: 1. Catalog view contains a list of products. 2. Clicking on product redirects to specific product's Detail view. 3. Clicking back or similar returns the user to Catalog page. Now you want the list to scroll to the specific product because the user just visisted it? – RKrogh Jul 26 '17 at 09:14
If so, I would do this through jquery/javascript. Add an Id to the div of each product. Could be an Id or something unique for each product. Then you can have a script being triggered on page load using a variable that is set to said Id when an item is clicked. I guess saving it to a cookie would be a way to go here, if the User is out and about before returning to the page. – RKrogh Jul 26 '17 at 09:14
tks a lot. i try to set div id to the product code. but can you explain how write the javascript code ? i m a newbie with js... thks in any case – jon Jul 26 '17 at 09:31
Oh, and if it wasn't clear. For the above code you habe to add a class and a unique Id to each product item. The class is for knowing when such an item is clicked and the Id is for knowing the exact item that was clicked. Hope this helps you along. – RKrogh Jul 26 '17 at 10:25
I try to add a cookie in details page then in catalog page i try var scrollToId; var cookie if (document.cookie != null || document.cookie != '') { cookie = document.cookie.substring(document.cookie.indexOf(";") + 1); } if (cookie != '' && cookie !=null) { scrollToId = cookie; $("html, body").animate({ scrollTop: $(scrollToId).offset().top }, 1000); } else { } but i get Cannot read property 'top' of undefined at HTMLDocument. – jon Jul 26 '17 at 13:20
Yes. You can add a cookie from there. The cookie will be site specific and you could add a fitting epiration time stamp for it if you deem necessary. You will then be able to reach it from the Catalog view as well. – RKrogh Jul 26 '17 at 13:22
tks a lot ...but i yet get "cannot read property top of undefined" ... :( – jon Jul 26 '17 at 13:26
Hmm. Your error seem to be because the cookie does not exist or is an empty Id. If so, the $(scrollToId).offset().top would have no object to handle and give you that error. Try if($(scrollToId).length){$("html, body").animate({ scrollTop: $(scrollToId).offset().top}, 1000);} This checks if there is an object to handle for you. – RKrogh Jul 26 '17 at 13:33
yes if I try if($(scrollToId).length) nothing happen (no error in console); But with first 9 product it works because i use an asp repetar for those article ...pheraps i have to set a delay to let the page load all the product ? – jon Jul 26 '17 at 13:44
Good job! Oh, so if you have paged result or some async loading you could always trigger the scroll script every time an item is loaded. If it doesn't show, there will be nothing to scroll to and nothing will happen but if it suddenly appears it will know where to scroll. – RKrogh Jul 26 '17 at 13:46
I think i need to load another webmethod when i come back from details. The method should loads until product clicked but i dont know how :( – jon Jul 26 '17 at 13:54
I guess that depends on the expected behaviour. The script above is running when the page first is loaded but if it is asynchoronsly populated with more items, you could try to trigger it when a new item appears. $('.articoli').on('change', function(){//trigger scroll script}) Your articoli is getting appended content on the go. If we have an Id we want to scroll to but cannot find it, it will eventually appear in articili-div if I am not mistaken. Then we trigger it to see if the loaded item was what we were looking for. – RKrogh Jul 26 '17 at 14:05
You could put it parallell to the $(document.ready) and $('.productItemClass') .on('click'...) shown above. Maybe it is not best practise but I don't see any major issues by doing so. In the Catalog view. Then we will firstly scroll on page load and the for every loaded item. – RKrogh Jul 26 '17 at 14:14
i cant figured out...my knowledge is not so good. I can create a simple project and replicate the issue if you can help. in any case tks tks tks – jon Jul 26 '17 at 14:24
Sorry. Maybe I have missunderstood something. I have not been trying out the solution but speaking more conceptually. But sure, if you have a project where I could check I could try to help you with more detail. – RKrogh Jul 26 '17 at 14:26
ok i do simple solution but where can send you ? you are so kind...tks – jon Jul 26 '17 at 14:29
Try to add it to Github or something and I can get it from there to check. – RKrogh Jul 26 '17 at 14:30
need an account ? – jon Jul 26 '17 at 14:31
Yes. But it is free sign up and a good way of sharing code and version control it. Then you can just put the link here. – RKrogh Jul 26 '17 at 14:32
ok i create the project and the account...but now where i can import the solution ? – jon Jul 26 '17 at 15:14
is not so easy to share a solution on github...so tks and to the next :) – jon Jul 26 '17 at 15:36

score 0 · Answer 2 · answered Dec 08 '17 at 13:58

0

use this and set the variable sc

var sc;
var scroll;
var loop = setInterval(function() {
sc = window.scrollTop;
if (scroll === null) {
localstorage.setItem("bgc", sc);
}
}, 10);
window.onload = function() {
scroll = localstorage.getItem("bgc");
 if (scroll !== null) {
 window.scollTop = scroll + "px";
 }
 }

answered Dec 08 '17 at 13:58

Qyther

31
4

tks in any case – jon Dec 13 '17 at 11:26

Asp.net webform infinity scroll

2 Answers2