Jump to:

2011 Posts in 1436 Topics by 620 members

Form Questions

SilverStripe Forums » Form Questions » How do I render a form or object into a javascript popup?

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1 2
Go to End
Author Topic: 5332 Views
  • zalzadore
    Avatar
    Community Member
    20 Posts

    How do I render a form or object into a javascript popup? Link to this post

    For the front end, not the CMS, I am trying to display a form in a javascript (greybox) popup but I am having no luck.

    I have a button on my main page labeled 'Signup'. I was hoping to get this button to launch a javascript popup in which the user fills out a form with their details and submits it. On submission the popup would then display a thank you message.

    I have tried a number of approaches including echoing javascript from the 'doSubmit()' function but am obviously missing something.

    What would be the best way to go about this? I would really appreciate any help at all.

    Thanks!

  • theAlien
    Avatar
    Community Member
    131 Posts

    Re: How do I render a form or object into a javascript popup? Link to this post

    Hmmm...
    This is not the easiest thing to do.

    For displaying the form, you should try to make the framework think the form is in a seperate page (at least you need a formtemplate which you call with renderWith). I managed doing that once, but documented my code so badly that I can't help you with some howto-steps.

    Your second question was: how do I display a 'thank you'-message in the js-popup after submitting?
    Unfortunately I can't help you on that one. I've been trying it too, but after a while I settled being content with just a blank form being rendered (which is all in all a lot less confusing than the form still having the entered data). If you do find a solution (or someone else has one) I'll be happy to hear.

  • zalzadore
    Avatar
    Community Member
    20 Posts

    Re: How do I render a form or object into a javascript popup? Link to this post

    Hey thanks for the reply TA.
    I've actually already solved those two problems so am happy to help you out.

    The form renders on a child of the launching form. All the CMS config of the child is on the parent but is accessed through $this->getParent().

    In terms of the thank-you response I use the method from the form tutorial. I re-use the same page_controller object in the form action with renderWith() to re-render the form from the template. The Template has conditional code based on a variable that is set once the form has been submitted.

    So, pseudo code for a form on a page called FormPage would be:

    class FormPage_Controller extends Page_Controller {
    public $form_submitted = false;

    function FormSubmitted() {
    return $form_submitted;
    }

    ...

    // Form Action
    doFormSubmit($data, $form) {
    // process form
    ...
    $form_submitted = true;
    return $this->renderWith(array('FormPage', 'Page'));
    }

    In Layout/FormPage.ss there would be:

    <% if FormSubmitted %>

    <h2>Thanks for submitting</h2>

    <% else %>

    $FormPageForm

    <% end_if %>

    Hope this helps. Now if only I can find out how to render that 'FormPage' into a javascript popup!

  • theAlien
    Avatar
    Community Member
    131 Posts

    Re: How do I render a form or object into a javascript popup? Link to this post

    Hi Zalzadore,

    Thanks, your situation is a bit different than mine - I also have to deal with some dataobjects, but I'll have a look at it as soon as time fits ;)

    Regarding to the JS-popup: I'd use one of the popup modules that are in the unsupported extensions list. If you'd use the PrettyPhoto-extension: update it to the latest version of Pretty Photo (http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/): the version used in the module is 2.2.0 or something (and doesn't support iframes), the latest version of PP however is 2.5 (and does support them). If I'm right, this updating is as easy as replacing everything in the PP-folder in the module.

    Using these popups should now be as easy as adding rel="prettyPhoto[iframes]" to the link.

    BTW: I'm planning on using this functionality in a future project, but haven't done so yet.

  • zalzadore
    Avatar
    Community Member
    20 Posts

    Re: How do I render a form or object into a javascript popup? Link to this post

    Hey cool, I'll check it out.

    I also found this post (http://www.silverstripe.org/archive/show/49254#post49254). It seems PageCommentInterface in the CMS is a relatively 'simple' version of what I'm trying to do. I've had a look at it and it seems that key to the AJAX functionality is the use of a _t() function when creating fields and actions for the form.

    i.e.
    $fields->push(new TextField("Name", _t('PageCommentInterface.YOURNAME', 'Your name')));
    and
    new FormAction("postcomment", _t('PageCommentInterface.POST', 'Post'))

    Any idea what the _t() function does?

    A.

  • theAlien
    Avatar
    Community Member
    131 Posts

    Re: How do I render a form or object into a javascript popup? Link to this post

    Hi, I had a quick glance at it: it's worth a try.

    _t() btw has nothing to do with it. It refers to the files in the lang(uage)-folder.
    Fx: new TextField("Name", _t('PageCommentInterface.YOURNAME', 'Your name')) by default labels the textfield as "Your name", but if you set your interface-language to let's say Dutch (and there is a NL_nl.php language file), it will look for a translation in that file and all of a sudden the Name-textfield is labelled as "Uw naam".

    'PageCommentInterface.YOURNAME' defines respectively the file (PageCommentInterface(.js)) and the location (YOURNAME) where the translation should take place.

  • zalzadore
    Avatar
    Community Member
    20 Posts

    Re: How do I render a form or object into a javascript popup? Link to this post

    Ah right, DOH.

    _t() = translate().

    I'll have a fiddle with PageCommentInterface and let you know how I go.

    A.

  • zenmonkey
    Avatar
    Community Member
    528 Posts

    Re: How do I render a form or object into a javascript popup? Link to this post

    Right now I'm using jQuery Colorbox to submit product reviews, if you want the want a custom "Thank You" you could either Hide the Thank you with Jquery and have it show up with the submit button or create a thank you Page that gets called with a AJAX function and apply a custom template to that page so it doesn't render with the standard page-type template. Either way it will require adjusting the default validation or at least integrating the valadation call with enabling the on submit.

    5332 Views
Page: 1 2
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.