Skip to content

Commit 3ae5b4e

Browse files
fiegfieg
committed
no longer caching $itemsContainer + reinitialize method (fixes #153)
1 parent 8d3fdac commit 3ae5b4e

File tree

7 files changed

+239
-8
lines changed

7 files changed

+239
-8
lines changed

‎doc/methods.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,14 @@ Initializes Infinite AJAX Scroll. Normally this happens when the DOM is ready (`
2929
jQuery.ias().initialize();
3030
```
3131

32+
### reinitialize
33+
34+
Reinitializes Infinite AJAX Scroll after a DOM update. DOM updates could be made by page updates via AJAX, like changing the sorting of a list, or filtering a result.
35+
36+
```javascript
37+
jQuery.ias().reinitialize();
38+
```
39+
3240
### next
3341

3442
Loads the next page.

‎src/jquery-ias.js‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@
2323
this.nextSelector = options.next;
2424
this.paginationSelector = options.pagination;
2525
this.$scrollContainer = $element;
26-
this.$itemsContainer = $(this.itemsContainerSelector);
2726
this.$container = (window === $element.get(0) ? $(document) : $element);
2827
this.defaultDelay = options.delay;
2928
this.negativeMargin = options.negativeMargin;
@@ -70,14 +69,24 @@
7069
}
7170
};
7271

72+
/**
73+
* Returns the items container currently in the DOM
74+
*
75+
* @private
76+
* @returns {object}
77+
*/
78+
this.getItemsContainer = function() {
79+
return $(this.itemsContainerSelector);
80+
};
81+
7382
/**
7483
* Returns the last item currently in the DOM
7584
*
7685
* @private
7786
* @returns {object}
7887
*/
7988
this.getLastItem = function() {
80-
return $(this.itemSelector, this.$itemsContainer.get(0)).last();
89+
return $(this.itemSelector, this.getItemsContainer().get(0)).last();
8190
};
8291

8392
/**
@@ -87,7 +96,7 @@
8796
* @returns {object}
8897
*/
8998
this.getFirstItem = function() {
90-
return $(this.itemSelector, this.$itemsContainer.get(0)).first();
99+
return $(this.itemSelector, this.getItemsContainer().get(0)).first();
91100
};
92101

93102
/**
@@ -146,9 +155,7 @@
146155
* @private
147156
*/
148157
this.getNextUrl = function(container) {
149-
if (!container) {
150-
container = this.$container;
151-
}
158+
container = container || this.$container;
152159

153160
// always take the last matching item
154161
return $(this.nextSelector, container).last().attr('href');
@@ -346,6 +353,16 @@
346353
return this;
347354
};
348355

