almost got the seemless ajax pagination right but help me spot the bug in my code
Design and Skin Customization
Your not really going to get this to work the way your doing it. Your best bet would be to include a seamless template with the loading div and an include in the same template for the list call, then another template for the row.
I'm assuming your using the SiteBuilder on your site, is that correct?
So in the code editor of your seamless page, just do an include of the template with your holding dive.
Site Builder Code Editor:
{jrCore_include template="my_featured_videos_index.tpl"}
Your my_featured_videos_index.tpl should have this:
<a name="featvids" id="featvids"></a>
<div class="item center" style="margin: 10px;padding-bottom: 10px;">
{jrSearch_module_form module="jrSeamless"}
<div class="clear"></div>
<div id="featuredvids">
{jrCore_include template="my_featured_videos_list.tpl"}
</div>
</div>
Your my_featured_videos_list.tpl should have this:
{jrSeamless_list modules="jrVimeo,jrVideo,jrYouTube" order_by="_updated desc" template="my_featured_videos_row.tpl" pagebreak=5 page=$_post.p}
And your my_featured_videos_row.tpl should have this:
{if isset($_items)}
{jrCore_module_url module="jrVimeo" assign="vmurl"}
{jrCore_module_url module="jrVideo" assign="dmurl"}
{jrCore_module_url module="jrYouTube" assign="ymurl"}
{foreach from=$_items item="item"}
{if $item.seamless_module_name == "jrVimeo"}
<div class="item">
<div class="container">
<div class="row">
<div class="col2">
<div class="block_image">
<a href="{$jamroom_url}/{$item.profile_url}/{$vmurl}/{$item._item_id}/{$item.vimeo_title_url}"><img src="{$item.vimeo_artwork_url}" class="iloutline img_scale"></a>
</div>
</div>
<div class="col6">
<div class="p5">
<h3><a href="{$jamroom_url}/{$item.profile_url}/{$vmurl}/{$item._item_id}/{$item.vimeo_title_url}">{$item.vimeo_title}</a></h3><br>
<span class="info">{jrCore_lang module="jrVimeo" id="35" default="Length"}:</span> <span class="info_c">{$item.vimeo_duration}</span>
</div>
</div>
<div class="col2">
<div class="p5">
{jrCore_module_function function="jrRating_form" type="star" module="jrVimeo" index="1" item_id=$item._item_id current=$item.vimeo_rating_1_average_count|default:0 votes=$item.vimeo_rating_1_count|default:0}
</div>
</div>
<div class="col2 last">
<div class="block_config">
{jrCore_item_list_buttons module="jrVimeo" item=$item}
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
{elseif $item.seamless_module_name == "jrVideo"}
<div class="item">
<div class="container">
<div class="row">
<div class="col2">
<div class="block_image">
<a href="{$jamroom_url}/{$item.profile_url}/{$dmurl}/{$item._item_id}/{$item.video_title|jrCore_url_string}">{jrCore_module_function function="jrImage_display" module="jrVideo" type="video_image" item_id=$item._item_id size="large" crop="auto" class="iloutline img_scale" alt=$item.video_title width=false height=false}</a>
</div>
</div>
<div class="col5">
<div class="p5">
<h3><a href="{$jamroom_url}/{$item.profile_url}/{$dmurl}/{$item._item_id}/{$item.video_title|jrCore_url_string}">{$item.video_title}</a></h3><br>
<span class="info">{jrCore_lang module="jrVideo" id="31" default="album"}:</span> <span class="info_c"><a href="{$jamroom_url}/{$item.profile_url}/{$dmurl}/albums/{$item.video_album_url}">{$item.video_album}</a></span><br>
{if isset($item.video_category) && strlen($item.video_category) > 0}
<span class="info">{jrCore_lang module="jrVideo" id="12" default="category"}:</span> <span class="info_c">{$item.video_category}</span><br>
{/if}
{jrCore_module_function function="jrRating_form" type="star" module="jrVideo" index="1" item_id=$item._item_id current=$item.video_rating_1_average_count|default:0 votes=$item.video_rating_1_count|default:0}
</div>
</div>
<div class="col5 last">
<div class="block_config">
{jrCore_item_list_buttons module="jrVideo" field="video_file" item=$item}
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
{elseif $item.seamless_module_name == "jrYouTube"}
<div class="item">
<div class="container">
<div class="row">
<div class="col2">
<div class="block_image">
<a href="{$jamroom_url}/{$item.profile_url}/{$ymurl}/{$item._item_id}/{$item.youtube_title_url}"><img src="{$item.youtube_artwork_url}" alt="{$item.youtube_title|jrCore_entity_string}" class="iloutline img_scale"></a>
</div>
</div>
<div class="col6">
<div class="p5">
<h3><a href="{$jamroom_url}/{$item.profile_url}/{$ymurl}/{$item._item_id}/{$item.youtube_title_url}">{$item.youtube_title}</a></h3><br>
<span class="info">{jrCore_lang module="jrYouTube" id="14" default="Category"}:</span> <span class="info_c">{$item.youtube_category}</span><br>
<span class="info">{jrCore_lang module="jrYouTube" id="35" default="Duration"}:</span> <span class="info_c">{$item.youtube_duration}</span>
</div>
</div>
<div class="col2">
<div class="p5">
{jrCore_module_function function="jrRating_form" type="star" module="jrYouTube" index="1" item_id=$item._item_id current=$item.youtube_rating_1_average_count|default:0 votes=$item.youtube_rating_1_count|default:0}
</div>
</div>
<div class="col2 last">
<div class="block_config">
{jrCore_item_list_buttons module="jrYouTube" item=$item}
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
{/if}
{/foreach}
{if $info.total_pages > 1}
<div class="block">
<table style="width:100%;">
<tr>
<td style="width:25%;">
{if isset($info.prev_page) && $info.prev_page > 0}
<input type="button" value="{jrCore_lang module="jrCore" id=26 default="<"}" class="form_button" onclick="jrLoad('#featuredvids','{$jamroom_url}/seamless_vids_list/p={$info.prev_page}/pb={$info.pagebreak}');$('html, body').animate({ scrollTop: $('#featvids').offset().top -100 }, 'slow');return false;">
{/if}
</td>
<td style="width:50%;text-align:center;">
{if $info.total_pages <= 5}
{$info.page} / {$info.total_pages}
{else}
<form name="form" method="post" action="_self">
<select name="pagenum" class="form_select" style="width:60px;" onchange="var sel=this.form.pagenum.options[this.form.pagenum.selectedIndex].value;jrLoad('#featuredvids','{$jamroom_url}/seamless_vids_list/p=' +sel+'/pb={$info.pagebreak}');$('html, body').animate({ scrollTop: $('#featvids').offset().top -100 }, 'slow');">
{for $pages=1 to $info.total_pages}
{if $info.page == $pages}
<option value="{$info.this_page}" selected="selected"> {$info.this_page}</option>
{else}
<option value="{$pages}"> {$pages}</option>
{/if}
{/for}
</select> / {$info.total_pages}
</form>
{/if}
</td>
<td style="width:25%;text-align:right;">
{if isset($info.next_page) && $info.next_page > 1}
<input type="button" value="{jrCore_lang module="jrCore" id=27 default=">"}" class="form_button" onclick="jrLoad('#featuredvids','{$jamroom_url}/seamless_vids_list/p={$info.next_page}/pb={$info.pagebreak}');$('html, body').animate({ scrollTop: $('#featvids').offset().top -100 }, 'slow');return false;">
{/if}
</td>
</tr>
</table>
</div>
{/if}
{/if}
I've done some testing with but I'm seeing an issue with pagination not working at all with the seamless module, I'll let Paul know and see if he can figure it out.
Hope this helps!
