News module, AJAX switching

[testuser]

Hi,

I have a loot of news articles in my CMSMS, and want to switch News pages with AJAX.

Links to pages are here:

Code: Select all

<a href="http://example.com/index.php?mact=News,mba44a,default,2&mba44acategory=news&mba44anumber=2&mba44asummarytemplate=news&mba44apagenumber=2&mba44areturnid=2&page=2">1</a>
<a href="http://example.com/index.php?mact=News,mba44a,default,1&mba44acategory=news&mba44anumber=2&mba44asummarytemplate=news&mba44apagenumber=2&mba44areturnid=2&page=1">2</a>
...

Is there a possibility how to return only the News data, not the whole page to AJAX? Yes, I can call AJAX, make a request to database and return only rows from DB. But I´d like to use built functions of this module, if possible.

Do the News module in the newest version make AJAX pager?

Thanks.

[velden]

Easy: http://calguy1000.com/Blogs/9/60.html

[testuser]

velden
Thanks for your post, but I don´t need to load the content, but next page. It should be different task than you wrote.

I have, let´s say, 10 news articles, show 3 in page. When I click to the second page, I need call AJAX and take next three articles from database. With a container reload only, not the whole website.

And it doesn´t matter if it will be in News or CGBlog module. I can choose one of them (or anything else).

Thanks for replies.

[velden]

Well, then make the 'next page' and 'previous page' links use ajax.

This post is about CGCalendar module, but same idea I guess. (note that forum rewrites script tags!!)

Temporary result (just proof of concept) can be viewed here: http://tinyurl.com/p3dz2da

Note that only november and december 2013 have events in that example.

[testuser]

velden
I used your solution, but I have a problem. The AJAX call returns me the whole website code, not only the news box (at your page you received only the calendar code).

In Firebug > Net > XHR I see the whole website in my case, the calendar in your case.

Any idea?

If you want/need, I can send you a link to my website. I prefer sending via mail, I don´t want to send a link here

Code: Select all

<__script__ src="http://code.jquery.com/jquery-latest.js"></__script>
<__script__ type='text/javascript'>
	function ajax_load(url, dest) {
		var tmp = url + "&showtemplate=false";
		var tmp2 = tmp.replace(/amp;/g,'');
		$(dest).load(tmp2); 
	}
</__script>

<ul id="news">
	<li>
		<h2>First news article</h2>
		<span class="date">07. 12. 2011</span>
		<p>First news</p>
	</li>

	<p>
		<a href="http://example.com/index.php?mact=News,mbe3a7,default,1&mbe3a7category=homepage&mbe3a7number=2&mbe3a7summarytemplate=news_hp&mbe3a7pagenumber=1&mbe3a7returnid=2&mbe3a7returnid=2&page=2" onclick="ajax_load('http://example.com/index.php?mact=News,mbe3a7,default,1&mbe3a7category=homepage&mbe3a7number=2&mbe3a7summarytemplate=news_hp&mbe3a7pagenumber=1&mbe3a7returnid=2&mbe3a7returnid=2&page=2', '#news'); return false;">1</a>
		<a href="http://example.com/index.php?mact=News,mbe3a7,default,1&mbe3a7category=homepage&mbe3a7number=2&mbe3a7summarytemplate=news_hp&mbe3a7pagenumber=2&mbe3a7returnid=2&mbe3a7returnid=2&page=2" onclick="ajax_load('http://example.com/index.php?mact=News,mbe3a7,default,1&mbe3a7category=homepage&mbe3a7number=2&mbe3a7summarytemplate=news_hp&mbe3a7pagenumber=2&mbe3a7returnid=2&mbe3a7returnid=2&page=2', '#news'); return false;">2</a>
	</p>

</ul>

The <p> element should be outside the ul#news, but it´s not the problem now.

Thanks.

[velden]

I think that has to do with whether it's used 'inline' or not.

In the calendar example I explicitly used 'inline=0'. But I don't see that option/parameter in the News module.

If it does not support that, it might be hard to accomplish what you want.

