This might help (or not).
http://bobsguides.com/blog.html/2014/01/15/how-javascript-works-in-modx/
I'm sorry, I don't have an example for you. What you want to do is relatively simple, if you're used to Ajax, but difficult to understand if you're not.
The problem is that with an Ajax request, the results are returned to the browser, not to the server running MODX. You could use regular JS to alter the value of a form field before submitting the form, but you want to avoid refreshing the page.
In that case, one way is to have a button on the screen with an OnClick() event that calls a JS function. That function issues an ajax request to a processor file and sends along some information in the form of a JSON string. The processor file contains PHP that uses the information sent in the Ajax call to do a query, then return a success flag along with the results.
The Ajax call will have a "Success" function. When it receives the data back, it uses JS to alter what's on the screen and show the extra data.
**********
BTW, If the results won't ever be all that long, I would be inclined to cheat and do something like the following. It just puts the additional results in a hidden div and uses a button to toggle their visibility.
Create a Tpl chunk called ResultsChunk like this:
<div id="first" class="show">
[[+initial_results]]
</div>
<div id="additional" class="hide">
[[+additional_results]]
</div>
<button onclick="toggle('additional');">Show More</button>
CSS:
div.show {
display:block;
}
div.hide {
display:none;
}
Now the additional data is hidden on page load (though visible when you do a "view source").
PHP
Write a snippet that puts the first n results (as a string of HTML) in a variable called $first and the rest in a variable called $second (as a similar string).
Then do this:
$fields = array(
'initial_results' => $first;
'additional_results => $second;
);
return $modx->getChunk('ResultsChunk', $fields);
JS (to show the additional data when the button is clicked)
<script type="text/javascript">
function toggle(divId) {
var e = document.getElementById(divId);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
</script>
If you don't want a second button click to hide it again, just leave out the "else". BTW, the JS could go at the top of the Tpl Chunk.
[ed. note: BobRay last edited this post 12 years, 7 months ago.]
