I wish to reload my page content only when pressing buttons on the menu. That way the menu will not reload when navigating. Then I want move the MP3 player I have on my pages to the menu so it'll keep playing when navigating.
Never used AJAX before, but from what I heard of it, it seems likes the solution I need, so I looked into this tutorial for the basics: http://www.tizag.com/ajaxTutorial/
I've got the AJAX part working fine, so now I need to modify the template so it'll only returns a part of the page when using AJAX. I found this topic for this: http://forum.cmsmadesimple.org/index.php?topic=33003.15
According to the topic I can use showtemplate=false. But that'll only return the {content}. I need a bit more however. There are a few smarty tags in the template besides the content tag that also need to execute even when using AJAX. Another possibility is using {if} tags. So when a button on the menu is pressed, I'll append a AJAX=true in the link. Which I check on using: {if $smarty.get.AJAX == "true"}.
The check works fine. I checked that using this code in my template:
Code: Select all
{if $smarty.get.AJAX == "true"}
AJAX request
{else}
Not an AJAX request
{/if}string(115) "Smarty error: [in tpl_body:21 line 132]: syntax error: mismatched tag {/if}. (Smarty_Compiler.class.php, line 2303)"
This is the template as I use it:
Code: Select all
{process_pagedata}
{cms_module module='VisitorStats'}
{register_user_block_tags}
{if $smarty.get.AJAX == "true"}
<h1>{title}</h1>
{content}
{else}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}
</head>
</__body onLoad="MyOnLoad()">
{literal}
<__script__ type="text/javascript">
function loadContent(contentUrl)
{
var ajaxRequest;
try
{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer Browsers
try
{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange =
function()
{
if(ajaxRequest.readyState == 4)
{
document.getElementById('content').innerHTML = ajaxRequest.responseText;
}
}
if (contentUrl.indexOf("?") >= 0)
ajaxRequest.open("GET", contentUrl + "&AJAX=true", true);
else
ajaxRequest.open("GET", contentUrl + "?AJAX=true", true);
ajaxRequest.send(null);
}
function MyOnLoad()
{
var menuElements = document.getElementById('menu').getElementsByTagName('a');
for(var i = 0, maxI = menuElements.length; i < maxI; ++i)
{
menuElements[i].onclick = Function("loadContent('" + menuElements[i].href + "');return false;");
}
}
</__script>
{/literal}
<table width="100%" class="canvas bgborder" cellspacing="2">
<tr>
<td class="canvasheaderfill bgmedium"></td>
<td class="canvasheader primarycolumn bgdark">
<div id="header">
{image src="xconedesign/header-music.png"}
</div>
</td>
<td class="canvasheaderfill bgmedium"></td>
</tr>
<tr>
<td class="canvasmenufill bglight"></td>
<td class="canvasmenu primarycolumn bgmedium">
<div id="menu">
{menu template='cssmenu.tpl'}
</div>
</td>
<td class="canvasmenufill bglight"></td>
</tr>
<tr>
<td class="canvascontentfill bgbright"></td>
<td class="canvascontent bglight primarycolumn">
<div id="content">
<h1>{title}</h1>
{content}
</div>
</td>
<td class="canvascontentfill bgbright"></td>
</tr>
<tr>
<td class="canvasfooterfill bglight"></td>
<td class="canvasfooter bgmedium primarycolumn">
<div id="footer">
{custom_copyright}
</div>
</td>
<td class="canvasfooterfill bglight"></td>
</tr>
</table>
<div class="canvasbottomfillwrapper">
<table width="100%" class="canvas bgborder" cellspacing="2">
<tr>
<td class="canvasbottomfill bgmedium"></td>
<td class="canvasbottom bgdark primarycolumn">
<div id="bottom"></div>
</td>
<td class="canvasbottomfill bgmedium"></td>
</tr>
</table>
</div>
<__body>
</__html>
{/if}
string(154) "Smarty error: [in module_db_tpl:News;summaryXC:Basic line 27]: [plugin] could not load plugin file 'block.groupbox.php' (core.load_plugins.php, line 124)".
Groupbox is a smarty block tag which I created myself. I admit, it's not created the way it should be, but it has worked fine all this time already. Only now using this {/if} tag it shows up.
If {/if} is placed directly behind " the error mentioned first occurs again, but then on another linenumber:
string(113) "Smarty error: [in tpl_body:21 line 3]: syntax error: mismatched tag {/if}. (Smarty_Compiler.class.php, line 2303)"
The big question: Why can't I put the {/if} tag where I want it? And more importantly, How can I fix it.
Thx in advance. Looking forward for some input!
Didn't even know they existed until you mentioned them. I'll have a look.