First: Thanks at all, which worked on (and are still working on) this great "CMF" - I used Typo3 before because I wanted to start with a big CMS which allows almost everything - and finally got extremely disappointed (after working three month day and night). As soon as you reach the limits of "Typoscript" it gets really hard to dig your way through the core of Typo3. But with ModX it seems much easier - I just love it!
... but now I want to show you some kind of "tutorial" and ask for your oppinion. I don´t have too much time to describe everything in detail (and my english isn´t too good), if you are interested I could complete it later ...
[modified]:
on my current project you can have a look at it. But it is not allways available and will move soon!
http://temp.paarplatz.com/index.php?id=24
click on the items in the menu-tree! the cursor doens´t change (because I removed the href) and I didn´t include an CSS ...
http://temp.paarplatz.com/index.php?id=17&field=content&docid=1
This page includes the GetField-Snippet. Play with the parameters of the URL!
http://temp.paarplatz.com/
I used a more complex version of this script for the footermenu (right/bottom)
my way to ajaxify modX
It is best, if you do this tutorial with an already existing (test)page, because you need some content to look at ;-)
used SW (in my case, I don´t know if it works with older SW):
- ModX 0.9.6 RC1 (you need Mootools! if you use a older version, get mootools from
http://mootools.net/download and link it in the template)
- Wayfinder 2.0
- MooTools
- a modified version of the Snippet "GetField"
1. install the RequestField Snippet
I modified the GetField Snippet from Grzegorz Adamiak [grad] in order to set the parameters in the URL (via Post/Get). All GetField parameters still work. There is one more Option ...
# $getorder [ 0 | 1 ]
# Specifies which parameters are processed first:
# - $getorder = 0 - $_REQUEST will overwrite Snippet-settings.
# - $getorder = 1 - Snippet-settings will overwrite $_REQUEST.
# ($getorder will ALLWAYS be overwritten by $_REQUEST)
# Default: 0
... and the possibility to set the parameters like:
index.php?id=XX&field=id&docid=12
(in my case the Snippet-call is on page id XX)
you can either (if you already have V1.3 installed) change the content of the GetField Snippet with the code, or install it from the attached archive.
<?php
/*
==================================================
RequestField - modified Version GetField
==================================================
Returns any document field or template variable from any document or any of its parents.
Author: Grzegorz Adamiak [grad], added $_REQUEST support by Tobias Zucali [raum]
Version: 1.3 beta @2006-11-08 14:40:04
License: LGPL
MODx: 0.9.2.1+
See GetField.txt for instructions and version history.
--------------------------------------------------
*/
/* Parameters
----------------------------------------------- */
# $getorder [ 0 | 1 ]
# Specifies which parameters are processed first:
# - $getorder = 0 - $_REQUEST will overwrite Snippet-settings.
# - $getorder = 1 - Snippet-settings will overwrite $_REQUEST.
# ($getorder will ALLWAYS be overwritten by $_REQUEST)
# Default: 0
$gfSnippetSetting = (isset($getorder)) ? $getorder : 0;
$gfBoolGetOrder = (!empty($_REQUEST) && isset($_REQUEST['getorder'])) ? $_REQUEST['getorder'] : $gfSnippetSetting;
unset($gfSnippetSetting);
# $docid [ int ]
# ID of the document for which to get a field content.
# Default: current document
$gfSnippetSetting = (isset($docid)) ? $docid : false;
$gfRequestSetting = (!empty($_REQUEST) && isset($_REQUEST['docid'])) ? $_REQUEST['docid'] : false;
$gfIntDocId = gfSetOrder($gfSnippetSetting, $gfRequestSetting, $gfBoolGetOrder, $modx->documentIdentifier);
unset($gfSnippetSetting, $gfRequestSetting);
# $field [ string ]
# Name of the field for which to get the content:
# - any of the document object fields (http://modxcms.com/the-document-object.html)
# - template variable
# Default: 'pagetitle'
$gfSnippetSetting = (isset($field)) ? $field : false;
$gfRequestSetting = (!empty($_REQUEST) && isset($_REQUEST['field'])) ? $_REQUEST['field'] : false;
$gfStrDocField = gfSetOrder($gfSnippetSetting, $gfRequestSetting, $gfBoolGetOrder, 'pagetitle');
unset($gfSnippetSetting, $gfRequestSetting);
# $parent [ 0 | 1 ]
# If set to 1, the snippet will return value for the document parent.
# Default: 0
$gfSnippetSetting = (isset($parent)) ? $parent : false;
$gfRequestSetting = (!empty($_REQUEST) && isset($_REQUEST['parent'])) ? $_REQUEST['parent'] : false;
$gfBoolParent = gfSetOrder($gfSnippetSetting, $gfRequestSetting, $gfBoolGetOrder, 0);
unset($gfSnippetSetting, $gfRequestSetting);
# $parentLevel [ int ]
# Specifies how high in the document tree to search for the parent of the document:
# - $parentLevel = 0 - returns the ultimate parent (right under site root)
# - $parentLevel = 1 - returns the direct parent
# Default: 0
$gfSnippetSetting = (isset($parentLevel)) ? $parentLevel : false;
$gfRequestSetting = (!empty($_REQUEST) && isset($_REQUEST['parentLevel'])) ? $_REQUEST['parentLevel'] : false;
$gfIntParentLevel = gfSetOrder($gfSnippetSetting, $gfRequestSetting, $gfBoolGetOrder, 0);
unset($gfSnippetSetting, $gfRequestSetting);
# $topid [ int ]
# Id of the topmost document in the document tree under which to search for a parent. Used only with $parent set to 1.
# Default: 0
$gfSnippetSetting = (isset($topid)) ? $topid : false;
$gfRequestSetting = (!empty($_REQUEST) && isset($_REQUEST['topid'])) ? $_REQUEST['topid'] : false;
$gfIntTopDocId = gfSetOrder($gfSnippetSetting, $gfRequestSetting, $gfBoolGetOrder, 0);
unset($gfSnippetSetting, $gfRequestSetting);
/* set order
------------------------------------------------*/
function gfSetOrder($gfSnippetSetting, $gfRequestSetting, $gfBoolOrder, $gfDefaultSetting)
{
if (! $gfSnippetSetting && ! $gfRequestSetting) { $gfSetOrderResult = $gfDefaultSetting; }
elseif ($gfBoolOrder == 0) { $gfSetOrderResult = ($gfRequestSetting) ? $gfRequestSetting : $gfSnippetSetting; }
elseif ($gfBoolOrder == 1) { $gfSetOrderResult = ($gfSnippetSetting) ? $gfSnippetSetting : $gfRequestSetting; }
unset($gfSnippetSetting, $gfRequestSetting, $gfBoolOrder);
return $gfSetOrderResult;
}
/* Do not edit the code below!
----------------------------------------------- */
# Include logic
include_once('assets/snippets/getfield/getfield.inc.php');
# Get parent document ID
if ($gfBoolParent)
$gfIntDocId = gfGetParentId($modx, $gfIntDocId, $gfIntTopDocId, $gfIntParentLevel);
# Get content of the field
$output = gfGetFieldContent($modx,$gfIntDocId,$gfStrDocField);
unset($gfIntDocId, $gfStrDocField, $gfBoolParent, $gfIntParentLevel, $gfIntTopDocId, $gfBoolGetOrder);
return $output;
?>
2. create a new document in ModX
- not in menu
- not cacheable
- no template
the only content should be the uncached GetField Call: [!GetField!]
Remember the ID! in this tutorial I will refer to XX, ou should replace it with the id of the document containing GetField!
3. create a new chunk "ajaxRowTpl" for Wayfinder
In this case I used the standard "rowTpl" chunk and added ’name="[+wf.docid+]" ’ inside the <a> tag. This tag is used to get the document-id´s for the ajax-call.
<li[+wf.id+][+wf.classes+]>
<a href="[+wf.link+]" title="[+wf.title+]" name="[+wf.docid+]" [+wf.attributes+]>[+wf.linktext+]</a>
</li>
[+wf.wrapper+]
4. create a new template "basicAjax", insert following code:
(it is also included in the attached archive)
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>[(site_name)] | [*pagetitle*]</title>
<script type="text/javascript" src="manager/media/script/mootools/mootools.v1.00.js"></script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
//////////////////////////////////////////////////////// change settings here START
var ajaxSettings = {
'id': 17, // id of the document containing the modified GetField Snippet
'field': "content"
};
//////////////////////////////////////////////////////// change settings here END
var getAjaxContent = {
ajaxFailure: function(erro) {
location.href = this.hrefBackup;
console.log(erro);
},
makeLink: function(elA){
elA.hrefBackup = elA.getProperty('href');
elA.removeAttribute("href", 0);
elA.linkBody = Object.toQueryString({
id: ajaxSettings.id,
docid: elA.getProperty('name'),
field: ajaxSettings.field
});
this.makeOnClick(elA);
},
makeOnClick: function(elA) {
elA.onclick = function(evt) {
elA.ajaxTask = new Ajax('index.php', {
postBody: elA.linkBody,
onFailure: this.ajaxFailure.bind(elA),
evalScripts: true,
update: 'ajaxContent'
}).request();
this.resetLinks();
elA.setProperty('class', 'active');
}.bind(this);
},
resetLinks: function(){
$('ajaxMenue').getElements('a').each(function(elA){elA.removeAttribute("class", 0);});
},
init: function(){
$('ajaxMenue').getElements('a').each(function(elA){
this.makeLink(elA);
}, this);
}
};
window.onDomReady(getAjaxContent.init.bind(getAjaxContent));
</script>
<div id="ajaxMenue">
[!Wayfinder? &startId=`0` &rowTpl=`ajaxRowTpl`!]
</div>
<div id="ajaxContent">Ajax-Content will be placed here.</div>
</body>
</html>
5. create a new document in ModX
- not in menu
- not cacheabl
- template "basicAjax"
hope it helps ;-)
