Search

I've been looking all over but can't find any specific info on this that I can make sense of.

I'm a relatively new to Symphony and JQuery and I've been hunting around trying to find out how to submit a Symphony event using the JQuery AJAX method.

I'd also love to know how to get the success or failure XML afterwards without refreshing the page? Or is there another way to get this info.

Could anyone offer an example of how to achieve this or a basic step by step. I've tried a few things but nothing ever works!

Cheers.

Create a basic page, attach your event to it, make it output whatever simple XML you like based on the success/failure of the event, and then submit your AJAX POST to that page.

Ah - I think that makes sense. I'll have a try tomorrow and see how I get on.

Should the basic event page output XML or html (sorry if that should be obvious)?

Thanks!

Either — your own JavaScript will read the response. Do you want to parse the response as XML to get specific values out, or do you want to get an HTML chunk back to dump into your page DOM? Most likely set the output type as xml on your xsl:output element, and add XML as a Page Type in Symphony.

For fellow noobs like me who might search for this later I did managed to get this working after some tinkering.

Basically here's what I did:

1) Created a section (just with one field in it called 'Name'), then created a event called 'myevent' for that section.

2) Created a page with the type as XML and hidden called 'ajaxing' (but obviously you can call it what you want). I attached my event to this page. Then made this page output some basic XML. The template looked like this (this is inside the stylesheet tag):

<xsl:output method="xml"
    doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
    doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    omit-xml-declaration="yes"
    encoding="UTF-8"
    indent="yes" />

<xsl:template match="/">
    <root>
        <message><xsl:value-of select="data/events/myevent/@result"/></message>
    </root>
</xsl:template>

3) Created a page which has the form for my event on, using the suggested form code on the Event page in the back end. The only two changes you need to make to this is to give the form an ID (so you can target it with JQuery) and to change the action to point to the page created above. There is no need to attach the event to this page.

My form had the following mark up:

<div id="sign-up">
            <form id="myForm" method="post" action="/ajaxing/" enctype="multipart/form-data">
              <input name="MAX_FILE_SIZE" type="hidden" value="5242880" />
              <label>Name
                <input name="fields[name]" type="text" />
              </label>
              <input name="action[myevent]" type="submit" value="Submit" />
            </form>
            </div>

4) Then I went and grabbed this plug in: JQuery Form Plugin which provides an easy frame work for doing ajax form submits. I added that and the JQuery library to inside <head>...</head>on the page with the form on it.

5) The form plugin has a lot of options but it will actually work right away if you simply put the following in your <head> tag under JQuery and the plugin:

   &lt;script type="text/javascript">
        $('#myForm').ajaxForm();
   &lt;/script>

However this does not give any options for showing the success or failure of the form .

