CMS Made Simple Forums

Content management as it is meant to be
https://forum.cmsmadesimple.org/

Display inline

https://forum.cmsmadesimple.org/viewtopic.php?t=81581

Page 1 of 1

Display inline

Posted: Tue Sep 10, 2019 6:01 pm
by musicscore
Hey you all.
My module is almost working as I planned but I'm facing one unsolved problem.

I have a php file pointing to a template :

Code: Select all

<?php

if( !defined('CMS_VERSION') ) exit;

$query = new CategoryQuery;
$categorys = $query->GetMatches();

$sql = 'SELECT SQL_CALC_FOUND_ROWS H.* FROM '.CMS_DB_PREFIX.'mod_msfaq_questions H WHERE category = "'.$params['cname'].'" ORDER BY question';
$arr = $db->GetArray($sql);

$tpl = $smarty->CreateTemplate($this->GetTemplateResource('default.tpl'),null,null,$smarty);
$tpl->assign('questions',$arr);
$tpl->assign('categorys',$categorys);
$tpl->display();

?>
The template looks like this :

Code: Select all

<div class="msfaq_wrapper">
template
	<div id="categoryBlock">
		{foreach $categorys as $category}
			<div class="category">
				<div class="row">
					<div class="categoryline"><a href="{cms_action_url action='default' cname=$category->category_name}">{$category->category_name}</a>
					</div>
				</div>
			</div> 
		{foreachelse}     
			<div class=”noquestions”>{$mod->Lang('noquestion')}</div>
		{/foreach}
	</div>
	
		<div id="questionAnswerBlock">
			{foreach from=$questions item=value}
			<div class="questionAnswer">
				<div class="question">{$value.question}</div>
				<div class="answer">{$value.answer}</div>
			</div>
		{/foreach} 
	</div>
</div>
Now I want to click on a category and the result must be displayed on the place of the tag on the page. (Inline I think this is called).
Now when I click on the

Code: Select all

<div class="categoryline"><a href="{cms_action_url action='default' cname=$category->category_name}">{$category->category_name}</a>
and the module tag is on a separate div on a page, an new section is opend.

What code do I need to put in the php file or template to replace the module tag and not create a new section?

Please help.

TIA

Re: Display inline

Posted: Wed Sep 11, 2019 2:01 pm
by musicscore
Anyone ?

I'm building a module and want the replace the tag and not the page.

Please help

TIA

Re: Display inline

Posted: Wed Sep 11, 2019 5:11 pm
by Rolf
Did you try:

Code: Select all

<a href="{cms_action_url action='default' cname=$category->category_name}&showtemplate=false">{$category->category_name}</a>

Re: Display inline

Posted: Wed Sep 11, 2019 8:11 pm
by calguy1000
The {cms_action_url} plugin does not support creating inline URL's. You would have to use the create_url() method of the module API and pass in the inline flag and assign the output from that method to a smarty variable.

That said.. I would recommend that you not use inline mode unless absolutely necessary as inline URLS cannot be pretty. and, I have found that it is counter intuitive. When you click on a link you largely expect that the content you have selected will appear in the prominent area of the page, not a sidebar etc. And 99% of the time the {content} block should represent the location where the primary information is displayed.

Re: Display inline

Posted: Sat Sep 14, 2019 7:24 pm
by musicscore
Calguy1000

Thank you for your answer.

What I did was create a website where all the pages are displayed on one page. I used the tips on cmscanbesimple.org.
https://cmscanbesimple.org/blog/multipl ... query-tabs
I used the CGSimpleSmarty module as mentioned in the tip.

On one of the pages I want to use my module to display faq's.
Clicking on a category should display the questions in that category.

But when I click on a category the template replaces the content tag meaning the questions are not opened in the section where the category's are displayed.

You can see the problem on my test website
test.dev-infowebs.nl
Goto FAQ and click a category.

So I want the FAQ template to replace the faq-tag, not the content-tag

Please help

Re: Display inline

Posted: Sat Sep 14, 2019 8:18 pm
by calguy1000
Well, any link you generate will result in a page reload, and therefore a scroll. An inline link if you generated it properly using the create_url() method in the module API would generate the URL Properly, but would result in a page reload and a scroll.

In a single-page-app such as this you probably don't really want the thing to scroll every time you click something. I would just load the content via ajax. Which is pretty simple with jquery. The URL will not change, and there will be no scroll.

So if your category list template had:

<div id="mymodule">
{foreach $categories as $category}
<a href="{cms_action_url action='default' cname=$category->category_name}&showtemplate=false">{$category->category_name}</a>
{/foreach}
</div>

You could have a script section like (untested):
<__script__>
$(function(){
$('#mymodule a').click(function(ev){
ev.PreventDefault()
let href = $(this).attr('href')
$('#mymodule').load(href);
})
})
</__script>

