Snippets and javascript

Hi all

Im having trouble combining snippets and javascript

I use javascript in relation to a form, and thus I have a lot of variables in javascript which I want to send to a snippet.

My idea is to output text which resembles a snippet call:



The javascriptvariable is then a textstring like this:



this doesnt work, the output of the snippet is just: + variables +
however if I hardcode the variables like this:



works fine

Any ideas what is wrong?


Thanks in advance

Quote from: tuetue at Jun 05, 2013, 06:40 PM

Hi all

Im having trouble combining snippets and javascript

I use javascript in relation to a form, and thus I have a lot of variables in javascript which I want to send to a snippet.

My idea is to output text which resembles a snippet call:

document.getElementById("snippetcall").innerText=javascriptvariable;

The javascriptvariable is then a textstring like this:

 var javascriptvariable = "[[!MySnippet? &MySnippetVariable=" + variables + "]]"; 

this doesnt work, the output of the snippet is just: + variables +
however if I hardcode the variables like this:

 var javascriptvariable = "[[!MySnippet? &MySnippetVariable=something]]"; 

works fine

Any ideas what is wrong?


Thanks in advance

I'm a bit out of my depth when it comes to mixing javascript with snippets - and I know you just threw in some dummy examples - but could it be something like a typo with the tick marks ("`") that surround the snippet parameter values? For me, I know I always start with looking for my dumb mistakes

try [[!MySnippet? &MySnippetVariable=`"+ variables +"`]]";

I'm not sure I understand what you're trying to do and I hope this doesn't miss your point or sound condescending.

All tags on a page (including snippet tags) will be parsed and any snippets will execute before the page is sent to the user's browser, where the JS will be interpreted and executed for the first time. MODX pays no attention to the JavaScript on a page, and the JS engine in the browser pays no attention to PHP or MODX tags -- it can't because a) those can only be handled by the server and all JavaScript is handled in the client browser, and b) they're all gone by the time the page reaches the browser.

JS can be used to set form fields that will show up as $_REQUEST variables (that a snippet could get access to) when the page is reloaded, but usually the point of using JavaScript is to *avoid* reloading the whole page.

The usual method for the JS on a page to communicate with MODX and PHP on the server without reloading the page is to have some action that JS is aware of (like clicking on a button) result in sending an Ajax request, which is a request for another page on the site that contains some PHP code. Messages back and forth between the two during the Ajax process are usually in JSON format, though they don't have to be.

You can send variables from MODX/PHP to the Javascript in various ways as long as the code that sets them up executes before the page is sent to the browser. The easiest method is to have a snippet that sets placeholders, which replace tags in the JS code on the page.

For going the other way, though, Ajax is really the only practical method. Trying to use JS to alter the code of a MODX tag won't ever work because the JS engine will never see a MODX tag.

I apologize if you knew all that already.

Hi. Thanks for the replies.

I think BobRay really described my problem. My form should not reload and this is why I've used JS to perform field validation etc.

What I want to do is to send an email with the form content after the form is validated.
Could AJAX be used to do that?

I have not used AJAX before, but after reading about it, it looks like that would be the way to go?

Any suggestion for where to find examples of AJAX code which could perform that?

So you want the form to remain with its fields filled in?

If it's a simple contact form, you could use SPForm, which does JavaScript validation for you.

If not, you could look at the SPForm code and use its JavaScript for your validation.

An any case, what you want is to put an onclick() method in the HTML for the submit button on the form.

That will call the JavaScript function when the user clicks on the button. The JavaScript function can validate the code, display any error messages, and prevent the form from being submitted if it's not valid. You shouldn't need to use Ajax at all.

I have the form and all the javascript done, so no need to use SPForm.

What I need, is something that can use the input from the form, without the form or page loads/re-loads.

I can access all the values from the form using javascript, but I cannot process it.

The most important thing for me is to write and send an email with the form data.

how to ajax-post a form with jquery, see the last example here:
http://api.jquery.com/jQuery.post/

as action for your form use a resource with an empty-template and a formit-call on it, which processes the submission.

Yep thats worked. Thanks a lot