Invoking a snippet from Javascript

159 Posts

eclipseTalk Reply #1, 17 years, 5 months ago

Hi,
This is what I’m trying to do:
Upon a user selection from a combo box I want to update some text retrieved from the database. This is what I have:
- The combo box is defined as follow:

<select id="destination_id" name="destination" onchange="toggleValue(destination.value);" ....

I have a javascript function defined as:

function toggleValue(selectedItem)
{	
	// Construct the URL
	var url = '/displayDestinations?destination='+ selectedItem;
		
	// Make AJax request to update the seating
	var ajaxRequest = new Ajax.Request(url, { method: 'get' });
	
}

and finally in the document "displayDestinations" I’ve defined a snippet to get the data from the database.
My question: Is it the right way to invoke a snippet from Javascript? When I select and item nothing happens..
Thanks to point me in the right direction.

69 Posts

markhurd Reply #2, 17 years, 5 months ago

Don’t have an answer huh

but will be watching this thread with great interest.

I too have a form that needs to execute different snippets based on user-entered data. Right now I’m just executing all of them on page load and selectively showing/hiding the proper one’s output via jQuery as the user fills out the form. A cleaner solution with less overhead would be ideal. grin

5,888 Posts

Bruno17 Reply #3, 17 years, 5 months ago

with mootools you can do it this way:

<select id="destination_id" name="destination" onchange="toggleValue(this.value)">
<option value="test">test</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
</select>

<input type="text" id="test" name="test"/>

<script type="text/javascript">
function toggleValue(selectedItem){
    // Construct the URL
    var url = '[~54~]';
    
    // Make AJax request to update the seating
    var ajaxRequest = new Request({
        method: 'get',
        url: url,
        onSuccess: function(responseText){
            $('test').set('value', responseText);
        }
    }).send('&destination=' + selectedItem);
}
</script>

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

1,624 Posts

cipa Reply #4, 17 years, 5 months ago

So,

Step 1: Create a TV called "snippet"
Step 2: Create a template called for example "Ajax Snippet Call" and enter the TV. In our case [*snippet*]
Step 3: Create a document, assign it the above template and enter the snippet you want to run in the "snippet" TV. Lets say "[[myAjaxSnippet]]". You can also assign parameters to it. [[myAjaxSnippet &fromPage=`A`]]
Step 4: create your snippet.

Lets do one

<?php 
if($fromPage == 'A'){
 echo $fromPage;
}else{
 echo "Something Else";
}
?>

call the page from javascript. You can also use the post method to send values to the page(snippet)

<?php 
if($_POST['fromJs'] == 'A'){
 echo $_POST['fromJs'];
}else{
 echo "Not A";
}
?>

Do not forget to clean your post values in case you want to use them in the database.

PS: Not tested but it should work

Responsive CSS Grid: cipalabs.com/projects/metal/
Blog: MODX Tutorials & Articles

159 Posts

eclipseTalk Reply #5, 17 years, 5 months ago

Thanks all for your replies...