356+
/**
357+
* Reinitializes IAS, for example after an ajax page update
358+
*
359+
* @public
360+
*/
361+
IAS.prototype.reinitialize = function () {
362+
this.unbind();
363+
this.initialize();
364+
};
365+
349366
/**
350367
* Binds IAS to DOM events
351368
*

‎test/03-extensions-test.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,10 +68,13 @@ describe("IAS", function () {
6868
};
6969

7070
anExtension.prototype.bind = function(ias) {
71+
};
72+
73+
anExtension.prototype.initialize = function(ias) {
7174
jQuery.extend(ias.listeners, this.listeners);
7275
};
7376

74-
// when the extension isn't bound, this will throw an error
77+
// when the extension isn't added, this will throw an error
7578
expect(
7679
function () {
7780
jQuery.ias().on('test', function () {

‎test/06-ajax-test.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
var ias;
2+
3+
describe("IAS", function () {
4+
before(function() {
5+
this.timeout = 10000;
6+
7+
window.scrollTo(0, 0);
8+
9+
ias = jQuery.ias({
10+
container : '.listing',
11+
item: '.post',
12+
pagination: '.navigation',
13+
next: '.next-posts a'
14+
});
15+
16+
ias.extension(new IASSpinnerExtension());
17+
ias.extension(new IASNoneLeftExtension());
18+
});
19+
20+
after(function() {
21+
ias.destroy();
22+
});
23+
24+
it("should keep working when items container gets updated", function() {
25+
var deferred = when.defer();
26+
27+
expect($('#post11').length).toEqual(0);
28+
expect($('#post21').length).toEqual(0);
29+
30+
// assert page2
31+
scrollDown().then(function() {
32+
wait(2000).then(function() {
33+
expect($('#post11').length).toEqual(1);
34+
35+
// now simulate a ajax request that filters the results
36+
$("#content").load('ajax1.html', function() {
37+
expect($('#ajax1').length).toEqual(1);
38+
expect($('#post11').length).toEqual(0);
39+
40+
ias.reinitialize();
41+
42+
wait(1000).then(function() {
43+
// assert next page
44+
scrollDown().then(function() {
45+
wait(2000).then(function() {
46+
expect($('#ajax11').length).toEqual(1);
47+
expect($('#post11').length).toEqual(0);
48+
expect($('#post21').length).toEqual(0);
49+
50+
deferred.resolve();
51+
});
52+
});
53+
});
54+
});
55+
});
56+
});
57+
58+
return deferred.promise;
59+
});
60+
});

‎test/buster.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@ config["My tests"] = {
3030
{ path: "/page2.html", file: "test/fixtures/page2.html" },
3131
{ path: "/page3.html", file: "test/fixtures/page3.html" },
3232
{ path: "/framed.html", file: "test/fixtures/framed.html" },
33-
{ path: "/short.html", file: "test/fixtures/short.html" }
33+
{ path: "/short.html", file: "test/fixtures/short.html" },
34+
{ path: "/ajax1.html", file: "test/fixtures/ajax1.html" },
35+
{ path: "/ajax2.html", file: "test/fixtures/ajax2.html" }
3436
],
3537
specs: [
3638
"test/*-test.js"

‎test/fixtures/ajax1.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5+
<title>Ajax</title>
6+
</head>
7+
<body>
8+
<div id="content">
9+
<div class="listing">
10+
<div class="post" id="ajax1">
11+
<strong>ajax 1</strong>
12+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
13+
</div>
14+
15+
<div class="post">
16+
<strong>ajax 2</strong>
17+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
18+
</div>
19+
20+
<div class="post">
21+
<strong>ajax 3</strong>
22+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
23+
</div>
24+
25+
<div class="post">
26+
<strong>ajax 4</strong>
27+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
28+
</div>
29+
30+
<div class="post">
31+
<strong>ajax 5</strong>
32+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
33+
</div>
34+
35+
<div class="post">
36+
<strong>ajax 6</strong>
37+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
38+
</div>
39+
40+
<div class="post">
41+
<strong>ajax 7</strong>
42+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
43+
</div>
44+
45+
<div class="post">
46+
<strong>ajax 8</strong>
47+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
48+
</div>
49+
50+
<div class="post">
51+
<strong>ajax 9</strong>
52+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
53+
</div>
54+
55+
<div class="post">
56+
<strong>ajax 10</strong>
57+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
58+
</div>
59+
</div>
60+
61+
<div class="navigation">
62+
<ul>
63+
<li>1</li>
64+
<li><a href="ajax2.html">2</a></li>
65+
<li class="next-posts"><a href="ajax2.html">next</a></li>
66+
</ul>
67+
</div>
68+
</div>
69+
70+
</body>
71+
</html>

‎test/fixtures/ajax2.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5+
<title>Ajax</title>
6+
</head>
7+
<body>
8+
<div id="content">
9+
<div class="listing">
10+
<div class="post" id="ajax11">
11+
<strong>ajax 11</strong>
12+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
13+
</div>
14+
15+
<div class="post">
16+
<strong>ajax 12</strong>
17+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
18+
</div>
19+
20+
<div class="post">
21+
<strong>ajax 13</strong>
22+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
23+
</div>
24+
25+
<div class="post">
26+
<strong>ajax 14</strong>
27+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
28+
</div>
29+
30+
<div class="post">
31+
<strong>ajax 15</strong>
32+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
33+
</div>
34+
35+
<div class="post">
36+
<strong>ajax 16</strong>
37+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
38+
</div>
39+
40+
<div class="post">
41+
<strong>ajax 17</strong>
42+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
43+
</div>
44+
45+
<div class="post">
46+
<strong>ajax 18</strong>
47+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
48+
</div>
49+
50+
<div class="post">
51+
<strong>ajax 19</strong>
52+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
53+
</div>
54+
55+
<div class="post">
56+
<strong>ajax 20</strong>
57+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
58+
</div>
59+
</div>
60+
61+
<div class="navigation">
62+
<ul>
63+
<li><a href="ajax1.html">1</a></li>
64+
<li>2</li>
65+
</ul>
66+
</div>
67+
</div>
68+
69+
</body>
70+
</html>

0 commit comments

Comments
 (0)