HTML5 + jQuery + Infinite Scroll

Question

After much research, I have learned that binding the scroll event to the $(window) in the live state is not supported. This is fine, but I do have a question or two in regards to the script I am working on.

I have a website that is utilizing the HTML5 jQuery History Plugin (http://tkyk.github.com/jquery-history-plugin/) to load in pages for a fluid user experience since my site has an anchored audio player within it.

On one of my pages I have created an infinite scroll to load in Albums upon the window scroll. It works fine if you go to the page directly, but if you go there via an HTML5 enabled link (I have some links that are specifically for the HTML5 implementation) it doesn't work.

Here is my Infinite Scroll Code:

jQuery(function() {
                var getMoreMedias, loading, mediaType, nearBottomofPage, page, pendingCall, genreType, url, did_scroll;
              page = 1;
              loading = false;
                // did_scroll = false
              mediaType = $('.breadcrumbs strong').attr('rel');
                genreType = $('.breadcrumbs strong').data('genre-id')

              nearBottomofPage = function() {
                return $(window).scrollTop() > $(document).height() - $(window).height() - $('#footer').height();
              };

              getMoreMedias = function(page, mediaType) {
                    opts = {
                     lines: 12, //The number of lines to draw
                     length: 7, //The length of each line
                     width: 3, //The line thickness
                     radius: 10, //The radius of the inner circle
                     color: '#000', // #rgb or #rrggbb
                     speed: 1, //Rounds per second
                     trail: 60, // Afterglow percentage
                     shadow: true //Whether to render a shadow
                    };

                    var spinner = new Spinner(opts).spin()

                    $('#loadingMore').append(spinner.el)

                    url = '/top_medias/'
                    url += mediaType

                    if(genreType)
                        url += '/' + genreType

                    url += '?page=' + page

                $.ajax({
                        cache: false,
                  url: url,
                  type: 'get',
                  dataType: 'script',
                  success: function(data) {
                    $('#loadingMore').html('');
                            loading = false
                  },
                        error: function() {
                            $('#loadingMore').html('<p>No more results could be found</p>')
                            loading = false
                        }
                });
              };

            $(window).scroll(function(){
                    did_scroll = true
            })

            setInterval(function(){
                if(did_scroll) {
                    if (loading) return;
                if (nearBottomofPage()) {
                      loading = true;
                      page++;
                        getMoreMedias(page, mediaType)
                        did_scroll = false
                }
                }
            }, 250)
        });

Is there any way to take what I have above and make it work if the page is accessed via Ajax (which is what the HTML5 plugin essentially does)?

Matt H · Accepted Answer · 2011-12-01 17:49:30Z

2

I'm not sure if this addresses your problem, but the statement that "it works when browsed but not when Ajax loads it" raised a flag to me - Javascript doesn't execute in Ajax loaded pages, rather you must eval() evaluate the Javascript.

What I do when I need this functionality is add a hidden <div> containing Javascript (without the `' tag and execute that after loading, e.g. (psuedo code)

$.ajax(url, success: function() { eval($('#ajax').html(); });

<div id="ajax" style="display:none"> alert('here'); </div>

answered Dec 1, 2011 at 17:49

Matt H

6,5502 gold badges32 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dennismonsewicz Over a year ago

Yeah sorry for the odd statement. I know that JS doesn't execute in Ajax loaded pages. You have to run the functionality after the AjaxComplete. Your tip is very helpful, though. Thanks!!

Matt H Over a year ago

Did you see if that's the problem? Put in an alert or a console.log to make sure the script is getting executed.

dennismonsewicz Over a year ago

Thanks so much for the help Matt!! I was able to get it working! The one thing I had to do was change .html() to .text(), but with your suggestion it works like a charm!

Collectives™ on Stack Overflow

HTML5 + jQuery + Infinite Scroll

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related