6) So I we use the result XML from the 'ajaxing' page to tell the original page what to do. This is a little more complicated but hopefully should make some sense. This replaces the code above and can go in your head just below your link to Jquery and the Form Plugin (or in a separate file if you'll be using it in a few places). 

&lt;script type="text/javascript">
<!-- Ensure the DOM is loaded -->
$(document).ready(function() { 

<!-- Set the plugin options (see plug in documentation for more) -->
var options = {  
     <!-- A function to be used if submit is successful --> 
     success:  processXml,
     <!-- Type of data the plugin can expect to get back from the server ie XML in this case -->
     dataType: 'xml',
     <!-- A function to do before submitting the form -->
     beforeSubmit:  hideForm
 };

<!-- Initialize the plugin on our form with the options from above  -->             
     $('#myForm').ajaxForm(options);
});

<!-- Before submitting, hide the form so it looks like something is happening for the user. You could also perform some simple validation at this step -->
function hideForm(){
     $('#myForm').hide();
};

<!-- Show what to do with the XML response from the server (responseXML is a built in variable of the plugin) -->                           
function processXml(responseXML) { 
     <!-- get the text from our Message node in the response XML -->
     var message = $('message', responseXML).text(); 
     <!-- Create a div to stash our result in -->
     var $result = $('<div id="result" />')

     <!-- If the result is an error show the form again, put some appropriate text in the #result and show the result div -->
          if (message == 'error') {
               $('#myForm').show();
               $result.html('We encountered a problem');
               $('#sign-up').append($result);

              <!-- If it's not an error then just show some success text -->
          } else {
               $result.html('Info was saved.'); $('#sign-up').append($result);
         };
};
&lt;/script>

Sorry that's very long - I've tried to comment the code so hopefully that all makes sense. I've also put the whole .xsl file up on pastie here: http://pastie.org/1649957

Hopefully that is useful for someone as a bit of a workflow for creating AJAX submission of events.

UPDATE: Markdown is messing with the opening <of all the script tags and I can't seem to get it to stop it. So make sure you change those before using. Or use the code on pastie.

[timchesney], i followed as u said, but the page just redirects to the ajaxing page , nothing else happens ?

Have you definitely got the jquery libaray loaded?

You need to have this above any other script tags for the form library to work.

You'll also need to make sure your form adn page have the same mark up (ie is your form called #myForm? etc.

Probably need some more info to be able to help.

Hi there,

I wrote a neat little jQuery plugin which you can use to inline-validate your symphony forms. It uses symphonys build in validation feature, so all validation is done server-side.

It is quite flexible because it doesn't limit you in the way, you want to handle the validation results.

You can use two callbackmethods ( onValidationSuccess and onValidationError ) to handle results.

I haven't implemented an onsubmit event to prevent the user from submitting the invalid form yet, so at the moment, you have to do this manually (e.g. iterate over all form elements and check their $.data('validates') state).

/*
 ...
"onValidationSuccess" and "onValidationError" overwrites the default validation result callback methods
so here you can do what ever you need to satisfy you validation needs */



$('form').SymphonyFormInlineValidate({
        // url to you events xml
        url:'/path/to/comment-ajax-validate/',
        /**
        * context   this : the field element
        * @param    message     Object Literal, contains validation info
        * @param    name        field name
        * @param    required    bool or undefined
        */      
        onValidationSuccess : function( message, name, required ) {
            console.log( message, name, required );
            // you stuff here
            if ( required ) {
                this.css({borderColor:'greenyellow'});  
            } else {
                this.css({borderColor:''}); 
            }           
            this.data('vaidates', true );    
        },
        /**
         * context  this : the field element
         * @param   message     Object Literal, contains validation info
         * @param   name        field name
         */                 
        onValidationError : function( message, name ) {
            console.log( message, name );
            // you stuff here                
            this.css({borderColor:'red'});
            this.data('vaidates', false );
        },            
});

Grab it here

I hope you like it

JQuery / AJAX Event Submit is not working in entire IE versions any tips/help ? (i followed the above mentioned way which timchesney said , it works in other browsers but not in IE :( )

I recently updated the plugin, you can find it now on github

Fixed some xml incompatibility issues regarding IE

[EDIT] tells me to do so:

there's a quite comprehensive implementation example js file within the git repository. You may also refer to this file which might help you setting up your form, but don't hesitate to contact me if you need any helping hand.

Kind Regards, Thomas

hi,

i know this post is rather old but i just gave timchesney's approach with the ajax-page a try and i fail to get the message xml filled by the attached event.

the setup:

section Subscribers with fields - email (Field: Member Email) - date - checkbox

page home.xsl which holds the form and posts to ajax-page/ http://pastie.org/2736011

page ajax-optin.xsl which has the event Subscribe attached, is set to hidden, xml and outputs 

<root>
   <message><xsl:value-of select="data/events/subscribe/@result"/>aaa</message>
</root>

event Subscribe with source Subscribers and filter options Send Email Template from the Email Template Manager Extension.

when i enter something into the email field and submit and alert() the message-variable i get an output of 'aaa' (which i hardcoded in the xml from the ajax-optin page) but not the value that should be in it from the event. also, nothing gets inserted, no entry generated.

i cant seem to find the error here, im kinda lost. some help would be greatly appreciated! :)

thanks, daniel

@daniel, first of all, make sure if it works without ajax.

turn on option in config.php : 

'display_event_xml_in_source' => 'yes'

and watch the output

You're probably not triggering the event as the input[submit] is commented.

doh :) thanks! have looked at it for too long, commented the submit out for some tests and just forgot about it. will test tomorrow. thanks again :)

hey guys, still no luck. the output with submit button enabled (name="action[subscribe]") and display event xml turned on. output from redirect:

<!DOCTYPE root PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<root>
  <message>aaa</message>
</root>

<!-- 
<events />
 -->

i think it has something to do with the form beeing on the one page (home.xsl) and the event being attached to the other (ajax-optin.xsl).

The only thing that I would try is changing the form action to this:

action="ajax-optin/"

Note the trailing slash. I remember events not being fired because of .htaccess redirect to the traling slashed url. Worth a try :)

You can use Firebug's console (or similar tool) to monitor AJAX requests. Find out what data is actually send to your ajax-optin/ page.

It must send 'action=subscribe' and if event 'subscribe' is attached to a page, it will be triggered.

thanks guys! it was the trailing slash... :)

@timchesney

Just wanted to say thanks for your little walk through - I found it really helpful!

Hello, I followed the tutorial for the ajax event and it worked great.

My current problem is, my event was defined with an email send when saved to the DB. In other (non-ajax) events at my current project the send email function works perfectly as expected (with the send-email hidden fields) but in my particular Ajax event no email gets sent. The requested parameters are sent in the post to the XML page but no email is sent.

The Code is pretty much the same as the example with a separete XML page, form processed with JQueryForms, etc..

Any ideas?

Thank you!

Create an account or sign in to comment.

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details