3 users online. Create an account or sign in to join them.Users

Search

Hello,

I have a very simple form wrapped inside a jQuery overlay window to submit a name and an e-mail address to my Subscribers section.

The event I created for this is very simple. It returns either result="success" or result="error", depending on the user input.

The good news is that the form works.

The form validation, however, does not. The overlay window closes whenever I hit the submit button. It seems the Success or Failure XML provided by Symphony doesn't make its way into my form.

My jQuery is fairly simple: 

$(function() {

// load the modal window
$('a.modal').click(function(){

    // scroll to top
    $('html, body').animate({scrollTop:0}, 'fast');

    // before showing the modal window, reset the form incase of previous use.
    $('#signupForm').show();

    //show the mask and contact divs
    $('#mask').show().fadeTo('', 0.7);
    $('div#signup').fadeIn();

    // stop the modal link from doing its default action
    return false;
});

    //when the Submit button is clicked...
        $('#signupForm').submit(function() {
        return false;
}); 

// close the modal window if close div or mask div are clicked.
$('div#close, div#mask').click(function() {
    $('div#signup, div#mask').stop().fadeOut('slow');
});
});

This is probably rather a jQuery than a Symphony issue, but if someone could help, that would be great!

I may be wrong, but it would seem that you're only dynamically showing or hiding the form. For the form to get a response, the whole page needs to reload and therefore fire the event.

I'd suggest creating another page with the form on, load that via ajax into the modal window, and post that page which should receive the response.

I must admit, I've not used jQuery Ajax yet, so someone else will have a better example for you.

Are you actually submitting the form via AJAX?

@Tintin81

check you script line 1 char 1: $(function(){…}()) is wrong. You are putting function into a jQuery object. Should be (function($){…}(this.jQuery));

You may also look at my form jQuery inline validation plugin for symphony cms. You can do pretty much everything with it.

Good spot, although it's not this.jQuery just jQuery

you can do both. this refers to the global Object, in this case window, so its best practice to use window.jQuery or this.jQuery

OK, thanks Thomas, I changed the jQuery accordingly.

I need to run the form from within the pop-up window (and also validate the user input in there), so I am hoping to find a way to do just that.

This is a simplified version of the form I am using: 

    <div id="signup">
    <form method="post" action="" enctype="multipart/form-data" id="signupForm">
        <xsl:for-each select="events/subscribe">
            <p class="{@result}">
                <xsl:choose>
                    <xsl:when test="@result = 'error'">You forgot something!</xsl:when>
                    <xsl:when test="filter/@status = 'failed'">
                        <xsl:attribute name="class">error</xsl:attribute>
                        <xsl:text>Technical error!</xsl:text>
                    </xsl:when>
                    <xsl:otherwise>Thanks!</xsl:otherwise>
                </xsl:choose>
            </p>
        </xsl:for-each>
        <label>Name
            <input name="fields[name]" type="text" />
        </label>
        <label>E-mail
            <input name="fields[e-mail]" type="text" />
        </label>
        <input name="action[subscribe]" type="submit" id="submit" value="Subscribe" />
    </form>
</div>

It's embedded at the bottom of every page (but hidden with CSS), so I don't see why I need to create another page just to put the form on.

Any ideas on how to make this work from within the pop-up window?

I thinkt it'd be a better way to seperate thinks. You have to create just two additional, hidden pages, one for the form markup and one for your form validation.

e.g.:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
<xsl:import href="../utilities/get-request-form.xsl"/>
<xsl:output method="xml" omit-xml-declaration="yes" encoding="UTF-8" indent="yes" />

    <xsl:template match="data">
        <xsl:call-template name="request-form" />   
    </xsl:template>
</xsl:stylesheet>

And for you validating purposes something like:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" >  


  <xsl:output method="xml" encoding="UTF-8" indent="no" />

  <xsl:template match="data">
      <data>
        <xsl:copy-of select="events" />   
        <submitmessage>
        <xsl:if test="events/send-request/@result = 'error'">     
            <xsl:value-of select="request-submit-status/entry/error" />
        </xsl:if>     
        <xsl:if test="events/send-request/@result = 'success'">   
            <xsl:value-of select="request-submit-status/entry/success" />
        </xsl:if>     
        </submitmessage>
      </data>

  </xsl:template>

</xsl:stylesheet>

Client side it would look like this, if you are using jQuery

function getAjaxContent ( url, callback ) {
   // put your ajax stuff in here
}

$(window).delegate('a.subscribe', 'click',function(){
    // open modal window
    getAjaxContent('path/to/ajax-form/', function(response){
      // add response data to your modal window and execute validation script.
    }
});

This is just a rough and very exemplary pattern you could use, but I'd give you good point to start.

One page should do it with an XSL choose test for the presence of the send-request event.

Create an account or sign in to comment.

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.2 or above
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.0 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details