NOT inline means in CMSMS that the {content} tag will be 'replaced' with the output of the module only.
'?showtemplate=false' make the url only return the content of {content}.

So it's that combination that makes things work.

If you say you see the 'whole website' returned that would mean the 'showtemplate' parameter is not used... Else you'd see only the {content} part returned.

Not sure now if there is a proper solution.

[testuser]

Hm, strange.

I tried to download and install CGBlog, ad manually to URL showtemplate=false parameter, into module call I added inline=1 (tried to change that to inline=0) and everything is the same, the whole website is returned.

Can I send you a link to that website via mail, maybe there is a mistake I´m able to find...

[velden]

Not that easy as I initially thought it was...

Maybe I'm now thinking too complicated but I have it working on my test-site (link: http://tinyurl.com/p3dz2da)

Short explanation: created an extra page with inside the content ONLY the news module tag (so better turn of wysiwyg for that page).
Hide the page from the menu (didn't do that for this example/test)

Code: Select all

{News pagelimit=2}

Make sure that the PAGE template has the javascript fucntion 'ajax_load' already loaded/defined.

Code: Select all

{* javascript stuff that will perform ajax calls *}
<__script__ type='text/javascript'>
/* <![CDATA[ */
{literal}
function ajax_load(url,dest)
{  
 var tmp = url + "&showtemplate=false";
 var tmp2 = tmp.replace(/amp;/g,'');
 $(dest).load(tmp2); 
}
{/literal}
/* ]]> */
</__script>

In the PAGE template I load the news module with load_ajax (news page has alias 'news' in this case):

Code: Select all

 <div id="sidebar-news">
<__script__ type="text/javascript">
ajax_load('{cms_selflink href="news"}','div#sidebar-news');
</__script>
              </div>

Inside the news template I used this code for the previous and next links:

Code: Select all

{if $pagecount > 1}
  <p>
{if $pagenumber > 1}
<a href="{$prevurl}" onClick="ajax_load('{$prevurl}','div#sidebar-news');return false;"><</a>&nbsp;
{/if}
{$pagetext}&nbsp;{$pagenumber}&nbsp;{$oftext}&nbsp;{$pagecount}
{if $pagenumber < $pagecount}
&nbsp;<a href="{$nexturl}" onClick="ajax_load('{$nexturl}','div#sidebar-news');return false;">></a>

{/if}
</p>
{/if}

It's only for testing and proof of concept. Code probably could be nicer but don't have much time now.

[testuser]

velden:
I´m still doing st. bad, but I don´t know what. I tried to go step by step as you wrote in previous post. The result is the same.

For sure, I write there steps I made:
1. created page with alias "test" - hidden in menu. The content of this page is

Code: Select all

{CGBlog category='homepage' number=2 summarytemplate='news_hp' inline=1}

2. in template in <head> (in this testing case) I linked the newest jQuery and defined the function
3. in template (the News section should be in all pages) I called the ajax_load function.

Code: Select all

<ul id=news>
    <__script__ type="text/javascript">
        ajax_load('{cms_selflink href="test"}','ul#news'); // test is the page alias of page created in step no. 1. (as the first param I tried to use "home", it´s the page alias of the site where currently I´m)
    </__script>
</ul>

4. in news_hp template I have:

Code: Select all

{foreach from=$items item=entry}
	...
{/foreach}

{if $pagecount > 1}
	<p>
		{if $pagenumber > 1}
			<a href="{$prevurl}" onClick="ajax_load('{$prevurl}','#news');return false;"><</a> 
		{/if}
		{$pagetext} {$pagenumber} {$oftext} {$pagecount}
		{if $pagenumber < $pagecount}
			<a href="{$nexturl}" onClick="ajax_load('{$nexturl}','#news');return false;">></a>
		{/if}
	</p>
{/if}

I think I made everything as you wrote. Is there something I missed?

Thanks for your time!

[testuser]

Ha, bingo!

It works for me now, I tried to make a few changes there and it works. I don´t know what I exactly changed, but it´s okay now.

I only need to update code, to write that idea better.

You´re great, thank you.