How to retrieve different chunk from form select element within the same page

I am building a form that needs to show different form data in the same page depending one which drop-down option get selected.

<select id="a1" name="a1"">
<option value="chunk 1">chunk 1</option>
<option value="chunk 2">chunk 2</option>
<option value="chunk 2">chunk 3</option>
</select>

I think the easier way maybe to create 3 separate chunks, and retrieve each the relative chunk depending on the selection, but I don’t know how to invoke the onChange in the select element. Can a kind soul helps?

Thanks!

perhaps you can try to create a new snippet ’showchunk’ with content:

I think he wants to swap out the chunks using JS without reloading the page.

OK, here is a way with mootools (dont forget also to include latest mootools in your head):

in your head:




and create a document with blank-Template and as content

Thanks so much, Bruno. I will try it now.

var ajax_url = ’[~yourajaxdocumentwithshowchunksnippet~]’;

I was trying to make sense of [~99~}

Hi Bruno,

If you could bear with me and kindly explain how exactly "[~yourajaxdocumentwithshowchunksnippet~]" works.

First I presume the showchunk snippet in #2 still works?

I then created a blank document (#40) with with these (blank, uncache and unpublised) :

[!showchunk!]
{{chunk1}} <--- not sure if this is correct way to call my chunks
{{chunk2}} <---
{{chunk3}} <---


The page uses jQuery but I have the mootools conflict covered, and I have this:
var ajax_url = ’[~40~]’;

But none of the chunk doesn’t get loaded when selected.

A side note, I actually prefer to use jQuery and I was able to retrieve aJax data correctly with a jQuery call like this:

function loadContent(id) {
jQuery("#formcontainer").load("[(base_url)]loadchunk.php?o="+id+"");
}

"loadchunk" is located outside MODx but in the same server. This workaround is because I don’t know how to retrieve chunk from above jQuery call.

The code looks like this:

<?php

$cOption = $_GET[’o’];

switch($cOption) {
case 1:
echo ’chunk 1’;
break;
case 2:
echo ’chunk 1’;
break;
case 3:
echo ’chunk 3’;
}
?>


Problem with this method that, I am unable to get eForm validation for the above chunks due to Ajax calls. I am also wondering if the validation works with your method.

[!showchunk!]
{{chunk1}} <--- not sure if this is correct way to call my chunks
{{chunk2}} <---
{{chunk3}} <---

you need only


the chunk is then called by the snippet

<script type="text/javascript">
260 //<![CDATA[
261 window.addEvent(’domready’, function(){
262 // Load your images here
263 var data = {’1.jpg’: {caption: ’please provide description’}, ’2.jpg’: {caption: ’Jr. Olympic, 6 lane indoor heated pool’}, ’3.jpg’: {caption: ’One of four studios. Spring loaded floor. Over 80 classes per week.’}, ’4.jpg’: {caption: ’Available for children ages 8 weeks+. Staffed with experienced Mothers and Grandmothers.’}};
264 // Initialize the Slideshow instance
265 var myShow = new Slideshow.KenBurns(’show’, data, { captions: true, controller: true, delay: 4000, duration: 5000, hu: ’images/’, height: 201, thumbnails: false, width:626, pan:50, zoom: [0,50] });
loadchunk();//try to add the function call here
266 });
267 //]]>
268 </script>

Thanks again Bruno, greatly appreciated.

Still not able to load the chunk.

updated page
It does not make a difference. Have been struggled with this and I can’t figure if I have made an error in my code. NO js validation error either.

sorry, my fault, it was at wrong place, have modified it in the code above.

Sorry (and thank you again) ! It’s still not loading

Just notice, when an option is selected, my Firefox developer tool shows error on this:

var req = new Request({

I googled how mootools loads ajax , and this error seems to be that it can’t recognize the url (id#40), or unable to decide which chunk to load (?).