Habe es nun selbst geschafft. Hier dir Code für Interessenten:
.tpl Datei:
Code:
<?php if (count($this->entries)): ?>
<div class="layout_full endlesspage" id="<?php echo $this->entries[0]['tablename']; ?>_endlessscroll">
<?php $GLOBALS['TL_JAVASCRIPT'][] = 'tl_files/endlesscataloglist.js'; ?>
<script type="text/javascript">
window.addEvent('domready', function(){
new AjaxEndlessCatalogList({
id: "<?php echo $this->entries[0]['tablename']; ?>_endlessscroll"
});
$('next').addEvent('click', function(event){
new AjaxEndlessCatalogList({
id: "<?php echo $this->entries[0]['tablename']; ?>_endlessscroll"
});
});
$('previous').addEvent('click', function(event){
new AjaxEndlessCatalogList({
id: "<?php echo $this->entries[0]['tablename']; ?>_endlessscroll"
});
});
});
</script>
<?php
$count = 1; ?>
<?php foreach ($this->entries as $entry): ?>
<?php
if($count == 4 )
$count = 1;
?>
<div id="<?php echo $count;?>" class="item <?php echo $entry['class'] ? ' '.$entry['class'] : ''; ?>">
<?php if($entry['linkEdit']): ?><?php echo $entry['linkEdit']; ?><?php endif; ?>
<?php foreach ($entry['data'] as $field=>$data): ?>
<?php if (strlen($data['raw']) && !in_array($field, array('catalog_name','parentJumpTo'))): ?>
<div class="field <?php echo $field; ?>">
<div class="value"><?php echo $data['value']; ?></div>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
<?php $count++;?>
<?php endforeach; ?>
</div>
<div class="buttons">
<a id="next" href="javascript:void(0)">next</a>
<a id="previous" href="javascript:void(0)">previous</a>
</div>
<?php else: ?>
<p class="info">Invalid item reference for catalog.</p>
<?php endif; ?>
.js-Datei:
Code:
/**
* Class AjaxEndlessCatalogList
*
* And endless scrolling page script for catalog lists.
* @copyright CyberSpectrum 2011
* @author Christian Schiffler <http://www.cyberspectrum.de>
*/
var AjaxEndlessCatalogList = new Class({
Implements: [Options],
options:{
scrollOffset:200
},
urls:[],
bgurls:[],
lastAct: 1,
request: null,
dummyFormElement:new Element('div'),
RequestClass: new Class({
Extends: Request,
options: {
evalScripts: false,
evalResponse: false
},
success: function(text, xml)
{
var js;
text = text.stripScripts(function(script){js = script;});
js = js.replace("/<!--|//-->|<![CDATA[//>|<!]]>/g", '');
this.onSuccess(text, xml, js);
}
}),
initialize:function(options)
{
this.lastAct=1;
this.setOptions(options);
this.grabPagination();
this.addListener();
$(this.options.id).store('scroller', this);
},
grabPagination: function(container)
{
var flag={beyondcurrent:false};
var cont=(!container)?$(this.options.id).getParent():container;
// find pagination
$$(cont.getElements('div.pagination li')).filter((function(e, idx, arr){
var e2;
if((e2=e.getElement('span')) && e2.hasClass('current')){this.beyondcurrent=true;return false};
e2=e.getElement('a');
return this.beyondcurrent && e2 && !(e2.hasClass('prev') || e2.hasClass('next') || e2.hasClass('first') || e2.hasClass('last'));
}).bind(flag)).each((function(e)
{
var url = e.getElement('a').href;
if(!this.urls.contains(url)) {
this.urls.push(url);
this.bgurls.push(url);
}
}).bind(this));
if(!container) {
if(cont.getElement('div.pagination')==null)
{
}
else
{
this.bgurls.unshift('http://'+location.host+location.pathname+'?page=1');
cont.getElement('div.pagination').destroy()
}
}
},
getNextPage: function()
{
if(this.request)
{
return;
}
if(this.lastAct==2)
{
var temp = this.urls.shift();
}
var url = this.urls.shift();
if(!url)
return;
var spinner = new Spinner(this.options.id, {
img:{ 'style': 'background: url("tl_files/template/Loading.gif") no-repeat fixed center center transparent; width: 720px; height:215px; '},
content: {'style':'background-color: #000; margin-top:-20px; margin-left:-20px;'}
}).show();
// now load via ajax.
this.lastAct=1;
this.request = new this.RequestClass({
'link': 'chain',
'method': 'get',
url: url,
onSuccess: (function(text, xml, js){spinner.destroy();this.request=null; this.pageLoaded(text, xml, js);}).bind(this)
}).send();
},
getPrevPage: function()
{
if(this.request)
{
return;
}
if(this.urls.length>=this.bgurls.length)
return;
var tlang = this.bgurls.length;
var templang = this.urls.length;
var lang = tlang - templang;
lang--;
if(this.lastAct==1)
{
this.urls.unshift(this.bgurls[lang]);
lang--;
this.urls.unshift(this.bgurls[lang]);
}
else {
this.urls.unshift(this.bgurls[lang]);
}
var url = this.bgurls[lang];
if(!url)
return;
var spinner = new Spinner(this.options.id, {
img:{ 'style': 'background: url("tl_files/template/Loading.gif") no-repeat fixed center center transparent; width: 720px; height:215px; '},
content: {'style':'background-color: #000; margin-top:-20px; margin-left:-20px;'}
}).show();
// now load via ajax.
this.lastAct=2;
this.request = new this.RequestClass({
'link': 'chain',
'method': 'get',
url: url,
onSuccess: (function(text, xml, js){spinner.destroy();this.request=null; this.pageLoaded(text, xml, js);}).bind(this)
}).send();
},
pageLoaded: function(text, xml, js)
{
var el=Elements.from(text);
var id=this.options.id;
var scanNode=function(e)
{
// skip text nodes
if(!e)return null;
if(e.id==id)return e;
var childNode, i = -1, childNodes = e.childNodes;
while((childNodes.length>++i) && (childNode = childNodes.item(i)))
{
var tmp2=scanNode(childNode);
if(tmp2)
return tmp2;
}
}
var e=null;
for(var i=0;i<el.length;i++)
{
e = scanNode(el[i]);
if(e)
break;
}
if(e)
{
$('1').dispose();
$('2').dispose();
$('3').dispose();
$(this.options.id).adopt($(e).getChildren());
}
// TODO: execute all javascript we got in this request. To handle MediaBox etc.
},
addListener: function()
{
$('next').addEvent('click', (function()
{
this.getNextPage();
}).bind(this));
$('previous').addEvent('click', (function()
{
this.getPrevPage();
}).bind(this));
}
});
Nun habe ich noch eine Frage:
Beachte weiterhin, in den nachgeladenen Objekten werden keine Javascriptaufrufe ausgewertet. d.h. Mediabox wird nicht funktionieren.
Aus was für einen Grund werden keine Javascriptaufrufe ausgewertet?
mfg
Katalog Liste via Ajax nachladen
Lesezeichen