Re: Display inline

Posted: Sun Sep 15, 2019 9:55 am
by musicscore
Calguy1000

Thank you very much for this explanation.
I'm gonna try to use this jquery tip and let you know if was able to get it to work.

Re: Display inline

Posted: Wed Sep 18, 2019 2:52 pm
by musicscore
I,m losing the battle. >:D

This is my template :

Code: Select all

<div class="msfaq_wrapper">

	<div id="categoryBlock">
		{foreach $categorys as $category}
			<div class="category">
				<div class="row">
					<div class="categoryline">
					<a href="{cms_action_url action='default' cname=$category->category_name}&showtemplate=false">{$category->category_name}</a>
					</div>
				</div>
			</div> 
		{foreachelse}     
			<div class=”noquestions”>{$mod->Lang('noquestion')}</div>
		{/foreach}
	</div>
	
	<div id="questionAnswerBlock">
				Question Answer Test
		{foreach from=$questions item=value}
			<div class="questionAnswer">
				<div class="question">{$value.question}</div>
				<div class="answer">{$value.answer}</div>
			</div>
		{/foreach} 
	</div>
</div>
And this is my php script :

Code: Select all

<?php

if( !defined('CMS_VERSION') ) exit;

$query = new CategoryQuery;
$categorys = $query->GetMatches();

$sql = 'SELECT SQL_CALC_FOUND_ROWS H.* FROM '.CMS_DB_PREFIX.'mod_msfaq_questions H WHERE category = "'.$params['cname'].'" ORDER BY question';
$arr = $db->GetArray($sql);

$tpl = $smarty->CreateTemplate($this->GetTemplateResource('default.tpl'),null,null,$smarty);
$tpl->assign('questions',$arr);
$tpl->assign('categorys',$categorys);
print_r($params);
$tpl->display();
?>
Here is my jquery script :

Code: Select all

$(function(){
	$('.categoryline a').click(function(ev){
	ev.PreventDefault();
	let href = $(this).attr('href');
	$('#faqmodule').load(href);
	})
})
When I click on a category, it opens a new page containing only the category's and the answers.

Test Here : http://test.dev-infowebs.nl/#faq

What is wrong in my code ?

I'm testing for over a week now, searching and searching what is wrong.

Please help.

Re: Display inline

Posted: Thu Sep 19, 2019 8:48 am
by Rolf
Looks to me your module *is* working, but it is a jQuery issue changing the content at that spot...

Great website by the way!!

Re: Display inline

Posted: Fri Sep 20, 2019 8:14 am
by velden
reload.js:

Code: Select all

$(function(){
	$('.categoryline a').click(function(ev){
	ev.preventDefault();
	let href = $(this).attr('href');
	$('#faqmodule').load(href);
	})
})
PreventDefault vs. preventDefault.

Re: Display inline

Posted: Fri Sep 20, 2019 10:43 am
by musicscore
Thank you Calguy1000 en Velden.

I got it working :

To help others, here is my code :

action.default.php

Code: Select all

<?php

if( !defined('CMS_VERSION') ) exit;

$query = new CategoryQuery;
$categorys = $query->GetMatches();

$sql = 'SELECT SQL_CALC_FOUND_ROWS H.* FROM '.CMS_DB_PREFIX.'mod_msfaq_questions H WHERE category = "'.$params['cname'].'" ORDER BY question';
$arr = $db->GetArray($sql);

$tpl = $smarty->CreateTemplate($this->GetTemplateResource('default.tpl'),null,null,$smarty);
	
$tpl->assign('questions',$arr);
$tpl->assign('categorys',$categorys);
$tpl->display();

?>
default.tpl

Code: Select all

<div class="msfaq_wrapper">

	<div id="categoryBlock">
		{foreach $categorys as $category}
			<div class="category">
				<div class="row">
					<div class="categoryline">
					<a href="{cms_action_url action='default' cname=$category->category_name}&showtemplate=false">{$category->category_name}</a>
					</div>
				</div>
			</div> 
		{foreachelse}     
			<div class=”noquestions”>{$mod->Lang('noquestion')}</div>
		{/foreach}
	</div>
	
	<div id="questionAnswerBlock">
				Question Answer Test
		{foreach from=$questions item=value}
			<div class="questionAnswer">
				<div class="question">{$value.question}</div>
				<div class="answer">{$value.answer}</div>
			</div>
		{/foreach} 
	</div>
</div>

<__script__ src="assets/scripts/reload.js"></__script>
reload.js

Code: Select all

$(function(){
	$('.categoryline a').click(function(ev){
	ev.preventDefault();
	let href = $(this).attr('href');
	$('#faqmodule').load(href); 
	})
})
Thank you guys. You are the best and you saved my day.

[Solved] Display inline

Posted: Sun Sep 22, 2019 3:30 pm
by musicscore
It's working
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited