Out of MODx, I test loading this page in the browser:
http://localhost/test/form.html
form.html:
<form method="post" action="test.php" id="demoForm">
<input id="action" name="action" type="hidden" value="dittoAjax" />
<input type="image" name="previous" src="prev.png" />
<input type="image" name="next" src="next.png" />
</form>
...where:
test.php:
<?php
print_r($_POST);
?>
Clicking on the "next" image, another page loads and I obtain:
Array ( [action] => dittoAjax [next_x] => 18 [next_y] => 19)
(where "18" and "19" are the coordinates where I have clicked the "next" image, but this doesn’t matter).
Ok, now I want to use this same form, changing a bit the
example in this wiki page (which works well): in the example, there is a submit button, which makes a Ditto article appear.
What I want, are two buttons, which make a Ditto article appear, depending on which of the two buttons is clicked, "previous" or "next".
Obviously to achieve this I’ll have some more logic in the backend snippet, but there’s no problem as long as I know which of the two buttons has been clicked.
But, thi is not the case.
Like in the example, I have a frontend and a backend node, respectively calling a frontend snippet and a backend snippet. Then I have a javascript node [~75~], which is referred into the backend snippet.
The frontend snippet is:
<?php
$modx->regClientStartupScript("manager/media/script/mootools/mootools.js");
$modx->regClientStartupScript("[~75~]"); // assuming that my javascript file to do the trick is located in the document 75
switch($action){
case "dittoAjax":
// assuming that the backend snippet is located in document 77
$output ='
<form method="post" action="[~77~]" id="demoForm">
<input id="action" name="action" type="hidden" value="dittoAjax" />
<input type="image" name="previous" src="prev.png" />
<input type="image" name="next" src="next.png" />
</form><br/>
<br/>
<div id="container"></div>';
echo $output;
break;
}
?>
The node [~77~], which simply calls the backend snippet, for test purposes is:
<?php
print_r($_POST);
?>
Ok, now I can see that, when I click one of those "previous" or "next" image buttons, the Ajax call works and I can see (with a nice entering effect) this result:
Array ( [action] => dittoAjax )
So you can see, no sign of those [next_x], [next_y], or [previous_x], [previous_y].
If I comment the line including the javascript node, they are there in the $_POST variable; of course, I also loose the Ajax thing. But when I reactivate back the javascript inclusion, the result does not contain any of those [next_x] etc., I just have the $_POST[’action’] coming from the hidden variable.
Could someone help me avoiding the loose of the information of the clicked button in the backend, or any method to build a form with a previous/next couple of images (arrows), in order to be able to capture the clicked one in the backend snippet.
Here it is the javascript code (same as in wiki, just changed ’load’ into ’domready’):
window.addEvent('domready', function() {
var element = $('container');
var mySlider = new Fx.Slide(element, {duration: 500,transition: Fx.Transitions.backOut});
$('demoForm').addEvent('submit', function(e) {
mySlider.hide()
new Event(e).stop();
// assuming that the backend snippet is located in document 77
new Ajax("[~77~]",{
// get all the variable/value pairs from the form
postBody:$('demoForm').toQueryString(),
onComplete:showResponse,
update:element
}).request();
});
function showResponse(request){
mySlider.hide()
mySlider.toggle() // toggle the slider up and down.
}
})
Thanks in advance to whoever dares reading all this stuff, and not enough good words for anyone who will try to help on this issue. If you have questions, please ask.
